TypeScript

Эволюция
vs
 Революция

В начале был JavaScript

JavaScript Клевый !

• гибкий
• быстро учится
• неожиданно быстрый
• няшный

Text

Большой JS проект

(50 - 100 kloc)

• с этим можно жить
  • модули
  • тесты
  • фреймворки
• но неприятно

1995

Javascript

2015 (2017)

ES.next

Чего ждем

• Классы, Модули
• Синтаксический сахар
• Генераторы

• RequireJS, Browserify
• -
• -

2009

CofeScript

http://coffeescript.org/

  function test(a,b){
    var c = a*b;
    return c;
  }

  var c = test(12, 24);

Синтаксический Cахар

//лямбды
square = (x) -> x * x
//операторы
eat food for food in ['toast', 'br']
//классы
class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

Плюсы

• Действительно короче
• Совместим с Javascript кодом
• Много новых конструкций

Минусы

• Но не проще
• Генерит странный JS код
• Мало полезных конструкций
• Свой синтакс
• Не совместим с ES6

2011

Dart

http://dartlang.org

  function test(a,b){
    var c = a*b;
    return c;
  }

  var c = test(12, 24);

Размер имеет значение

main() => print('Hello!');

Плюсы

• Типизированные данные
• Много полезных конструкций
• IDE в комплекте

Минусы

• Генерит очень странный JS код
• Несовместим с javascript
• Другой язык

Личный опыт

Они убили innerHTML

Очень неторопливый IDE ( Eclipse )

Приятный синтаксис

Не хватает гибкости javascripta

Встроенный пакетный менеджер

2012

TypeScript

http://typescriptlang.org

  function test(a,b){
    var c = a*b;
    return c;
  }

  var c = test(12, 24);

Эволюция вместо революции

Любой JavaScript код - это валидный TypeScript

Полная совместимость со все что уже написано на JavaSctipr

Типы данных

var width = 6;
var height: number = 6;

function test(width, 
              height: number){
    ...
}

test(6, "a"); //error

Типы данных

interface Event {
    x : number;
    y : number;
    z?: number;
}
var c:Event = { x:1, y:2 };
var d:Event = { x:1, y:2, a:5 };
var e:Event = { x:1 }; //error

Типы данных

• Исчезают после компиляции в JS
• Полноценный автокомплит
• Рефакторинг
• Частичная замена Unit тестам
• Частичная замена документации

... а зачем оно надо ?

Типы и существующий Javascript

http://definitelytyped.org/

npm install tsd -g
tsd query bootstrap

Функции

function add(x, y = "10"){
    return x+y;
}

function add(x, y?){
    return x + (y || 10);
}

function add(x, ...rest){
    return x + rest[0];
}

Функции

var card = {
  stack:array(52),
  getOne:function(){
    var i = Math.floor(Math.random() * 52)
    return this.stack[i];
  }
}

addEventListener("click", card.getOne);

Функции

var card = {
  stack:array(52),
  getOne:() => {
    var i = Math.floor(Math.random() * 52)
    return this.stack[i];
  }
}

addEventListener("click", card.getOne);

Классы vs Prototypes

Классы

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greet = message;
    }
    greet() {
        return "Hello, " + this.greet;
    }
}

var greeter = new Greeter("world");

Классы в JS

var Greeter = (function(){
    function Greeter(message) {
        this.greet = message;
    }
    Greeter.prototype.greet = function(){
        return "Hello, " + this.greet;
    };
    return Greeter;
})();

var greeter = new Greeter("world");

Классы

class NewGreeter extends Greeter{
    private _isNew: bool;
    constructor(message: string) {
        super(message);
    }
    set isSuper(value: bool){
        this._isNew = value;
    }
    get isSuper() : bool{
        return this._isNew;
    }
}

Модули

Модули

---- check.ts ----
module check {
    export class StringCheck{
        isNice(s: string): { ... };
    }
}

---- logic.ts ----
import myCheck = require('check');
new myCheck.StringCheck();

Модули в JS

define(
    ["require", "exports", 'check'],
    function(require, exports, myCheck) {
        new myCheck.StringCheck();
});

----- or -----

var myCheck = require('check');
new myCheck.StringCheck();

Остались за кадром

Generics

function identity<T>(arg: T): T {
    return arg;
}

var myIdentity: {<T>(arg: T): T} = identity;

Плюсы

• Надежность
• Документирование
• Рефакторинг
• Sublime, WebStorm, VS Express
• ES6 и правильный js

Минусы

Продукт X

50 000 loc

5 лет

Только JavaScript

Продукт X

Постепенное улучшение вместо польной переработки

• меняем .JS на .TS
• описываем используемые интерфейсы 
• добавляем типы в методы
• выделяем классы

Размер имеет значение

10кб JavaScript

=>

11кб TypeScript

Compile

Uglify + Gzip

12кб Javascript

3кб Javascript

3кб Javascript

Плюсы

• Читабельный код
• Документация на халяву
• Меньше багов ( в разработке )
• Больше пишешь код, меньше проверяешь

Минусы

Спасибо за внимание

Собственно и всё