Все больше и больше компаний-разработчиков программного обеспечения и агентств с большими кодовыми базами используют 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

Дополнительные ресурсы

Документация по TypeScript

Статья Трея Хаффина Полное руководство по React Hooks и TypeScript

TypeScript: Полное руководство разработчика Курс Udemy Стивена Грайдера