Миграция с JavaScript

Предполагая, что:

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

Принимая это предположение, как правило, процесс состоит из следующих шагов:

• Добавьте tsconfig.json.
• Измените ваши расширения файлов исходного кода с .js на .ts. Начните нейтрализовывать ошибки, используя any.
• Напишите новый код на TypeScript используя как можно меньше any.
• Вернитесь к старому коду и начните добавлять описания типов исправляя выявленные ошибки.
• Используйте внешние определения типов для стороннего кода JavaScript.

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

Обратите внимание, что весь JavaScript является валидным TypeScript. То есть, если вы скормите компилятору TypeScript немного JavaScript -> JavaScript, сгенерированный компилятором TypeScript на выходе, будет вести себя точно так же, как и исходный JavaScript. Это означает, что изменение расширения с .js на .ts не ухудшит вашу кодовую базу.

Нейтрализация ошибок

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

var foo = 123;
var bar = 'hey';

bar = foo; // ОШИБКА: не возможно присвоить число строке

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

var foo = 123;
var bar = 'hey';

bar = foo as any; // Хорошо!

В других местах вы можете описать что-нибудь как any, например:

function foo() {
    return 1;
}
var bar = 'hey';
bar = foo(); // ОШИБКА: невозможно присвоить число строке

Нейтрализованные:

function foo(): any {
    // Добавленный `any`
    return 1;
}
var bar = 'hey';
bar = foo(); // Хорошо!

Примечание: нейтрализация ошибок опасна, но позволяет вам замечать новые ошибки в вашем TypeScript коде. Вы можете оставлять комментарии // TODO: по мере продвижения.

Сторонний JavaScript

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

Примечание. Хорошо поддерживаемые и строго типизированные определения для почти 90% библиотек JavaScript существуют в open-source репозитории под названием DefiniteTyped. Мы рекомендуем посмотреть там, прежде чем создавать свои собственные определения, как мы показываем здесь. Тем не менее, этот быстрый и базовый способ является жизненно важным знанием для уменьшения начальных разногласий с TypeScript.

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

declare var $: any;

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

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

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

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

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

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

declare module 'jquery';

И тогда вы можете импортировать его в свой файл по мере необходимости:

import * as $ from 'jquery';

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

Внешние не js ресурсы

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

declare module '*.css';

Теперь разработчики могут import * as foo from "./some/file.css";

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

declare module '*.html';

Комментарии