Kedy by som mal používať TypeScript?

Minulé leto sme museli previesť obrovskú kódovú základňu (viac ako 18 000 riadkov kódu) z JavaScriptu do TypeScript. Naučil som sa veľa o silných a slabých stránkach každého z nich, a keď to malo zmysel použiť jeden nad druhým.

Tento článok je teraz k dispozícii v japončine a čínštine.

Keď má zmysel používať TypeScript

Keď máte veľkú základňu kódov

Keď je vaša základňa kódov obrovská a na projekte pracuje viac osôb, typový systém vám môže pomôcť vyhnúť sa mnohým bežným chybám. Platí to najmä pre jednostránkové aplikácie.

Kedykoľvek môže jeden vývojár zaviesť prelomové zmeny, je všeobecne dobré mať nejaký bezpečnostný mechanizmus.

Prekladač TypeScript odhaľuje najočividnejšie chyby - aj keď magicky neodstráni potrebu ladenia.

Ak vaša základňa kódov nie je taká veľká, pravdepodobne nemá zmysel ju zväčšovať pridávaním anotácií k typom. Konvertoval som viac ako 180 súborov z JavaScriptu na TypeScript a vo väčšine prípadov to pridalo na celkovej veľkosti kódu zhruba 30%.

Keď sú vývojári vášho tímu už zvyknutí na jazyky so statickým typom

Ak vy alebo väčšina tímu pochádzate zo silne písaného jazyka, ako je C # alebo Java, a nechcete používať all-in v jazyku JavaScript, je TypeScript dobrou alternatívou.

Aj keď odporúčam dôkladne sa naučiť Javascript, nič vám nebráni v používaní TypeScript bez znalosti JavaScriptu. V skutočnosti TypeScript vytvoril ten istý človek, ktorý vytvoril C #, takže syntaxe sú podobné.

V mojej spoločnosti sme mali tím vývojárov C #, ktorí kódovali sofistikovanú desktopovú aplikáciu v C # a WPF (čo je v podstate front-endový vývojový nástroj pre svet desktopov). Potom boli požiadaní, aby sa pripojili k webovému projektu ako vývojári s úplným zásobníkom. Takže v krátkom poradí boli schopní naučiť sa TypeScript pre front-end, potom využiť svoje znalosti C # pre back-end.

TypeScript môže slúžiť ako náhrada za Babel

Starý Microsoft zvykol brať štandardné nástroje - napríklad Javu - a pridávať im vlastné neštandardné funkcie - v tomto prípade to malo za následok J ++. Potom by sa pokúsili prinútiť vývojárov, aby si vybrali medzi týmito dvoma možnosťami.

TypeScript je úplne rovnaký prístup - tentokrát pre JavaScript. Mimochodom, nejde o prvú vidlicu JavaScriptu spoločnosti Microsoft. V roku 1996 roztvorili vidlice JavaScript a vytvorili JScript.

Aj keď sa jedná o menej častý prípad použitia, je technicky možné preniesť kód ES6 do ES5 pomocou transportéra TypeScript. Je to možné, pretože ES6 je v podstate podmnožinou TypeScript a transportér TypeScript generuje kód ES5.

Transpiler stroja vygeneruje ako výstup pekne čitateľný kód Javascript (EcmaScript 5). To bol jeden z dôvodov, prečo si tím Angular 2 vybral TypeScript pred vlastným jazykom Google Dart.

TypeScript má tiež niekoľko skvelých funkcií, ktoré nie sú v ES6, ako sú enumy a schopnosť inicializovať členské premenné v konštruktore. Nie som veľkým fanúšikom dedičstva, ale považujem za užitočné mať v triedach verejné, súkromné, chránené a abstraktné kľúčové slová. Strojopis ich má a ES6 nie.

Naši vývojári v jazyku C # si mysleli, že je úžasné, keď dokážeme napísať funkciu lambda ako telo metódy, ktorá eliminuje bolesti hlavy spojené s týmto kľúčovým slovom.

Keď knižnica alebo rámec odporúča strojopis

Ak používate Angular 2 alebo inú knižnicu, ktorá odporúča TypeScript, choďte do toho. Zoznámte sa s tým, čo hovoria títo vývojári po šesťmesačnom používaní aplikácie Angular 2.

Vedzte, že - aj keď TypeScript môže používať všetky knižnice JavaScriptu po vybalení z krabice - ak chcete dobré syntaktické chyby, budete musieť pridať definície typov týchto knižníc externe. Našťastie milí chlapci v spoločnosti DefinitelyTyped vytvorili repo založené na komunite s nástrojmi na to, aby robili práve to. Pri príprave projektu je to však ešte jeden krok navyše

(Na okraj: pre všetkých fanúšikov JSX si pozrite TSX.)

Keď skutočne cítite potrebu rýchlosti

Môže to byť pre vás šok, ale kód TypeScript môže v niektorých situáciách fungovať lepšie ako JavaScript. Nechaj ma vysvetliť.

