Приветствую, коллеги. В эту пятницу Microsoft выпустила бета-версию Typescript 1.8, в которой на удилвение много очень полезных для javascript разработчика штук. Мы в voximplant недавно начали переписывать наш web sdk на typescript, и по моему опыту могу с уверенностью сказать, что польза от компилятора огромная. Он позволяет объединить лучшее, что есть в статически и динамически типизированных языках: в начале вы быстро пишите javascript код, не заботясь о типах и экспериментируя с архитектурой — а когда код «стабилизируется», добавляете типы где считаете нужным и тем самым перекладываете кучу проверок на плечи компилятора. Под кактом я кратко пройдусь по ключевым фичам новой версии и поделюсь своими соображениями об их полезности и практической применимости.
Установка beta-версии
Если вы добавляете typescript впервые, то достаточно выполнить npm install, указав версию с окончанием @beta:
npm install typescript@beta --save
Если же вы меняете предыдущую версию на 1.8, то здесь нас ждет небольшая засада: в package.json необходимо прописывать не typescript@beta, а неожиданную ^1.8.0:
"dependencies": {
"typescript": "^1.8.0"
}
Возможность компилировать javascript
При портировании проектов на typescript много времени отнимает «допиливание» javascript до синтаксиса typescript. Несмотря на то, что typescript «обратно совместим» с javascript, просто так переименость .js файл в .ts не получится: компилятор выдаст ассортимент варнингов и ошибок. Та же история с подключением чужих javascript библиотек: либо .tsd файл, либо приведение к типу any.
Новый флаг allowJs позволяет решить эту проблему: теперь typescript может компилировать javascript файлы наравне с typescript. Так что портирование существующего проекта можно начинать вообще без изменения кода, и затем постепенно приводить файлы к typescript синтаксису:
tsc --allowJs --outDir out target_file.js
Легковесные компоненты для JSX
Когда авторы ReactJS сказали что будут запихивать HTML в JavaScript, все долго плевались. Но концепция оказадась на удивление жизнеспособной, и синтаксис прижился. А через некоторое время в facebook заметили, что значительная часть создаваемых компонент довольно легковесны — они рендерят кусочек пользовательского интерфейс на основании своего состояния, и все. Чтобы поддержать благое начинание, в синтаксис JSX была добавлена возможность создавать компоненты на основании функций, а не классов. С новым typescript такой же синтаксис можно использовать и в TSX файлах:
let SimpleGreeter = ({name = 'world'}) => <div>Hello, {name}</div>;
Кстати, синтаксис JSX теперь подсвечивается в Visual Studio, что делает разработку под Windows еще более удобной. Особенно в свете бесплатной Visual Studio Community Edition. Vim с Emacs конечно рулят, да и WebStorm очень хорош — но Visual Studio это Visual Studio. Штука хорошая и полезная. А начиная с этой версии, компилятор typescript распространяется еще и в виде nuget package.
Типы как ограничения
В typescript есть замечательная функциональность «constraints», которая позволяет разными способами ограничить допустимые типы. К примеру, если мы хотим сделать шаблонную функцию, котрая бы принимала аргументы с указанным интерфейсом, мы можем указать это ограничение внутри угловых скобок:
function foo<T extends SomeInterface>(arg: T) {}
В новой версии этот механизм существенно расширился: теперь типы могут ссылаться друг на друга, что позволяет описывать сложные ограничения:
function assign<T extends U, U>(target: T, source: U) {}
Анализ пути выполнения кода
Новая версия компилятора typescript обучена сообщать о потенциальных проблемах с кодом, когда сам код синтаксически корректен, но программист вряд ли имел в виду ЭТО:
- Код, который никогда не выполняется (напирмер, код после return).
- Неиспользуемые метки.
- Функция, в теле которой есть return, а вот в конце return нет.
- Забытый break в case.
Поведение компилятора для этих случаев можно настроить с помощью вот этих параметров.
Monkey-patch модулей
В новой версии typescript можно переопределять типы и методы, объявленные в других модулях. Кроме всего прочего это позволяет в несколько строк кода исправлять ошибки в чужих type definition. Да, выглядит как грязный хак, но позволяет быстро написать и проверить код, чтобы потом в спокойной обстановке сделать все по Фен-Шуй:
import { Observable } from "./observable";
// меняем модуль "./observable"
declare module "./observable" {
// меняем интерфейс внутри модуля
interface Observable<T> {
map<U>(proj: (el: T) => U): Observable<U>;
}
}
Допустимые значения для строк
Смое, на мой взгляд, полезное нововведение. Хорошим тоном считается использовать enum для перечисляемых значений, и ни в коем случае не строки. Почему? Потому что в строковом значении можно допустить опечатку и никто об этом никогда не узнает. Теперь — знает. Новый typescript позволяет указать какие значения может принимать строка, и проверит ваш код на этапе компиляции:
interface AnimationOptions {
deltaX: number;
deltaY: number;
easing: "ease-in" | "ease-out" | "ease-in-out";
}
Комментарии в tsconfig.json
Конечно, json с комментриями это уже не совсем json — зато удобно. Очень надеюсь, что то же самое когда-нибудь сделают для npm:
{
"compilerOptions": {
"target": "ES2015", // running on node v5, yaay!
"sourceMap": true // makes debugging easier
},
/*
* Excluded files
*/
"exclude": [
"file.d.ts"
]
}
Также в меню упрощения для работы с ReactJS, снятия огранчений с --project, цветные сообщения об ошибках, «type guards», проверки для цикла «for...in» и много других небольших доработок, с полным списком которых вы можете ознакомиться здесь.
Автор: Voximplant
