TypeScript
То же самое, что и JS только с типами. Что дают типы? Контроль. Контроль над стабильностью приложения и спасение от преждевременных ошибок. Пока ты пишешь код, опираясь на типы, при ошибках в редакторе тут же будет указано, что используешь неправильно. Полезно, когда кодовая база проекта больше 10к строк кода. И когда пишешь код не в соло.
Где-то даже слышал про такую практику, как прототипирование на типах. То есть ты просто описываешь будущую модель приложения, используя типы как сущности и их возможные взаимодействия друг с другом. Вполне может помочь сэкономить много времени. А потом быстро написать логику поверх моделей.
Нет смысла самому себе показывать синтаксическое отличие TS от JS — я же уже знаю.
Типы
JS-типы: string, number, boolean, bigint, symbol, undefined, null, object, function
TS-типы: any, unknown, void, never
и пару дополнительных конструкций использования типов в виде Array, Tuple, Enum.
any
- заменяет любой тип и является "богом" всех типов, проходя любые проверки типизации. Но абсолютно убивает смысл существования типов. При разработке с нуля лучше избегать ситуаций его использования, но может быть удобно при внедрении в уже существующий проект на JS для временных решений. Использоватьany
всегда равносильно тому, что не использовать TS вовсе.unknown
- почти тоже самое, что иany
. Но не позволяет использовать несуществующие свойства объекта, как any. На самом деле не понимаю, где его использовать, ни разу не видел нигде.never
- для функций, которые ничего не возвращают и при этом так же не совершают никаких действий, связанных с приложением. Обычно используются для обработчиков ошибок или функций, завершающих выполнение программы.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()) }