Typescript 1.8: дуже багато нового і корисного

Вітаю, колеги. У цю п'ятницю 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 { Вами } from "./вами";

// змінюємо модуль "./вами"
declare module "./вами" {

// змінюємо інтерфейс всередині модуля
interface Вами<T> {
map<U>(proj: (el T) => U): Вами<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» і багато інших невеликих доопрацювань, з повним списком яких ви можете ознайомитися тут.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.