Въпреки че Essential TypeScript 5 вече е на път, 4 седи на бюрото ми от дълго време. В крайна сметка ще получа 5th Essential TypeScript, но засега това е, което имам.

Тъй като работя в TypeScript повече от година, не следвах проекта в книгата. Това, което се надявах да спечеля от тази книга, беше усещане за яснота. Исках по-задълбочено разбиране на TypeScript и в крайна сметка да науча това, което знаех, че не знаех. Оставам твърде впечатлен от магьосниците на TypeScript, с които работя, и искам да бъда един от тях.

Една от причините да преминем към TypeScript в моята компания беше, че драстично подобрява продуктивността на разработчиците. Много по-лесно е да се включите в кодова база, когато можете да видите типовете и това, до което можем да имаме достъп в даден обект. Щракването върху функции също е ценно за подпомагане при четене и отстраняване на грешки в кода. Освен това вече не е нужно да се притеснявате за принудително въвеждане на тип в JS, което може да доведе до някои неочаквани грешки и поведение.

Тази статия е обобщение на важни точки, които според мен са полезни от Глава 1.

Глава 1

Тази глава описва как да започнете с TypeScript. Доста основни неща включват инсталиране на TypeScript и създаване на проекта.

Ето някои основни положения, които ще искате да знаете, ако още не сте:

Конфигурация на компилатора:

// tsconfig.json file example
{
  "compilerOptions": {
    "module": "commonjs", // this is the standard
    "target": "es2021", // the default is ES3. Modern browsers support ES6 but older browsers do not.
    "moduleResolution": "node", // tell us what modules to use, in this case node
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
}

Когато искате да стартирате компилатора, ще използвате командата tsc във вашия терминал. Това, което е важно да имате предвид тук е, че TypeScript е език за хора, а не за браузъри. Ето защо имаме target независимо дали използваме es6 по подразбиране или умишлено го променяме, защото браузърите не четат TypeScript. Можете да намерите повече информация за целите тук: https://www.typescriptlang.org/tsconfig#target

Компилаторът ще компилира вашия TypeScript код в JavaScript, който браузърите могат да разберат. Това ми отне известно време, за да разбера, когато за първи път започнах да работя с TypeScript (много преди да прочета тази книга). Осъзнаването, че TypeScript е надмножество на JavaScript, което ни принуждава да мислим по-критично за стойностите и типовете, които използваме, наистина ми помогна да разбера как и защо бихме искали да го използваме над ванилия JS.

Никога не трябва да правите промени в файловете, които са компилирани. Правете промени само във вашите .ts файлове. Не забравяйте, че в среда за разработка файловете с разширение .ts се компилират в JavaScript.

Типове:

TypeScript е надмножество на JavaScript. Това означава, че ни позволява да дефинираме стриктно типове за променливи. Това може да подобри внедряването на разработката и скоростта, с която правим промени в кода.

В класовете можем да дефинираме типове директно, което улеснява четенето и разбирането какво представляват нашите променливи:

class UserAccount {
id: number;
name: string;
enrolled: boolean = true;
items: string[];

  constructor(id: number, name: string, enrolled: boolean = true, items: string[]){
    this.id = id;
    this.name = name;
    this.enrolled = enrolled;
    this.items = items;
  };
};

В класа, деклариран по-горе, ние знаем точно какви ще бъдат типовете. Компилаторът знае това и като разработчици ще видим грешки, ако се опитаме да използваме низ за полето id например. Това ни помага да избегнем неочаквано поведение и грешки.

Когато приключите с писането на код или правите промени във файлове, можете да използвате tsc (при голям проект в установена кодова база това може да е различно). Тази команда ще компилира кода и ще провери за типови грешки. Това е особено полезно при конвертиране на старо репо в TypeScript, където вашият код може да прилича на пъзел.

Общи типове:

Те са полезни, когато имате двойки ключ/стойност, които могат да съхраняват комбинация от типове данни.

let itemsMap = new Map<number, AccountItems>();

Обектни литерали

Срещам ги често в ежедневието си, докато конвертираме повече файлове в TypeScript или създаваме нови. Можете да използвате обектния литерал, за да определите типовете. Имайте предвид, че това не е същото като интерфейс, въпреки че изглежда подобно.

type AccountItems = { //note the capitalization here
  giftCardsTotal: number,
  purchases: number,
};

След това можете да използвате този тип навсякъде, където бихте имали както giftCardsTotal, така и purchases, например, ако трябва да дефинирате какво ще върне дадена функция:

getAccountItems: (id: number) => AccountItems

Импортиране на пакети

Това е същото, което бихте направили в JavaScript. За тези, които не помнят, ето едно бързо опресняване:

import * as inquirer from 'inquirer';

Това ще се промени в зависимост от правилата за lint във вашето репо и това, което импортирате. Той не навлиза в това специално в тази глава и сега няма да ви обърквам с подробностите.

Типове декларации за JS пакети или съществуващ JS код

TypeScript няма да ви попречи да използвате JavaScript код, като в същото време няма да добави защита на типа. Ще срещнете това в кодови бази, които са в процес на преход и може да имат смесица от .js и .ts файлове. Също така ще трябва да се справите с това, ако използвате библиотека, която е написана на JS, но няма типове. Разумно е да добавите декларации за типове.

Можете да направите това, като създадете файл с декларации за глобални декларации или общи типове, които ще се използват в много файлове или модули.

Най-доброто място да го поставите би било в папка на високо ниво:

/project/example/
|__ app/
|__ tsconfig.json/
|__ types/
   |__ myDeclarations.d.ts

Логично е да имате отделна папка за типове, защото може да откриете, че трябва да имате много файлове с декларации. В едно репо, в което работя, имаме над 20 файла с декларации. Повече информация за декларационните файлове тук: https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

Преди няколко години работех върху проект, който имаше всичките си файлове в JS. Ние всъщност изготвихме речник на типове и приемливи низове, които разработчиците могат да използват, когато извикват конкретни функции. Направихме това тогава, защото не искахме да имаме куп подобни имена на типове низове. Искахме да принудим хората да използват повторно съществуващи имена, ако това е приложимо (напр. startButton срещу menuStartButton… правят ли едно и също нещо? и двата ли живеят в меню?) Typescript щеше да реши лесно този проблем за нас.

Някои ключови изводи от тази глава и моите собствени преживявания:

  1. Не използвайте Number, String, Boolean, Symbol и Object в тези файлове. Те са не-първични обекти в кутия.
  2. Не използвайте общ тип, който не използва неговия параметър тип: «https://github.com/Microsoft/TypeScript/wiki/FAQ#why-doesnt-type-inference-work-on-this-interface-interface -крак--"
  3. Не използвайте any, освен ако не мигрирате файл от JS.
  4. Не използвайте any като тип връщане на обратно извикване. Ако искате върнатата стойност да бъде игнорирана, използвайте void.
  5. Вижте повече неща, които трябва да правите и не, тук.