TypeScript

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

В начале был JavaScript

JavaScript Клевый !

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

Text

Пока маленький...

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

(50 - 100 kloc)

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

1995

Javascript

2015 (2017)

ES.next

Чего ждем

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

 

А пока ждали

  • RequireJS, Browserify
  • -
  • -

 

2009

CofeScript

- Rails

- DropBox

- GitHub

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

- Google

http://dartlang.org


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

  var c = test(12, 24);
  int test(int a,int b){

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

2011

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

100kb

2012

20kb

2014

8 loc

Плюсы

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

Минусы

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

Личный опыт

Они убили innerHTML

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

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

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

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

2012

TypeScript

- Microsoft

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

Минусы

Карма MicroSoft

Продукт X

50 000 loc

5 лет

Только JavaScript

Продукт X

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

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

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

10кб JavaScript

=>

11кб TypeScript

Compile

Uglify + Gzip

12кб Javascript

3кб Javascript

3кб Javascript

Плюсы

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

Минусы

Ломка при возвращении к JS

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

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