DEV Community

Mikhail Shokun
Mikhail Shokun

Posted on • Edited on

Типизация TS

Явное присваивание
Типы в TypeScript объявляются следующим синтаксисом:
переменная: тип = значение
Мы можем присвоить любой тип, который есть в JavaScript:

const foo: string = '12rock';
const bar: number = 123;
const fee: boolean = true;
Enter fullscreen mode Exit fullscreen mode

Неявное присваивание
Однако, TypeScript сам умеет определять типы. Если мы объявим переменную и сразу присвоим ей значение, то TypeScript все поймет и запись с двоеточием можно будет опустить:

const foo = '12rock'; //TS сам поймет что здесь храняться только строки
const bar = 123; // TS поймет что числа
const fee = true; // TS поймет что булевы значения
Enter fullscreen mode Exit fullscreen mode

Объединение
Типы можно объединять, сам процесс так и называется объединение. Записывается он так:
переменная: тип1 | тип2 = значение;
На данный код внизу компилятор не выдаст ошибку:

let foo: number | string = 123;
foo = '123';
Enter fullscreen mode Exit fullscreen mode

Встроенные типы и неявная типизация
Вопрос: Но как типизировать переменную, которая например содержит дату? Что нам с ней делать?!

Ответ: Для таких случаев в TypeScript уже существуют встроенные типы из JavaScript.

Мы можем объявить дату вот так:
const date: Date = new Date;
Встроенных типов очень много, поэтому TypeScript может определять тип без явного указания.
Как это работает? Просто инициализируйте переменную, при инициализации TypeScript сам подберет нужный тип.
const date = new Date;
Типизация функций
Нам нужно типизировать входные и данные и данные которые нам функция отдает (выходные):
function имя(параметр: тип, параметр: тип, ...): тип выходного значения {}
Рассмотрим пример, где функция принимает два аргумента и отдает нам их сумму:

function getSum(a: number, b: number): number {
return a + b;
}
Enter fullscreen mode Exit fullscreen mode

Дженерики
Дженерик - Array - указываем Array и в треугольных скобках то, из чего может состоять данный класс или объект.

Массив из разных типов
Тип данных Tuple, где мы можем указать из какого множества типов он состоит, например: const contact: [string, number] = ['Michael', 46570294]

*Тип never *
Используется в тех случаях когда функция может никогда не закончится (странный тип, пригодиться наверное не часто, но нужно про него знать)

Type
Также можно создавать свои типы через ключевое слово type, пример:


type Login = string;
const login: Login = 'qwerty'

также можно указывать через бинарный оператор "|" ИЛИ какими типами может быть переменная:


type Login = number | string;

Типы null и undefined
Обычно записывается в проектах так:
type Name = string | null | undefined

Interfaces
Поля в интерфейсах могут быть только читаемые (readonly id: number), неизменяемые. Также свойства могут быть необязательными (color?: string). Пример:

interface Rect {
 readonly id: string
 color?: string
 size: {
   width: number
   height: number
 }
}
Enter fullscreen mode Exit fullscreen mode

применение типа:

const rect1: Rect = {
 id: '1234',
 size: {
  width: 30,
  height: 20
 },
color: '#fff'
}

Enter fullscreen mode Exit fullscreen mode

Интерфейсы часто называют с первой большой буквой "I", чтобы было понятно что это интерфейс. Интерфейсы могут наследоваться:

interface RectWithArea extends Rect {
  getArea: () => number
}

const rect5: RectWithArea = {
  id: '123',
  size: {
    width: 20,
    height: 20
  },
  getArea(): number {
    return this.size.width * this.size.height
  }
}
Enter fullscreen mode Exit fullscreen mode

большая часть информации взятая отсюда
автор: Даниил Шило

Top comments (0)