TypeScript

TypeScript — это надмножество JavaScript, то есть, любой код на JS является правильным с точки зрения TypeScript. Однако, TypeScript обладает некоторыми дополнительными возможностями, которые не входят в JavaScript. Среди них — строгая типизация (то есть, указание типа переменной при её объявлении, что позволяет сделать поведение кода более предсказуемым и упростить отладку), механизмы объектно-ориентированного программирования и многое другое. Браузеры не поддерживают TypeScript напрямую, поэтому код на TS надо транспилировать в JavaScript.

Прежде чем пользоваться TypeScript, его надо установить:

sudo npm install -g typescript

В react есть команда для создания проекта на typescript

create-react-app my-app --template typescript

1.Типы данных в TypeScript

let a: number = 2;      //например: 1, 2, 3
let b: boolean = true;  //например: true, false
let c: string           //например: "abel agoi"
let d: any              //такая переменная может содержать значения любых других типов
let e: number[]         //числовой массив, например: [1, 3, 54]
let f: any[]            //массив значений любых типов, например: [1, "abel agoi", true]
enum Direction { 
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

Перечисления(enum) - одна из немногих возможностей TypeScript, которые не являются расширением JavaScript на уровне типов.Перечисления позволяют разработчику определять набор именованных констант. Использование перечислений может упростить документирование намерений или создать набор отдельных случаев. TypeScript предоставляет как числовые, так и строковые перечисления.

2.Функции

Для минимизации числа аннотаций TypeScript активно использует вывод типов. Эта особенность позволяет использовать автодополнение, указывать на несовместимость типов, что так не хватает при разработке сложных JavaScript приложений. Типы значений в TypeScript указываются непосредственно в коде:

function process(x: number, y: number): number {
	var v = x + y;
	return v;
}

2.1. Работа с асинхронными функциями в typescript.

async function additionAsyncResult(x: number, y: number): Promise<number> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x + y);
    }, 2000);
  });
}

async function addWithAsync(x: number, y: number): Promise<number> {
  const result1 = await this.resolveAfter2Seconds(x);
  const result2 = await this.resolveAfter2Seconds(y);
  return this.additionAsyncResult(result1, result2);
}

3. Интерфейсы

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

let myFunction = (
  a: number, 
  b: number, 
  c: string, 
  d: any, 
  e: number[], 
  f: any[]
) => {
 console.log('something);
}

Избежать таких конструкций можно, включив параметры в объект и передав функции единственный объект. Тут нам помогут интерфейсы. Этот механизм есть в TypeScript:

interface MyParameters {
  a: number,
  b: number,
  c: string,
  d: any,
  e: number[],
  f: any[]
}

let myFunction = (myParameters: MyParameters): string {
}

4.Классы

Стоит выработать у себя привычку группировать связанные переменные (свойства) и функции (методы) в единую конструкцию, которая в программировании называется классом.

class MyPoint {
   x: number;
   y: string;
   draw() {
     //обратите внимание на то, что со свойством x мы работаем через this
     console.log("X is: " + this.x);
     console.log("X is: " + this.y);
   }
   getDistanceBtw(another: AnotherPoint) {
    //посчитать и вернуть расстояние
   }
}

4.1 Доступ к свойствам и методам классов

Мы сгруппировали связанные переменные и методы в единый класс. Теперь надо разобраться с тем, как с ними работать. Для этого нужно создать экземпляр класса:

let myPoint = new MyPoint() //MyPoint - это имя класса
myPoint.x = 2;              //устанавливаем свойство x 
myPoint.y = "a";            //устанавливаем свойство y

myPoint.draw();             //вызываем метод drawКонструкторы

4.2. Конструктор

Конструктор — это метод, который вызывается автоматически при создании экземпляров класса. Конструктор позволяет задавать значения свойств. Вот пример работы с экземпляром класса, в котором возможности конструкторов не применяются:

class MyPoint {
  
   x: number;
   y: string;
   constructor (x: number, y: string) {
     this.x = x;
     this.y = y;
   }
   draw() {
     //обратите внимание на то, что со свойством x мы работаем через this
     console.log("X is: " + this.x);
     console.log("X is: " + this.y);
   }
   getDistanceBtw(another: AnotherPoint) {
    //посчитать и вернуть расстояние
   }
}

4.3 Необязательные параметры в конструкторе

Что если мы решили использовать конструктор, но хотим, чтобы явное задание параметров при создании экземпляров класса было бы необязательно? Это возможно. Для этого надо использовать знак вопроса (?) в конструкторе. Этот знак позволяет определять параметры, которые, при создании экземпляра класса, задавать необязательно:

class MyPoint {
  
   x: number;
   y: string;
   constructor (x?: number, y?: string) { //обратите внимание на "?" перед ":"
     this.x = x;
     this.y = y;
   }
   draw() {
     //обратите внимание на то, что со свойством x мы работаем через this
     console.log("X is: " + this.x);
     console.log("X is: " + this.y);
   }
   getDistanceBtw(another: AnotherPoint) {
    //посчитать и вернуть расстояние
   }
}

4.4 Вспомогательные средства конструкторов

Выше мы добавляли конструктор к нашему классу следующим образом:

private x: number;
public  y: string;
constructor (x: number, y: string) {
     this.x = x;
     this.y = y;
}

TypeScript позволяет записать то же самое в сокращённой форме:

constructor (private x: number, public y: string) {}

4.5.Модификаторы доступа

Модификатор доступа — это ключевое слово, которое используется со свойством или членом класса для управления доступом к нему извне. В TypeScript есть три модификатора доступа: public, protected и private. По умолчанию все члены класса общедоступны — это аналогично использованию с ними модификатора доступа public, то есть, читать и модифицировать их можно извне. Использование модификатора доступа private позволяет запретить внешним механизмам работу с членами класса. Например, здесь мы использовали данный модификатор со свойствами x и y

class MyPoint {
 ...
 
 private x: number;
 private y: string;
 //модификаторы доступа можно устанавливать и для методов
 public draw() {
   //нарисовать что-нибудь
 }
 ...
}

Попытка использовать конструкцию myPoint.x при работе с экземпляром класса приведёт к ошибке, так как свойство объявлено с модификатором доступа private.

7. Mодули

Модули TypeScript используют существующие подходы CommonJS, AMD для реализации модульной системы.

module Acme.Core.Utils {
	export class Tracker {
		count = 0;
		start () {
			windows.onmouse = e => {
				console.log(this.count);
			};
		}
	}
}

import ACU = Acme.Core.Utils;
var t = new ACU.Tracker();
t.start();

8. Выводы

Таким образом TypeScript — легкий синтаксический сахар для JavaScript, препроцессор, который может значительно улучшить Вашу производительность позволяя использовать богатый набор инструментов, при этом сохраняя совместимость с существующим кодом и продолжая использовать Ваши любимые библиотеки JavaScript.