Миграция с JavaScript

Требуемые навыки:

• Вы знаете JavaScript;

• Вы знаете, как использовать общие шаблоны и инструменты сборки в вашем проекте (например webpack).

С учетом приведенных выше пунктов миграция с JavaScript обычно включает в себя следующие шаги:

• Добавить файл tsconfig.json;

• Измените расширение файла с .js на .ts и начните использовать any, чтобы уменьшить количество ошибок;

• Начните писать код на TypeScript, чтобы минимизировать использование any;

• Вернитесь к старому коду, начните добавлять аннотации типов и исправлять выявленные ошибки;

• Используйте декларацию окружения для стороннего кода JavaScript.

Давайте обсудим некоторые из них дальше.

Помните, что весь JavaScript это тот же TypeScript только без типов. Это означает, что если вы позволите компилятору TypeScript компилировать код JavaScript в JavaScript, скомпилированный результат будет точно таким же, как и исходный код JavaScript. Другими словами, изменение расширения файла с .js на .ts не будет иметь негативных последствий.

Уменьшение ошибок

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

let foo = 123;
let bar = 'hey';

bar = foo; // Error: cannot assign a number to a string

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

let foo = 123;
let bar = 'hey';

bar = foo as any; // ok

С других местах, вы можете использовать any в качестве аннотации типа:

function foo() {
    return 1;
}
let bar = 'hey';
bar = foo(); // ERROR: cannot assign a number to a string

Подавить эту ошибку:

function foo(): any {
  // возвращает 'any'
  return 1;
}

let bar = 'hey';
bar = foo();

Использование такого подхода для подавления сообщений об ошибках опасно, но позволяет обратить ваше внимание на новые ошибки кода TypeScript. Прежде чем двигаться дальше, лучше оставить комментарий // TODO

Сторонний код

Вы можете изменить свой код JavaScript на код TypeScript, но вы не можете заставить мир использовать TypeScript. Здесь поддерживаются объявления среды TypeScript. Мы рекомендуем вам создать файл vendor.d.ts в качестве отправной точки (расширение файла .d.ts указывает, что этот файл является файлом декларации), а затем мы можем что-то добавить в файл. В качестве альтернативы вы можете создать файл объявления для конкретной библиотеки, например, файл jquery.d.ts для jquery.

Почти 90% библиотек JavaScript существуют в репозитории, таком как DefinitiveTyped. Прежде чем создавать собственный файл объявлений, мы рекомендуем вам зайти в репозиторий и поискать там. Хотя описанный выше метод создания файла объявления является быстрым и создает грязный код, этот метод поможет вам начать работу с Typescript.

Рассмотрим вариант использования jquery, вы можете создать его определение очень просто и быстро:

declare var $: any;

Иногда вам может потребоваться дать четкое определение некоторым переменным (например jquery), и вы будете использовать его в пространстве объявления типов. Вы можете сделать это быстро с помощью ключевого слова type:

declare type JQuery = any;
declare var $: JQuery;

Это обеспечит вам более простой путь обновления в будущем.

Опять же, высококачественный jquery.d.ts существует в DefiniteTyped. Но теперь вы знаете, как быстро преодолеть любой ошибки при JavaScript -> TypeScript при использовании стороннего JavaScript. Далее мы подробно рассмотрим декларацию окружения.

Сторонние модули NPM

Подобно объявлению глобальной переменной, вы можете легко объявить глобальный модуль. Например, для jquery, если вы хотите использовать его в качестве модуля (NPM), вы можете написать следующее самостоятельно:

declare module 'jquery';

Затем вы можете импортировать его при необходимости:

import * as $ from 'jquery';

Опять же, высококачественный jquery.d.ts существует в DefiniteTyped, который обеспечивает намного более качественное объявление модуля jquery. Но он может не существовать для вашей библиотеки, так что теперь у вас есть быстрый и легкий способ продолжить миграцию.

Дополнительные не-JavaScript файлы

В TypeScript вы даже можете разрешить импортировать любой файл, например, файл .css (если вы используете загрузчик стилей в webpack или модуль css), вы просто добавляете следующий код в global.d.ts:

declare module '*.css';

Теперь вы можете использовать import * as foo from './some/file.css' .

Аналогично, если вы хотите использовать HTML-шаблоны (например, angular), вы можете:

declare module '*.html';