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

в 12:25, , рубрики: javascript, TypeScript, автодополнение, препроцессор, статический анализ, метки: , , , ,

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

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

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

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

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

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

function proccess(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 + thisy * 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

Автор: ActiveObject

Поделиться

* - обязательные к заполнению поля