Войти Зарегистрироваться
Войти Зарегистрироваться
23.10.2017 в 13:41 Блог

Как использовать преимущества Typescript, продолжая писать на обычном JavaScript

Язык программирования от Microsoft, TypeScript, предоставляет множество преимуществ статической типизации для JavaScript. Несмотря на то, что во время выполнения не применяет типы, он обеспечивает более богатый статический анализ, повышает безопасность и открывает дверь для лучшей интеграции IDE. Код TypeScript обычно транслоируется на стандартный JavaScript, чтобы он мог запускаться изначально в браузерах и Node.js. Учитывая привлекательность преимуществ TypeScript, неудивительно, что его использование растет быстрыми темпами.

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

К счастью, даже разработчики на чистом JavaScript теперь могут воспользоваться преимуществами статической типизации. TypeScript 2.3, который появился в апреле, представил поддержку для анализа обычного кода JavaScript, который имеет аннотации типов в комментариях. Вы можете использовать синтаксис, основанный на JSDoc, для описания сигнатур функций и добавления информации о типе. Инструменты TypeScript читают аннотации типа из комментариев и используют их почти так же, как они используют систему типов TypeScript.

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

Разберемся на примерах

Чтобы включить анализ типов в JavaScript, просто добавьте комментарий с текстом @ ts-check в начало файла. Затем добавьте аннотации типа TypeScript JSDoc в любом месте файла. В следующем примере показано, как описать сигнатуру функции с типом возвращаемого значения и двумя параметрами:

// @ts-check

/**
 * @param {number} a
 * @param {number} b
 * @return {number}
 */
function example(a, b) {
 return a + b;
}

В Visual Studio Code, который имеет встроенную поддержку TypeScript, редактор автоматически обнаруживает эти комментарии и делает то, что вы ожидаете. Там буквально нет настроек - вам даже не нужен файл конфигурации TypeScript - просто добавьте комментарии к любому JavaScript-коду. Если вы попытаетесь вызвать функцию с параметрами, не соответствующими указанному типу, редактор отобразит предупреждение.

Редактор также использует аннотации типа для улучшения работы других функций, таких как автозаполнение. Анализ типов работает как ожидалось во всех файлах, потому что TypeScript распознает инструкции import ES6 и NodeJS require.

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

/**
 * @typedef {Object} Issue
 * @property {string} url
 * @property {string} repository_url
 * @property {id} number
 * @property {string} title
 * @property {string} state
 * @property {bool} open
 */

const url = "https://api.github.com/repos/microsoft/typescript/issues";

(async () => {
 let response = await got(url, {json: true});
 
 /** @type {Issue[]} */
 let issues = response.body;
 for (let issue of issues)
 console.log(issue.title);
})();

В примере используется аннотация typedef для определения типа объекта. Внутри async IIFE, где ответ API GitHub присваивается переменной, называемой проблемами, существует аннотация типа , которая указывает, что значение проблем представляет собой массив объектов Issue.

Вы можете найти больше примеров аннотаций типа типа JSDoc, поддерживаемых TypeScript, в вики TypeScript.

Поддержка библиотек

TypeScript автоматически подбирает информацию о типе для стандартной библиотеки Node, поэтому вы получаете проверку типов для большей части встроенных функций из коробки. Некоторые сторонние библиотеки JavaScript также включают определения типа TypeScript (обычно файл с расширением .d.ts) в своих пакетах npm. Включение @ ts-check в вашем проекте позволит вам проверить тип функциональности, экспортируемой из этих библиотек.

Источник: http://seg.phault.net/blog/2017/10/typescript-without-transpiling/

Автор Дмитрий Цирульников
Коментарии (0)
Для того что-бы оставить комментарий, авторизуйтесь