VS Code podporuje kontrolu typu pomocí JSDoc

Tech Twitter dnes diskutoval o novém návrhu ECMAScript. Navrhuje novou syntaxi pro vkládání informací o typu jako komentáře do JavaScriptu.

Následující kód by byl platný JavaScript. 😲

function add(a: number, b: number) {
    return a + b;
}

Prohlížeče by s poznámkami typu zacházely jako s vloženými komentáři a nevyvolávaly by běhové chyby, pokud porušíte poskytnuté typy.

Ale proč se obtěžovat, když jsou věci stejně ignorovány?

Kontrola typu bez kroku kompilace

Pojďme si to promyslet. Předpokládejme, že vložené anotace typu by byly platným JavaScriptem (i když je prohlížeče neanalyzují ani nespouštějí). V takovém případě by je váš editor mohl použít k poskytnutí lepšího prostředí pro vývojáře a vy byste mohli uložit krok kompilace kódu.

TypeScript není platný JavaScript. Prohlížeče jej nemohou spustit a vždy jej musíte transformovat a zkompilovat.

Ve vývoji sledující soubory kompilují TypeScript do JavaScriptu při každém uložení souboru. A aby bylo možné odeslat do výroby, musí být také zkompilovány a transformovány celé kódové báze. Kód, který napíšete, není kód, který spustíte.

Předpokládejme však, že anotace typu by byly platné v JavaScriptu. Vývojářské nástroje, jako je váš editor, pak mohou využít všechny šťavnaté informace o typu k poskytnutí skvělého vývojářského zážitku a zároveň poskytovat stejný kód prohlížeči. Kód, který napíšete, se stane kódem, který spustíte.

Při odesílání do produkce byste pak mohli odstranit všechny komentáře a poznámky typu – místo kompilace je minifikujte!

Při čtení příspěvku o návrhu ECMAScript jsem zjistil, že VS Code již podporuje kontrolu typu na základě komentářů. 😲

VS Code používá informace o typu JSDoc pro kontrolu typu JavaScript

Bloky JSDoc existují již léta. Nemohli by je redaktoři použít jen pro kontrolu typu? Ukázalo se, že by mohli a VS Code může! (Nekontroloval jsem ostatní redaktory 🤷‍♂️)

Existuje několik způsobů, jak využít informace o typu JSDoc pro kontrolu typu v kódu VS. Pojďme se podívat, jak to funguje!

Povolit kontrolu sémantického typu souboru pomocí // @ts-check komentář

Přidejte // @ts-check okomentujte své soubory JavaScript a podívejte se, jak VS Code analyzuje vaše definice typů JSDoc a zobrazuje varování, pokud špatně použijete metody.

To je docela pěkné, ale přidání // @ts-check blokovat stovky souborů je hodně zaneprázdněné. Musí existovat lepší způsob, jak zvládnout projekty...

Povolit kontrolu typu JavaScriptu projektu pomocí konfiguračního souboru

Chcete-li povolit kontrolu typu JavaScriptu pro celé projekty, můžete také přidat jsconfig.json (Konfigurace projektu JavaScript) nebo tsconfig.json (konfigurace projektu TypeScript) do kořenového adresáře vaší kódové základny.

A jsconfig.json funguje téměř stejně jako tsconfig.json ale má ve výchozím nastavení povolené některé příznaky kompilátoru související s JavaScriptem a funkce jazykové služby JavaScript VS Code.

checkJs možnost kompilátoru je @ts-check ekvivalentní v jsconfig.json .

{
  "compilerOptions": {
    "checkJs": false
  }
}

Povolit allowJs pokud je váš projekt založen na TypeScript a obsahuje tsconfig.json .

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

Obě konfigurace instruují kód VS, aby analyzoval informace JSDoc ve vašich souborech JavaScript. Uvidíte stejné chyby typu, jaké obsahuje // @ts-check umožňuje.

Zapnout check JS v nastavení vašeho místního kódu VS

A nakonec můžete také přejít do nastavení kódu VS a zapnout check JS ve vašem editoru.

Nebo jej přidejte do settings.json .

{
  "js/ts.implicitProjectConfig.checkJs": true
}

Nevýhody kontroly typu JavaScript

Před zapnutím všech těchto kontrol typu JavaScript si uvědomte nevýhody.

Udělejme krok zpět a předpokládejme, že byste se spoléhali na TypeScript. Kompilátor TS informuje každého o nesprávném použití typu. Chyby typu mohou zabránit úspěšné kompilaci TypeScript na JavaScript a dokonce blokovat vaše nasazení.

Na druhé straně check JS Workflow VS Code to nedělá. Pokud vaši spolupracovníci používají jiný editor nebo jednoduše ignorují chyby typu JS, nic nebrání chybám typu, aby se dostaly do produkce . To není ideální.

Pokud na projektu pracujete pouze vy, je pravděpodobně v pořádku spolehnout se na funkci editoru. Ale pokud spolupracujete s ostatními, měli byste zvážit další bezpečnost a krok pro odstraňování vláken.

Sindre poukázal na to, že TypeScript může rychle zkontrolovat vaši anotaci JSDoc pomocí tsc --noEmit --allowJs . To je pěkné!

Závěr

Zřídka používám TypeScript, protože mi to u mých malých projektů připadá "přehnané". Ale uznávám, že kontrola typu JavaScriptu bez kompilace je skvělá. A také souhlasím s novým návrhem ECMAScript.

Zatím hodím nějaký @ts-check komentáře a jsconfg.json soubory do mých kódových bází a uvidíme, jestli to zůstane. 🤞