Typescript přináší možnost použití OOP, lepší čitelnost kódu a možnost odhalit chyby už během vývoje (Javascript chyby neodhalí, např. TypeError – pokud se dostane nějaký typ dat do metody, která očekává jako parametr jiný typ, tak se to projeví až při běhu a to je pozdě, těžko se to navíc odhaluje a taková aplikace je pak celkem nepoužitelná a programátor je za blbce).
Typescript lze přidat do stávajícího projektu přes vue ui nebo příkazem „vue add typescript“. Pokud mám již vue-cli nainstalován.
Před přidáním je potřeba komitnout všechny změny.
Po spuštění se nástroj bude ptát na pár věcí a měl by nainstalovat @vue/cli-plugin-typescript a další nezbytné závislosti + vytvoří soubor tsconfig.json.
- Use class-style component syntax? (Y/n) Dávám Yes, o použití píšu v článku JAK JSEM SI ZAMILOVAL VUE CLASS COMPONENT.
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) tohle je také potřeba stále ještě používat, dokud budou prohlížeče, co neumí moderní Javascript.
- Convert all .js files to .ts? (Y/n) tohle je nebezpečné, pokud mám hodně js souborů a nechci je hned všechny refaktorovat po přeměně z js na ts. Dávám No.
- Allow .js files to be compiled? (y/N) Musím vybrat Yes, (zapíše do tsconfig.json „allowJs“ hodnotu true), jinak se to bude pokoušet transpilovat js soubory do typescript a objeví se mraky chyb.
- Skip type checking of all declaration files (recommended for apps)? (Y/n) Nevím, nechávám Yes.
Mělo by to skončit hláškou „Successfully invoked generator for plugin: @vue/cli-plugin-typescript“.
Udělá to trochu bordel a je třeba ručně uklidit. Přejmenování main.js na main.ts je OK. Ale další úpravy jsou k ničemu.
- smazat HelloWorld.vue
- vrátit do původního stavu komponenty v souboru App.vue (+ upravit import přidáním .vue) a odstranit HelloWorld
Soubory shims-vue.d.ts a shims-tsx.d.ts nechávám, jsou v tom definice Vue pro Typescript.