Все больше и больше компаний-разработчиков программного обеспечения и агентств с большими кодовыми базами используют TypeScript в своих интерфейсах, потому что, хотя он требует кривой обучения для разработчиков и некоторого дополнительного кода, он значительно снижает количество ошибок и значительно повышает удобство сопровождения. Я начал использовать TypeScript в этом году и решил поделиться своими знаниями о том, чем TypeScript отличается от JavaScript, а также об основных функциях, которые я регулярно использую в кодовой базе внешнего интерфейса TouchBistro.
TypeScript используется для статической проверки типов в JavaScript. Это расширенный набор JavaScript, то есть он построен на JavaScript, но включает в себя дополнительные методы и функции, такие как статическая типизация. Во время компиляции TS компилируется в обычный JavaScript, поэтому любые ошибки, характерные для TS, которые вы видите при разработке, отсутствуют в рабочей среде.
Динамические и статические типы
JavaScript — это язык с динамической типизацией. В динамически типизированных языках типы переменных не объявляются. Языки с динамической типизацией быстрее пишутся и более гибки, потому что тип переменной может меняться и определяется только во время выполнения. В то же время это делает язык менее предсказуемым и трудным для обнаружения багов и ошибок, которые выглядят как «x не определено» или «x не является функцией».
Typescript — это язык со статической типизацией. В статически типизированных языках типы переменных объявляются во время компиляции, и тип не изменяется. Если после присвоения переменной типа переменной позже будет присвоено значение другого типа, компилятор выдаст ошибку. Эти ошибки приводят к сокращению времени отладки, потому что они помогают нам находить ранее существовавшие ошибки. Кроме того, он более удобен в сопровождении, потому что он вызывает меньше ошибок, таких как передача неправильного параметра в функцию.
Особенности TypeScript
.ts и .tsx
Если вы используете машинописный текст в файле .js, вы должны переименовать этот файл в .ts или .tsx, если этот файл использует JSX.
Типы
После объявления переменной или параметра поставьте двоеточие, а затем тип переменной после него. Примитивные типы, такие как boolean, string, number, undefined и null, назначать просто.
const pet: string = dog; const petGreeting = (pet: string, greeting: string) => {...}
Другие более сложные типы, которые я часто использую, включают any, object, array и void.
Объект:
Массив. Тип массива можно назначить двумя способами:
// Use a type followed by [] to denote an array of that element type Let pets: string[] = [‘dog’, ‘cat’] // Use the Array keyword followed by a type wrapped in arrows to denote an array of that element type let pets: Array<string> = [‘dog’, ‘cat’]
Void: тип void описывает отсутствие типа вообще. Используется, когда в случае, когда функция ничего не возвращает
Const logger():void => { console.log(status) }
Любой:тип Any используется, когда тип переменной неизвестен. Лучше всего избегать использования любого типа, когда это возможно.
let abstract: any = 4; // any can also be used when you know a part of the type, but not all of it. let abstractList: any[] = [‘pink’, 4, false]
| типы союзов
Тип объединения используется, когда переменная может быть разных типов или может изменить свой тип. Он может включать столько типов, сколько необходимо
let data: undefined | number | string
? необязательные свойства
? относится к необязательным свойствам. Он указывает, что значение может существовать, и если оно существует, то оно должно быть этого типа. Это часто используется для объектов или реквизита:
const pets:{ name: string, age: number, species?: string} = {name: ‘ranger’, age: 2}
интерфейс
Интерфейсы используются для присвоения значений свойств в объекте или массиве. Они всегда должны быть написаны с большой буквы.
interface PetProfile { name: string age: number species: string tricks: string[] } const Ranger = { name: 'Ranger', age: 3, species: 'border-collie/blue heeler' }
Позже, если вы назначите значение, которое имеет тип, отличный от того, который вы изначально определили, или отсутствует определенное значение, TS выдаст ошибку.
// This will error: const Hunter = { name: 'Hunter', age: 2, Dislikes: ['Cats'] }
TypeScript в Реакции
Реквизит
Интерфейсы также используются для добавления типа к реквизитам компонента.
import React, { FunctionComponent } from 'react' interface PetProfileProps { name: string age: number species: string tricks: string[] } // assign Pet Function a React internal FunctionComponent interface and pass props interface to type the props const Pet: FunctionComponent<PetProfileProps> = ({PetProfileProps}) => { Return ( <p>this is {props.name}, they are a {props.age} year-old {props.species}</p> ) }
Штат
Вы также можете использовать интерфейс для ввода состояния для эффекта useState.
interface Pet { name: string } const [pets, setPets] = useState<Pet[]>([ {name: 'Ranger'}, {name: 'Hunter'} ]) // allowed setPets[{name: 'Dharma'}] // results in errors setPets([5])
Помимо типов
TS предоставляет перечисления, которые позволяют нам создавать набор констант с ненадежностью использования строк, что приводит к меньшему количеству ошибок опечаток. Под капотом перечисления представляют собой массив, в котором ключ является именем константы, а значение — числовыми значениями.
// treat contents of enumerations as values enum Pets { DOG, CAT, HAMSTER } // pet variable is of type Pets let pet: Pets pet = Pets.DOG console.log(pet) //displays DOG if (pet === Pets.DOG) { console.log(‘bork’) } let tinyPet = Pets[2]; console.log(tinyPet) //displays HAMSTER let sneakyPet = Pets.CAT console.log(sneakyPet) //displays Cat
Дополнительные ресурсы
Статья Трея Хаффина Полное руководство по React Hooks и TypeScript
TypeScript: Полное руководство разработчика Курс Udemy Стивена Грайдера