TypeScript: статический анализ, автодополнение и немножко ES6 для JavaScript

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

TypeScript — синтаксический сахар для JavaScript. Синтаксис TypeScript — надмножество синтаксиса EcmaScript 5 (ES5). Каждая программа JavaScript является корректной программой TypeScript. Компилятор TypeScript выполняет только локальние преобразование файлов и не делает никаких переопределений переменных. Это позволяет писать код максимально близкий к оригинальному JavaScript. TypeScript не меняет названия переменных, делая процес отладки предсказуемим. Компилятор также предоставляет source maps.

Система типов

На мой взгляд это основная возможность TypeScript, которою стоит попробовать в действии. Опциональная система типов, посредством аннотаций непосредственно в коде, позволяет вносить ограничения на возможности JavaScript, а также использовать инструменты, которые обеспечивают выполнение этих ограничений. Для минимизации числа аннотаций TypeScript активно использует вывод типов. Эта особенность позволяет использовать автодополнение, указывать на несовместимость типов, что так не хватает при разработке сложних JavaScript приложений. Типы значений в TypeScript указываются непосредственно в коде:

function process(x: number, y: number) {
	var v = x + y;
	return v;
}

Также можно указать тип возвращаемого значения (хотя в даном случае система типов сама в состоянии определить тип):

function process(x: number, y: number): number {
	var v = x + y;
	return v;
} 

Для объектов можно указывать типы посредством интерфейсов:

interface Thing {
	a: number;
	b: string;
	foo(s: string): string;
}

Такие объявления можно объединить в отдельные файлы. Они напоминают заголовочные файлы в C, C++. Можно писать описания не только к новым программам, но и для существующих библитек. TypeScript предлагает готовые описания для Node.js, jQuery, DOM.

Классы и модули

Синтаксис TypeScript включает в себя несколько особенностей предлагаемых EcmaScript 6 (ES6), в частности классы и модули. Пример класса в TypeScript:

class Point {
	x: number;
	y: number;
	constructor (x: number, y: number) {
	   this.x = x;
	   this.y = y;
	}
	dist () { return Math.sqrt(this.x * this.x + this.y * this.y); }
	static origin = new Point(0, 0);
}

var p = new Point(10, 20);
var dist = p.dist();
var zeroPoint = Point.origin;

Модули TypeScript используют существующие подходы CommonJS, AMD для реализации модульной системы.

Пример модуля:

module Acme.Core.Utils {
	export class Tracker {
		count = 0;
		start () {
			windows.onmouse = e => {
				console.log(this.count);
			};
		}
	}
}

import ACU = Acme.Core.Utils;
var t = new ACU.Tracker();
t.start();

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

Вывод

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

Официальний сайт: www.typescriptlang.org
Установка для посвященных: npm install -g typescript
Интерактивная консоль: www.typescriptlang.org/Playground
Отличная видео-презентация от Anders Hejlsberg: channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript