Машинопись для спасения

Как следует из названия, его определение «типа» для вашего «сценария» — Typescript.

Он добавляет дополнительный синтаксис к вашим типам javascript. Основная цель использования машинописного текста — предотвратить ошибки, связанные с неправильными типами, и улучшить рабочий процесс разработки. Думайте о типах как о переменных.

Забавный факт: весь синтаксис Javascript является допустимым синтаксисом машинописного текста. Typescript добавляет дополнительный синтаксис поверх javascript. Этот дополнительный синтаксис используется для объявления определений типов.

sample.ts 
let myVariable = 123; 
//variable declaration internally typescript has set 'myVariable' variable as a number type as we have not manually set the type of a variable. this is called types by Inference
myVariable = '456'; //same variable reassigned as a string
//This line will give compilation error as we are trying to assign a 'string' value to 'number' variable.
console.log(myVariable);

Допустим, мы вручную определяем тип для myVariable, но при компиляции мы все равно получим ту же ошибку.

sample.ts
let myVariable: number = 123;

Мы можем решить эту ошибку, объявив тип объединения для myVariable

type NumString = number | string;
let myVariable: NumString = 123;

Система структурных типов

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

Машинопись и функция

Определение типа в функции в приведенном ниже примере гарантирует, что функция передала числовое значение в качестве аргумента и в результате вернет значение числового типа.

function add(x: number, y:number): number {
  return x + y;
}

Машинопись и объект

student1 и student2 относятся к одному типу, как мы можем гарантировать, что они останутся прежними.

const student1: StudentProps = {
 name: 'Harry',
 lastname: 'Potter',
 patronus: 'stag'
}
const student2: StudentProps = {
 name: 'Hermione',
 lastname: 'Granger',
 patronus: 'Otter'
}

Определение interface для const выше гарантирует, что обе переменные останутся одного типа.

interface StudentProps{
 name: string;
 lastname: string;
 patronus: string;
}

Теперь, если вы попытаетесь добавить любое дополнительное свойство к student1 или student2 машинописи, вы получите ошибку

const student1: StudentProps = {
 name: 'Harry',
 lastname: 'Potter',
 patronus: 'stag',
 age: 14
}

Object literal may only specify known properties, and 'age' does not exist in type 'StudentProps'.

Допустим, мы хотим добавить новое свойство, но при желании мы можем обновить определение интерфейса, чтобы включить age при необходимости с ?

interface StudentProps{
 name: string;
 lastname: string;
 patronus: string;
 age?: number;
}

Забавный факт: браузеры понимают только стандартный javascript, то есть машинописный текст компилируется обратно в javascript.

Тип против интерфейса

Интерфейсы могут описывать только формы объектов. Интерфейсы можно расширить, объявив его несколько раз. В критических по производительности проверках сравнения интерфейсов типов может быть быстрее.

Образец литерального синтаксиса объекта

type ResponseProps{
  id: number;                               // primitive type
  name: string;                            // primitive type
  status: Status;                         // Tuple type
  age?: number;                          // Optional property
  onClickMethod: (id: number) => void;  // Arrow function field
  onClickMethod(id: number): void;     // Function
  (): ResponseProps                   // Type is callable
  readonly body: string;             // Readonly property
}
// Union type
// Describes a type which is one of many options listed
type Status = "on" | "off"