TypeScript Инструментарий за 5 минут

Давайте начнём с создания простого веб-приложения с помощью TypeScript.

Установка TypeScript

Есть два основных способа добавить TypeScript в ваш проект:

• Через npm (менеджер пакетов Node.js)
• Установка плагинов TypeScript для Visual Studio

Visual Studio 2017 и Visual Studio 2015 Update 3 по умолчанию включают поддержку языка TypeScript, но не включают компилятор TypeScript, tsc. Если вы не установили TypeScript с Visual Studio, вы всё ещё можете скачать его.

Для пользователей npm:

> npm install -g typescript

Создание вашего первого файла TypeScript

В вашем редакторе напишите следующий код JavaScript в greeter.ts:

function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);

Компиляция кода

Мы использовали .ts расширение, но этот код — просто JavaScript. Вы могли бы скопировать-вставить его прямо из существующего приложения JavaScript.

В командной строке запустите компилятор TypeScript:

tsc greeter.ts

В результате получится файл greeter.js, который содержит тот же JavaScript, что вы и ввели. Мы успешно запустили TypeScript в нашем приложении JavaScript!

Теперь мы можем начать использовать некоторые новые инструменты, которые предлагает TypeScript. Добавьте : string аннотацию типа к аргументу функции «person», как показано здесь:

function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);

Аннотации типов

Аннотации типов в TypeScript — это лёгкий способ записать предполагаемый контракт функции или переменной. В этом случае мы предполагаем, что функция greeter будет вызываться с одним строковым параметром. Попробуем изменить вызов greeter, передав вместо этого массив:

function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = [0, 1, 2];
 
document.body.textContent = greeter(user);

При повторной компиляции вы увидите ошибку:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

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

Обратите внимание, что хотя и были ошибки, файл greeter.js всё ещё создаётся. Вы можете использовать TypeScript, даже если в вашем коде есть ошибки. Но в этом случае TypeScript предупреждает, что ваш код, скорее всего, не будет работать как ожидается.

Интерфейсы

Давайте продолжим развивать наш пример. Здесь мы используем интерфейс, описывающий объекты, у которых есть поля firstName и lastName. В TypeScript два типа совместимы, если их внутренняя структура совместима. Это позволяет нам реализовать интерфейс, просто имея форму, требуемую интерфейсом, без явного implements условия.

interface Person {
  firstName: string;
  lastName: string;
}
 
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = { firstName: "Jane", lastName: "User" };
 
document.body.textContent = greeter(user);

Классы

Наконец, давайте ещё раз расширим пример с классами. TypeScript поддерживает новые возможности JavaScript, такие как поддержка объектно-ориентированного программирования на основе классов.

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

Также обратите внимание, что использование public для аргументов конструктора — это сокращение, которое позволяет нам автоматически создавать свойства с таким же именем.

class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}
 
interface Person {
  firstName: string;
  lastName: string;
}
 
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = new Student("Jane", "M.", "User");
 
document.body.textContent = greeter(user);

Перезапустите tsc greeter.ts и вы увидите, что сгенерированный JavaScript идентичен коду предыдущих примеров. Классы в TypeScript — просто сокращение для той же парадигмы ОО на основе прототипов, которая часто используется в JavaScript.

Запуск вашего веб-приложения TypeScript

Теперь введите следующее в greeter.html:

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

Откройте greeter.html в браузере, чтобы запустить ваше первое простое веб-приложение TypeScript!

Дополнительно: откройте greeter.ts в Visual Studio или скопируйте код в TypeScript playground. Вы можете наводить курсор на идентификаторы, чтобы увидеть их типы. Обратите внимание, что в некоторых случаях эти типы автоматически выводятся для вас. Перепечатайте последнюю строку и посмотрите списки автодополнения и подсказки параметров, основанные на типах элементов DOM. Поместите курсор на ссылку на функцию greeter и нажмите F12, чтобы перейти к её определению. Также обратите внимание, что вы можете щелкнуть правой кнопкой мыши по символу и использовать рефакторинг для его переименования.

Предоставленная информация о типах совместно работает с инструментами для работы с JavaScript в масштабах приложений. Для получения дополнительных примеров возможностей TypeScript см. раздел «Примеры» на веб-сайте.