Основы TypeScript

Недавно я начал работать с новым клиентом, который использует TypeScript как для клиентской, так и для серверной разработки. Я раньше работал с Coffeescript, и я определенно хотел научиться использовать TypeScript. В сообществе JavaScript было много шума о TypeScript; Angular 2 на самом деле написан на TypeScript (хотя вам не нужно использовать его для написания приложений Angular 2).

В этом посте моя цель - дать вам краткое введение в TypeScript и, надеюсь, убедить вас использовать его в своем следующем большом проекте.

Почему именно TypeScript?

TypeScript - это типизированный надмножество JavaScript, который компилируется в простой JavaScript и может быть запущен в любом веб-браузере или на сервере в приложении NodeJS. TypeScript предлагает поддержку новейших и развивающихся функций JavaScript, в том числе из ECMAScript 2015. Поскольку TypeScript является надмножеством Javascript, он очень похож, и разработчикам JavaScript очень легко научиться его использовать. Статическая типизация делает код более безопасным, поскольку помогает создавать приложения с меньшим количеством ошибок, делать код более предсказуемым и в большинстве случаев проще отлаживать. TypeScript также обеспечивает более быструю разработку, поскольку IDE и текстовые редакторы, поддерживающие Typescript, позволяют исследовать методы и свойства в пользовательских типах. Как будто всего этого было недостаточно, этап компиляции TypeScript выявляет все виды ошибок до того, как они достигнут времени выполнения и что-то сломают.

Статический ввод и функции

TypeScript позволяет определять тип переменных и функций, и компилятор будет следить за тем, чтобы они не были назначены другим типам в приложении (если вы используете IDE или текстовый редактор с поддержкой TypeScript, вы будете немедленно предупреждены, как и вы написание кода):

Пример объявления переменной:

// 'dayOfTheWeek' must be of type string
let dayOfTheWeek: string = 'Monday';

// Warning: Assigned expression type number is not
// assignable to type string
dayOfTheWeek = 1;

Пример объявления функции:

// 'sumAllNumbers' takes an array of numbers
// and must return a number
function sumAllNumbers(numbers: number[]): number {
  return numbers.reduce((prev: number, curr: number) => prev + curr);
}
// 'numbers' is an array of numbers
const numbers: number[] = [1, 2, 3];
const totalSum: number = sumAllNumbers(numbers);
// TypeScript supports many ES6 features including
// template literals:
console.log(`The total sum is ${totalSum}`); // The total sum is 6

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

Интерфейсы и классы

TypeScript позволяет определять интерфейсы, которые эквивалентны контракту формы объекта. Интерфейсы полезны для определения параметров функций, возвращаемых типов и реализации классов. Класс, реализующий интерфейс, должен предоставлять код для всех необходимых методов и свойств интерфейса. Определение интерфейсов полностью удаляется при компиляции в Javascript; они полезны только на стадии разработки.

В следующем примере я показываю простой фрагмент того, как использовать интерфейсы и классы с TypeScript:

// Enums are useful for defining a finite
// number of values that can be used
enum Gender {Male, Female};

// Whoever uses this interface must implement
// all of its properties and methods
interface IAnimal {
  name: string
  gender: Gender
  age: number
  whoAmI: () => void
}

// The 'Person' class implements the
// 'IAnimal' interface
class Person implements IAnimal {

  name: string;
  gender: Gender;
  age: number;

  constructor(name: string, gender: Gender, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age;
  }

  public whoAmI(): void {
    console.log(`${this.name} - ${Gender[this.gender]} - ${this.age}`);
  }
}

let aPerson = new Person('Diego Castillo', Gender.Male, 24);

aPerson.whoAmI(); // Diego Castillo - Male - 24

Как вы могли заметить, синтаксис очень похож на классы в ECMAScript 2015, за исключением того, что типы делают их более устойчивыми.

Определения типов

Определения типов - это файлы объявлений, которые делают библиотеки JavaScript совместимыми с TypeScript. Файлы определения типа имеют расширение .d.ts и в основном состоят из интерфейсов, которые помогают типу компилятора TypeScript проверять код приложения. Эти файлы не содержат деталей реализации библиотеки, для которой они определяют типы.

ОпределенноТип, вероятно, является крупнейшим хранилищем определений типов прямо сейчас, но есть и другие, такие как пакеты NPM.

Определения типов можно установить вручную, но для более крупных проектов рекомендуется использовать инструмент диспетчера определений типов. В настоящее время очень популярным инструментом для управления определениями типов является типизация. Типизация может разрешать определения типов в реестр типизаций, GitHub, NPM, Bower, HTTP и локальные файлы. Вот краткий пример того, как использовать библиотеку наборов текста:

# Search for the type definitions of a particular library
typings search react-dom

# Install one of the definitions found (dt = DefinitelyType)
typings install --global --save dt~react-dom

Как видите, установка определений типов и управление ими очень просто и похоже на управление пакетами с помощью NPM.

Заключение

Я надеюсь, что этот короткий пост в блоге дал вам достаточно информации, чтобы испытать TypeScript. Я ожидаю, что использование TypeScript будет продолжать расти, поскольку современные большие и сложные приложения нуждаются в дополнительных инструментах, подобных этому, которые заставляют разработчиков следовать единым правилам во всем приложении. Наконец, если вам интересно узнать больше о TypeScript, я настоятельно рекомендую курс TypeScript In-deep от Pluralsight (этот курс был невероятно полезным для меня, когда я узнал больше о TypeScript).