V našom kóde JavaScript sme mali veľa kontrol typu. Išlo o aplikáciu MedTech, takže aj malá chyba mohla byť doslova fatálna, ak by nebola správne vyriešená. Mnoho funkcií malo teda vyhlásenia ako:

if(typeof name !== ‘string) throw ‘Name should be string’

S TypeScriptom by sme mohli vylúčiť veľa týchto kontrol typu dohromady.

Toto sa zvlášť prejavilo v častiach kódu, kde sme predtým mali úzke miesto výkonu, pretože sme mohli preskočiť množstvo zbytočných kontrol runtime typov.

Kedy je vám teda lepšie bez strojopisu?

Keď si nemôžete dovoliť ďalšiu daň za prepravu

Neplánujú sa natívna podpora TypeScript v prehľadávačoch. Chrome urobil nejaký experiment, ale neskôr zrušil podporu. Mám podozrenie, že to má niečo spoločné so zbytočnou réžiou.

Ak niekto chce cvičné kolieska, môže si ich nainštalovať. Bicykle by však nemali byť vybavené permanentnými tréningovými kolesami. To znamená, že svoj kód TypeScript budete musieť pred spustením v prehliadači vždy preniesť.

Pre štandardnú ES6 je to úplne iný príbeh. Keď väčšinu prehliadačov podporuje ES6, súčasná transpozícia z ES6 na ES5 sa stane nepotrebnou (aktualizácia: áno!).

ES6 je najväčšia zmena v jazyku JavaScript a verím, že väčšina programátorov sa s tým vyrovná. Ale tí odvážni, ktorí chcú vyskúšať ďalšiu verziu experimentálnych funkcií JavaScriptu alebo funkcií, ktoré ešte nie sú implementované vo všetkých prehliadačoch - budú si musieť transponovať aj tak.

Bez transpilácie iba upravíte súbor a obnovíte prehľadávač. To je všetko. Nie je potrebné žiadne sledovanie, prekladanie na požiadanie ani vytváranie systému .

Ak vyberiete TypeScript, nakoniec urobíte nejaké ďalšie účtovníctvo pre definície typov pre vaše knižnice a rámce Javascript (pomocou DefinitelyTyped alebo napísaním vlastných anotácií typu). To je niečo, čo by ste nemuseli robiť pre čisté projekty JavaScriptu.

Ak sa chcete vyhnúť podivným prípadom ladenia okrajov

Mapy prehľadov uľahčujú ladenie strojopisu, ale súčasný stav nie je dokonalý. Existujú skutočne nepríjemné a mätúce okrajové prípady.

Vyskytli sa tiež problémy s ladením kľúčového slova „this“ a vlastností s ním spojených (rada: „_to“ funguje vo väčšine prípadov). Je to preto, že súbory Sourcemaps v súčasnosti nemajú dobrú podporu premenných - aj keď sa to v budúcnosti môže zmeniť.

Ak sa chcete vyhnúť potenciálnym trestom za výkon

V našom projekte sme mali viac ako 9 000 riadkov starého dobrého JavaScriptu ES5, ktorý dodával čistý konský výkon na 3D plátno WebGL. Nechali sme to tak.

Transportér TypeScript (rovnako ako Babel) má funkcie, ktoré vyžadujú generovanie dodatočného kódu (dedičstvo, enum, generické údaje, asynchrónne / čakajúce atď.). Bez ohľadu na to, aký dobrý je váš transpiler, nemôže prekonať optimalizáciu dobrého programátora. Preto sme sa rozhodli ponechať to v obyčajnom ES5 pre jednoduchšie ladenie a nasadenie (žiadna transpilácia).

To znamená, že výkonnostný trest je pravdepodobne zanedbateľný v porovnaní s výhodami typového systému a modernejšej syntaxe pre väčšinu projektov. Existujú však prípady, kedy záleží na milisekundách a dokonca aj mikrosekundách, a v tých prípadoch sa neodporúča nijaká transpilácia (ani pri Babel, CoffeeScript, Dart atď.).

Všimnite si, že Typescript nepridáva žiadny ďalší kód na kontrolu typu za behu. Celá kontrola typu sa deje v čase transpilácie a anotácie typu sú odstránené z vygenerovaného kódu Javascript.

Keď chcete maximalizovať svižnosť svojho tímu

Nastavovanie niečoho v JavaScripte je rýchlejšie. Chýbajúci typový systém prispieva k svižnosti a jednoduchosti výmeny vecí. Tiež to uľahčuje rozbíjanie vecí, takže sa uistite, že viete, čo robíte.

Javascript je flexibilnejší. Pamätajte, že jedným z hlavných prípadov použitia typového systému je sťažiť rozbíjanie vecí. Ak je strojopisom Windows, Javascript je Linux.

