1. ВВЕДЕНИЕ В
TypeScript
Дмитрий Миндра
LOHIKA, Одесса

3. Geek and Poke
http://geekandpoke
.typepad.com/

4. Зачем ?
 Для построения масштабируемых и
поддерживаемых систем
 Для облегчения поддержки кода
 TypeScript – «опционально» типизированный язык
 Полностью совместим с JavaScript и является его
надмножеством.
 Компилируется в JavaScript
 OpenSource

5. Node.js
С чего начать ?
npm install –g typescript
tsc source.ts
Visual Studio 2012
Plugin is available

6. Расширения файлов
*.ts – исходный код TypeScript
• *.d.ts – TypeScript definition files

7. Декларации
• TypeScript всего лишь описывает контракты
динамических типов, облегчая разработку.
• Файлы с декларайиями позволяют описать типы
как заголовочные файлы в C++
• Intellisense будет корректно давать подсказки
• Файлы для DOM и jQuery идут в поставке с
TypeScript (lib.d.ts).
• Сообщество активно пишет декларации для
стандартных библиотек.

8. Инструментальная поддержка
• Статическая проверка типов
• Навигация по символам
• Intellisense
• Рефакторинг

9. Аннотации типов
function multiply(a: number, b: number) {
return a * b;
}
• Тип возвращаемого значения будет
выведен.
• Постфиксная запись :number
• Есть опциональные параметры
?:number

10. Типы
Тип Any является общим предком для всех типов и
может хранить любой тип JavaScript без каких-либо
ограничений.
Простые типы:
 number
 bool
 String
 null
 undefined
Объекты:
 Классы, модули, интерфейсы
 Типизированные массивы
var employees : Employee[] = [];

11. Лямбды
() => { console.log(“It’s Saturday!”)}
setTimeout(() => { alert(this.message); }, 3000);
(x) => { return Math.sin(x); }
(x) => Math.sin(x)
x => { return Math.sin(x); }
x => Math.sin(x)

12. Type Assertions
function createShape(kind: string): Shape
var circle = <Circle> createShape("circle");
• Не является приведением типов, и не
проверяется во время выполнения.

13. Интерфейсы
 Интерфейсы могут расширять друг друга
 Для интерфейсов не генерируется JavaScript
interface Mover interface Shaker
{ {
move(): void; shake(): void;
getStatus(): { speed: number; }; getStatus(): { speed: number; };
} }
interface MoverShaker extends Mover, Shaker
{
getStatus(): { speed: number; frequency: number; };
}

14. Интерфейс
interface StringComparer { (a: string, b: string): number; }
А это будет функция, принимающая два
строковых параметра и возвращающая
числовое значение.

15. Ambient Declarations
declare var document:Document;
Мы вводим переменную в TypeScript, хотя она
объявлена где-то в другом месте.
Код для таких объявлений не генерируется.

16. Классы
var Lottery = (function () {
function Lottery(secret) {
class Lottery { this.secret = secret;
constructor (private secret: number) { }
} Lottery.prototype.gamble =
function (guess) {
public gamble(guess: number) { if(guess == this.secret) {
if (guess == this.secret)
console.log('win');
console.log('win');
} else {
else
console.log('loose');
console.log('loose')
} }
};
private showSecret() { Lottery.prototype.showSecret =
console.log('secret'); function () {
} console.log('secret');
} };
return Lottery;
})();

17. Классы
• Есть public и private модификаторы.
• Объявление и инициализация полей
через параметры конструктора.
• Обращение к родительскому классу
через super

18. Модули
module M {
var s = "hello";
export function f() {
return s;
}
}
M.f();
M.s; // Error, s is not exported

19. Зависимости
Reference comment
/// <reference path="Common.ts" />
Import declaration
import mod = module("saturday");
var modspeaker = new mod.Speaker();

20. Source Map
tsc -sourcemap file.ts
В отладчике виден TypeScript вместо
скомпилированного JavaScript.
Работает в Google Chrome
Пока что не интегрировано в Visual Studio

21. Преимущества TypeScript
Строгая типизация
Масштабируемость

22. Недостатки TypeScript
Состояние Preview
Необходимость компиляции
Не полная совместимость с JavaScript
Возможное разветвление с ECMAScript

23. Спасибо !
https://github.com/DmytroMindra/NetworkUA-2012-TypeScriptGame
Great presentation by Ben Smith
http://10consulting.com/2012/10/12/introduction-to-typescript-
presentation/
Documentation
http://www.typescriptlang.org/Content/TypeScript%20Language%20Sp
ecification.pdf
Official Website
http://www.typescriptlang.org
Anders Hejlsberg: Introducing TypeScript