March 11, 2021

TypeScript

То же самое, что и JS только с типами. Что дают типы? Контроль. Контроль над стабильностью приложения и спасение от преждевременных ошибок. Пока ты пишешь код, опираясь на типы, при ошибках в редакторе тут же будет указано, что используешь неправильно. Полезно, когда кодовая база проекта больше 10к строк кода. И когда пишешь код не в соло.

Где-то даже слышал про такую практику, как прототипирование на типах. То есть ты просто описываешь будущую модель приложения, используя типы как сущности и их возможные взаимодействия друг с другом. Вполне может помочь сэкономить много времени. А потом быстро написать логику поверх моделей.

Нет смысла самому себе показывать синтаксическое отличие TS от JS — я же уже знаю.

Типы

JS-типы: string, number, boolean, bigint, symbol, undefined, null, object, function

TS-типы: any, unknown, void, never и пару дополнительных конструкций использования типов в виде Array, Tuple, Enum.

  1. any - заменяет любой тип и является "богом" всех типов, проходя любые проверки типизации. Но абсолютно убивает смысл существования типов. При разработке с нуля лучше избегать ситуаций его использования, но может быть удобно при внедрении в уже существующий проект на JS для временных решений. Использовать any всегда равносильно тому, что не использовать TS вовсе.
  2. unknown - почти тоже самое, что и any. Но не позволяет использовать несуществующие свойства объекта, как any. На самом деле не понимаю, где его использовать, ни разу не видел нигде.
  3. never - для функций, которые ничего не возвращают и при этом так же не совершают никаких действий, связанных с приложением. Обычно используются для обработчиков ошибок или функций, завершающих выполнение программы.
  4. void - для функций, которые просто ничего не возвращают.

Пример использования типов:

Как типы можно применять

В целом все взаимодействия и условия с типами можно понять, достаточно один раз посмотреть какие они бывают.

type id = string | number — id может быть или строкой, или числом.

type Object = {
  first: string
  second?: string
}

second - опциональный и в объекте может быть не указан.

Как в примере выше типы можно вкладывать в типы и указывать типы для типов (дженерики).

Так же, как и там естьreadonly параметр, который указывает, что данное поле невозможно изменить в будущем, что полезно при создании внешних библиотек или оберток.

Или можно использовать Type Assertion, чтобы явно указать с каким типом используется та или иная переменная. Например:

const canvas = document.getElementById('main-canvas') as HTMLCanvasElement

или:

const canvas = <HTMLCanvasElement>document.getElementById('main-canvas')

На данном этапе без as тайпскрипт будет знать только типHTMLElement на основе методаgetElementById() .

А с помощью! в конце переменной можно "крикнуть", что эта переменная не может бытьundefined илиnull :

function f(x?: number | undefined): void {
  console.log(x!.toFixed())
}

Narrowing, overloads (work with functions)

Что с типами можно делать (generics, keyof, typeof, cond types, mapped types...)

чето про классы

чето про модули