V aplikácii JavaScript Land nedostanete cvičné kolieska typového systému a počítač predpokladá, že viete, čo robíte, ale umožní vám jazdiť oveľa rýchlejšie a ľahšie manévrovať.

Toto je obzvlášť dôležité poznamenať, ak ste ešte stále vo fáze vytvárania prototypov. Ak áno, nestrácajte čas s TypeScript. JavaScript je oveľa flexibilnejší.

Pamätajte, že TypeScript je nadmnožinou JavaScriptu. To znamená, že môžete neskôr ľahko previesť JavaScript na TypeScript, ak potrebujete.

Moja preferencia pre JavaScript VS TypeScript

Neexistuje celkovo jeden najlepší jazyk. Ale pre každý jednotlivý projekt existuje pravdepodobne jeden objektívne najlepší jazyk a knižnica a rámec, databáza a operačný systém a ... získate obraz.

Pre náš projekt malo zmysel používať TypeScript. Snažil som sa niektoré zo svojich záujmových projektov preorientovať na TypeScript, ale nestálo to za námahu.

Mne osobne sa páčia piate veci o TypeScript:

  1. Je plne kompatibilný s ES6. Je skutočne pekné vidieť, ako Microsoft hrá korektne s ostatnými prehľadávačmi. Náš ekosystém môže ťažiť zo silného konkurenta pre spoločnosti Google, Mozilla a Apple. Microsoft na to vynakladá veľa energie - napríklad na písanie kódu Visual Studio od začiatku pomocou TypeScript v prehliadači Google Chrome na všetkých platformách.
  2. Systém typov je voliteľný. Pochádzajúci z prostredia C a Java som zistil, že nedostatok typového systému v JavaScripte ma oslobodzuje. Neznášal som však stratu času, keď som počas behu narazil na hlúpe chyby. Strojopis mi umožňuje vyhnúť sa mnohým bežným chybám, aby som sa mohol sústrediť na opravu tých naozaj zložitých. Je to dobrá bilancia. Páči sa mi to. Je to môj vkus. Typy používam vždy, keď môžem, pretože mi to dáva pokoj. Ale to som ja. Ak používam TypeScript, nechcem sa obmedzovať na jeho vlastnosti ES6.
  3. Kód JavaScript, ktorý vychádza z prekladača TypeScript, je veľmi dobre čitateľný. Nie som fanúšikom Sourcemaps, takže väčšinu môjho ladenia robím na vygenerovanom JavaScripte. Je to úplne úžasné. Celkom rozumiem tomu, prečo si Angular 2 vybral TypeScript nad Dart.
  4. Vývojové skúsenosti s TypeScriptom sú fantastické. VS Code je pri práci s JavaScriptom veľmi inteligentný (niektorí môžu tvrdiť, že je to najchytrejší JS IDE). Ale TypeScript posúva limity na úplne novú úroveň. Funkcie automatického dopĺňania a refaktoringu vo VSCode fungujú oveľa presnejšie a nie je to tak preto, že IDE je super inteligentné. To je všetko vďaka TypeScript.
  5. Poznámky k typu sú ako dokumentácia na základnej úrovni. Deklarujú typ údajov, ktoré každá funkcia očakáva, ich výsledky a rôzne ďalšie rady readonly, publicalebo privateatribúty. Podľa mojich skúseností, keď sa snažím refaktorovať kód JavaScript na TypeScript, zvyčajne skončím s čistejším kódom s príjemnejšou štruktúrou. Písanie TypeScript v skutočnosti zlepšilo moje písanie obyčajného JavaScriptu.

Strojopis nie je odpoveďou na všetko. Stále do nej môžete napísať hrozný kód.

Nenávidiaci TypeScript budú nenávidieť, buď kvôli strachu zo zmeny, alebo kvôli tomu, že poznajú niekoho, kto pozná niekoho, kto sa ich bojí. Život ide ďalej a TypeScript zavádza do svojej komunity nové funkcie.

Ale rovnako ako React, TypeScript je jednou z tých vplyvných technológií, ktorá posúva hranice nášho webového vývoja.

Či už používate TypeScript alebo nie, nezaškodí vyskúšať ho, aby ste si k nemu vytvorili svoj vlastný názor. Má krivku učenia, ale ak už viete JavaScript, bude plynulý.

Toto je online transportér TS v reálnom čase s niekoľkými príkladmi, ktoré vám umožňujú porovnať kód TypeScript s jeho ekvivalentným kódom JavaScript.

Tu je rýchly tutoriál a veľmi pekný sprievodca, ale ja som skôr typ človeka s jazykovou referenciou. Ak sa vám páči video, tu je kurz od Udemy.

John Papa má krátky článok o ES5 a TypeScript.

Existuje zaujímavá štúdia, ktorá ukazuje všetky veci rovnocenné, systém typov redukuje chyby o 15%.

Ach, a ak máte chuť na vedľajšiu misiu, prečítajte si, prečo je programovanie najlepšou prácou vôbec.