Být vývojářem JavaScriptu je závazek být vždy ve střehu.
Křivka učení se nikdy nezastaví v přesném okamžiku. Takže v hlavě neustále žonglujete s mnoha otázkami.
"Mám se naučit Vue.js, React... obojí?"
„A co funkcionální programování? Vypadá to zajímavě!“
„Je JavaScript na straně serveru dobrý?“
„Mám se naučit TypeScript?“
Dnes mám chuť se zabývat touto poslední otázkou.
Nedávno jsme si na Snipcartu hráli s TypeScriptem:používáme ho k přepsání další verze našeho košíku. Takže ideální čas ponořit se do TS na blogu!
Tento příspěvek se bude týkat:
-
Co je TypeScript?
-
Proč byste se to měli učit?
-
Kdy byste jej měli použít?
-
Jak se můžete začít učit TypeScript?
Připravil jsem také příklady kódu, které demonstrují rozdíly mezi TypeScript a JavaScript.
Začněme!
Co je TypeScript?
TypeScript je staticky typovaná nadmnožina JavaScriptu, která se zkompiluje do prostého JavaScriptu.
Jinými slovy, je to JavaScript, který se mění .
Abychom však skutečně pochopili, co to znamená, musíme nejprve nahlédnout do vývoje JavaScriptu. Ve skutečnosti si musíme pamatovat, k čemu byl JS určen.
JS začal jako jazyk prohlížečů v době, kdy nebyly tak silné. Jelikož jde o dynamický jazyk – bez „typového“ systému – jeho cílem nebylo vytvářet rozsáhlé aplikace.
V posledních pěti až šesti letech však JavaScript explodoval. Používá se všude:od 100-1000000 programů s kódovými řádky. Problém je v tom, že nemá schopnosti škálování vyspělejších jazyků, jako je C# nebo Java.
Někteří se nakonec zeptali:Co můžeme udělat, aby se JavaScript škáloval lepší?
TypeScript byl odpovědí Anderse Hejlsberga a Microsoftu.
Byl vytvořen v roce 2012 a uspěl ve dvou klíčových věcech:
1. Přidejte věci, které chybí pro vývoj aplikací ve velkém měřítku.
Funkce, které tvoří bezpečnostní síť pro vývojáře – navigace v kódu, dokončování příkazů, bezpečné refaktorování a kontrola chyb před spuštěním atd. Systém statického typu umožňuje IDE uvažovat o kódu, který píšete.
2. Zůstaňte v ekosystému JavaScriptu.
TypeScript funguje nahoře z JS. Nakonec váš kód zůstává JavaScriptem a běží všude, kde běží. Počínaje stejnou syntaxí, kterou vývojáři JS znají a milují, TypeScript se zkompiluje do čistého a jednoduchého JavaScriptu.
Obojí se mu povedlo dostatečně dobře na to, aby dosáhlo svého počátečního průlomu jako základního jazyka v Angular 2. Od té doby neustále rostlo v rámci jiných rámců JS, jako jsou React a Vue.
Proč byste se měli naučit TypeScript?
Dobře, jeho historie nemusí stačit k tomu, aby vás přesvědčila, že TypeScript stojí za to se naučit.
Ale měli byste, věřte mi.
Znalost TypeScriptu přinese mnoho filozofických a technických výhod.
Za prvé, ekosystém JavaScriptu se vyvíjí s TypeScript. Všechny velké frontendové rámce naskakují na vlak TS a celá komunita je následuje.
Nesnažím se vás strašit, abyste se to naučili tady. Pouze odhaluji fakta. Čím dříve si ji osvojíte, tím lépe budete připraveni zvládnout nástroje, které jsou na ní postaveny.
TypeScript také přichází jako odpověď JavaScriptu na jazyky se silným typem, jako je C# a Java. Vývojáři pracující s těmito technologiemi, které by nikdy nenapadlo přejít na JavaScript, se na to začínají zvědavě dívat.
(Zábavný fakt:Tvůrce TypeScriptu byl sám hlavním přispěvatelem do C#).
Neznamená to však, že byste se měli seznámit s TypeScriptem, než se naučíte JavaScript. Chci začít od základů.
Z techničtějších důvodů může TypeScript přidat k vašim zkušenostem s programováním:
→ Předvídatelnější kód, který se snadněji ladí . JavaScript je často skvělý pro flexibilitu, kterou poskytuje uživatelům, až do kritického bodu, kdy se stane nespolehlivým, chaotickým a chybným. TypeScript poskytuje nezbytnou bezpečnost pro uspořádání vašeho kódu a zachycení chyb všeho druhu před spuštěním.
→ Skvělé nástroje aktivované statickými typy . Nástroje pro:upgrade vašich zkušeností s vývojem přidáním jednotnosti a kvality kódu a úsporu času při vývoji. Nástroje jako:TSLint, tsserver – integrované do většiny editorů s podporou TS, úžasné načítání skriptů.
→ Možnost používat funkce z budoucnosti již dnes . TypeScript dokáže automaticky uzavřít mezeru mezi funkcemi mezi verzemi JavaScriptu (pomocí transpilace). To znamená, že se můžete soustředit na práci s nejnovějšími a nejmodernějšími funkcemi bez obav, zda váš kód bude fungovat ve starých prohlížečích a zařízeních.
→ Harmonická týmová spolupráce na rostoucí kódové základně . Sjednocuje kód a vnucuje strukturu prostřednictvím dobře definovaných rozhraní.
Vývojáři používající TypeScript milují to.
Ale neberte mě za slovo:
Kdy byste to měli rozhodně vyzkoušet?
Existují specifické typy projektů, kde vás budu muset zastavit a zeptat se:
"Proč už nepoužíváte TypeScript?!"
Snipcart byl dobrým příkladem takového projektu. Možná se poznáte z naší vlastní zkušenosti.
Když jsme začali přepisovat náš nákupní košík založený na JavaScriptu, nikdy jsme nepochybovali o tom, že TypeScript bude jeho součástí. Naše kódová základna si potřebovala udržet stejnou úroveň udržovatelnosti v průběhu času, což až dosud nebylo vždy zvykem.
S obyčejným JavaScriptem mohou nevyhnutelné problémy s údržbou vést k chátrajícímu softwaru a pekelnému vývoji, který jsme někdy zažili u našeho starého vozíku. Testy jsme samozřejmě prováděli, ale nakonec jsou časově náročné, když chcete pokrýt všechno.
Zní toto svědectví? Možná je TypeScript řešením i pro vás. Stejně tak pro následující situace:
-
S velkými kódovými základnami — Vše se opět vrací ke škálování aplikací. TypeScript náhle neodstraní potřebu ladění, ale určitě pomůže vyhnout se běžným chybám.
-
S týmy zvyklými na staticky psané jazyky — V našem případě je backend Snipcartu napsán v C#, takže migrace na TypeScript na frontendu působí přirozeně.
-
Jako náhrada za Babel
-
Pokud pracujete s Angular 2 — TypeScript je jádrem rámce, proto se důrazně doporučuje naučit se jej před použitím Angular 2.
Myslím, že jsem udělal vše, co jsem mohl, abych vám pomohl rozhodnout se, zda se vám vyplatí učit se TypeScript nebo ne.
To nevyhnutelně přichází s křivkou učení. Vývojáři zvyklí na jiné jazyky rychle najdou nějaké zvláštnosti, protože je založen na JS. Ale ani ostřílení vývojáři JS nemohou uniknout křivce učení.
Nemějte však obavy, mám zdroje, které vám s tímto procesem pomohou!
Jak začít s TypeScript
Spustím svůj editor kódu, abych nabídl lepší vizuální ukázku. Tyto příklady ukazují funkce, které TypeScript přidává do vašeho vývoje JS.
Konfigurace TypeScript
Chcete-li začít pracovat s TypeScriptem, budete potřebovat tsconfig.json v kořenovém adresáři vašich zdrojových souborů. Dobrým výchozím bodem by mohl být tento:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"strictNullChecks": true
}
}
target vlastnost určuje sadu dostupných rozhraní API JavaScriptu. Specifické funkce lze aktivovat pomocí lib vlastnost se seznamem souborů lib, na které se má odkazovat. Další možnosti kompilátoru lze zadat ve vašem konfiguračním souboru, abyste přizpůsobili, jak bude TypeScript kompilovat váš .ts soubory.
Chcete-li si rychle pohrát s TypeScriptem, můžete jej nainstalovat globálně pomocí npm install typescript -g a zkompilujte svůj .ts soubory pomocí tsc příkaz:tsc my-code-file.ts
Když jste připraveni integrovat TypeScript do plnohodnotného projektu, je k dispozici několik nakladačů webových balíčků (ts-loader, awesome-typescript-loader, fork-ts-checker-webpack-plugin). Můžete také přidat TSLint do mixu s předem připravenou konfigurací, jako je tslint-config-airbnb, kterou používáme.
TS Příklad 1:Jednoduchá syntaxe třídy a psaní
TypeScript usnadňuje přijetí OOP přístupu s třídami a plně napsanými členy:
class Widget {
elem: HTMLElement;
constructor(elem: HTMLElement) {
this.elem = elem;
}
show() {
this.elem.style.display = 'block';
}
hide() {
this.elem.style.display = 'none';
}
}Uvnitř našeho IDE nám toto psaní umožňuje automatické doplňování.
Příklad TS 2:Async / Čeká
Kód využívající klíčová slova async / wait se stal novým standardem asynchronních operací. Pomocí strojopisu můžete tyto předem připravené použít bez ohledu na verzi Javascriptu, na kterou cílíte:
class Post {/* … */}
async function getPosts(): Promise<Post[]> {
let page = 1;
const posts: Post[] = [];
let data: {posts: Post[], hasMore: boolean};
do {
const result = await fetch('/api/posts?page=' + page);
data = await result.json<{posts: Post[], hasMore: boolean}>();
data.posts.forEach(post => posts.push(post));
page += 1;
} while (data.hasMore);
return posts;
}Příklad TS 3:Implicitní rozhraní
Poněkud podobné rozhraním Golang, můžete předat libovolné typy jako rozhraní, pokud poskytují stejné členy:
interface EventSource {
addEventListener(ev: string, cb: Function);
removeEventListener(ev: string, cb: Function);
}
function convert(em: Emitter): EventSource {
return {
addEventListener: (ev: string, cb: Function) => em.on(ev, cb),
removeEventListener: (ev: string, cb: Function) => em.off(ev, cb),
};
}Kde a jak se můžete naučit TypeScript?
Nyní, když jste nadšeni z toho, jak to rozhýbete s TypeScriptem, nenechám vás viset bez zabijáckých prostředků, abyste si prohloubili své znalosti.
Ve stejném duchu jako to, co jsme dělali dříve s Vanilla JS, jsem dal dohromady tento seznam zdrojů TypeScript, abych nastartoval vaše učení:
Naučte se TypeScript – otevřený zdrojový seznam zdrojů na GitHubu
Seznam obsahuje bezplatný nebo placený obsah související s Typescriptem, včetně knih, kurzů, stálezelených zdrojů, pozoruhodných článků, komunit a zpravodajů.
🔔 Chceme, aby to bylo co nejvíce otevřené a spolupracující. Tak neváhejte a přidejte hodnotné věci vidličkou + PR! 🔔
Doufám, že tam najdete hodnotu!
Úvahy na závěr
Takže, co jsme se tady naučili?
Nejprve se chci ujistit, že mám jasno v jednom bodě:
Pokud s JavaScriptem teprve začínáte, neobtěžujte se skočit do TypeScriptu – prozatím.
Měli byste si udělat čas na zvládnutí syntaxe JS a nejprve se s jazykem cítit dobře. Na druhou stranu projekty, na kterých budete v tu chvíli pracovat, pravděpodobně nebudou vyžadovat funkce, které TypeScript přináší.
Ale jakmile se dostanete na tuto úroveň, měli byste pokračovat a experimentovat s ní. Rychle na vás zapůsobí kvalita kódu, který produkuje, a celková udržitelnost, kterou vaše projekty získají. Navíc, když se budete chtít vyřádit v JS frameworkech a dalších nástrojích vytvořených komunitou, je pravděpodobné, že na své cestě najdete TS. Buďte raději připraveni!
Opět neváhejte a přidejte zdroje do našeho seznamu GitHub.
Uniklo mi něco o TypeScriptu? Možná nesouhlasíte s ničím, co jsem právě řekl, a absolutně to nenávidíte? Tak či onak, napište komentář do sekce níže a pojďme si o tom promluvit!
Pokud se vám tento příspěvek líbil, věnujte prosím chvíli jeho sdílení na Twitteru. Máte připomínky, dotazy?