TypeScript: особенности разработки

Frontendconf 2015

TypeScript

особенности разработки

.

Эволюция JS

.
.

JS compilers

Список всевозможных трансляторов и диалектов: goo.gl/EAabNP (340+)

.

Достоинства CoffeeScript

Почему не CoffeeScript?

TypeScript

Светлое будущее ES6+ уже вчера

.

Достоинства TypeScript

Мифы о TypeScript

.

Мифы о TypeScript

  1. Это другой язык, как и CoffeeScript
  2. Закрытый исходный код
  3. Разрабатывать можно только в VisualStudio
  4. Корректно работает только с Windows
  5. Генерит лишний код
  6. Медленный

Это другой язык, как и CoffeeScript


let say =  (def:string):string  => `TypeScript is ${def}!`;
say('pretty amazing')
.

Закрытый исходный код

Исходники по адресу:
https://github.com/Microsoft/TypeScript/

Разрабатывать можно только в Visual Studio

IDE supports

Корректно работает только с Windows

			npm install -g typescript
			tsc my_application.ts

Генерит лишний код

var say =  (def:string):string  => `TypeScript is ${def}!`;
say('pretty amazing');

Генерит лишний код

var say =  (def:string):string  => `TypeScript is ${def}!`;
say('pretty amazing');

Результат:

var say = function (def) { return ("TypeScript is " + def + "!"); };
say('pretty amazing');

Тот же результат на CoffeeScript

(function() {
    var say;
    say = (function(_this) {
        return function(def) {
            return "TypeScript is " + def + "!";
        };
  	})(this);
    say('pretty amazing');
}).call(this);

TypeScript vs CoffeeScript. Результат компиляции

var gvstr;
var _this = this; // Babel делает так же
var say = function (def) {

    return _this.gvstr = "T..." + def + "!"
};

say('pretty amazing');


(function() {
    var say;
    say = (function(_this) {
        return function(def) {
            return "T..." + def + "!";
            };
    })(this);
    say('pretty amazing');
}).call(this);

Генерит лишний код

enum Color { Red, Green, Blue }
var color :Color = Color.Green;

Генерит лишний код

var Color;
(function (Color) {
    Color[Color["Red"]  = 0] = "Red";
    Color[Color["Green"]= 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

var color = 1;

Генерит лишний код

const enum Color { Red, Green, Blue }
var color :Color = Color.Green;

Результат:

var c = 1;

Реальная практика использования
TypeScript

.

Способы подключения

TypeScript Compiler

File → Settings → Language & Frameworks → TypeScript → Enable TypeScript Compiler

.

Управляющие
комментарии

.

 

 

/// <reference path="file-name.d.ts" />

/// <amd-module name="myName" />

/// <amd-module name="lib/md5" />
function md5() { ... }
export = md5;

define("lib/md5", ["require", "exports"], function (require, exports) {
        function md5() { ... }
            return md5;
});

 

/// <amd-dependency path="dir/file" />

/// <amd-dependency path="lib/global" />

define(["require", "exports", "lib/global"], function (require, exports) { ... });

///<amd-dependency path="file" name="var"/>

/// <amd-dependency path="legacy/base/view" name="View" />
View.someDo();


define(["require", "exports", "legacy/base/view"],
    function (require, exports, View) {
        View.someDo();
    }
);

<amd-dependency path="..." name="..." />

/// <reference path="legacy/base/view.d.ts" />
/// <amd-dependency path="legacy/base/view" name="View" />


Эквивалентно записи:

/// <reference path="legacy/base/view.d.ts" />
import View = require("legacy/base/view");

/// <reference no-default-lib="true" />

0_o

Подключение
существующего
legacy кода

.

Пример подключения *.js в *.ts

lib/crypt.js

define(function () {
    function md5() { /* ... */ }
    function uid() { /* ... */ }
    return {
        md5: md5,
        uid: uid
    }
});

newApp.ts

class AppController {
    private _uid: string;
    constructor() { ... }
    setUid(): string {
        return this._uid = crypt.uid(); // crypt в legacy
    }
    init(): void { ... }
    run(): void { ... }
    static exec(ctrl: AppController): void { ... }
}

export = AppController;

newApp.ts

/// <amd-dependency path="lib/crypt" />
class AppController {
    setUid(): string {}
}

define(["require", "exports", "lib/crypt"], function (require, exports) {
var AppController = (function () {
        function AppController() {}
        AppController.prototype.setUid = function () { this._uid = crypt.uid() };
        return AppController;
    })();
    return AppController;
});

newApp.ts

/// <amd-dependency path="lib/crypt" />
declare var require:any;
var crypt = require("lib/crypt");
class AppController { ... }

define(["require", "exports", "lib/crypt"], function (require, exports) {
var crypt = require("lib/crypt");
var AppController = (function () {
        function AppController() {}
        AppController.prototype.setUid = function () { this._uid = crypt.uid() };
        return AppController;
    })();
    return AppController;
});
crypt.d.ts 
declare module "lib/crypt" {
    export function md5() :string;
    export function uid() :string;
}

newApp.ts

/// <require path="lib/crypt.d.ts" />
import crypt = require("lib/crypt");

class AppController { ... }

define(["require", "exports", "lib/crypt"], function (require, exports, crypt) {
    var AppController = (function () {
        function AppController() {}
        AppController.prototype.setUid = function () { this._uid = crypt.uid() };
        return AppController;
    })();
    return AppController;
});

TypeScript
+
React

TypeScript ничего не знает про JSX

render: function() {
    return <div className="train">
        <div className="title">{this.state.title}</div>
        </div>
}

TypeScript умеет жить с React

render: function() {
    return React.jsx(
            "<div className="train">
                <div className="title">{this.state.title}</div>
            </div>"
        )
}
.

React Templates

Документация: wix.github.io/react-templates

Пример работы TS c RT(JSX)

Структура компонента

.../page/train/seats/carMap/carMap/

carMapItem.rt

<rt-require dependency="bemp/blocks/popup/component" as="Popup"/>
<rt-require dependency="bemp/blocks/train/seats/carMap/legend/component" as="Legend"/>
<div class="car_wrapper">
    <Ereg isAvailable={this.props...} schemeHeight={this...} className="...">
    </Ereg>{this.props.children}<div class="..." rt-if="...">
        <Popup
            innerHtml={this.props.errorMessage}
            active="{!this.state.popupHiddenByClick}"
            onClose={this.onPopupClosed}></Popup>
    </div>
    <Legend rt-if="this.props.showLegend" className="..."/>
</div>

carMapItem.rt.js

define([
    'react/addons', 'lodash', 'bemp/blocks/popup/component', ...
], function (React, _, Popup, ...) {
    'use strict';
    return function () {
        return React.createElement('div', {...}, React.createElement(Ereg, {
            'isAvailable': this.props.isEregAvailable, ...
        }),
        this.props.errorMessage
            ? React.createElement('div', {...}, React.createElement(Popup, {
                    'innerHtml': this.props.errorMessage,
                    'onClose': this.onPopupClosed
                }))
            : null,
	    ...
    };
});

carMapItem.js

define(['react', './carMapItem.rt', ...], function (React, template, ...) {
    return React.createClass({
        displayName: 'carMapItem',
        getDefaultProps: function () {
            return { ... }
        },
        checkErrorMessage: function (props) { ... },
        getInitialState: function () {
            return { ... }
        },
        onPopupClosed: function () {
            this.setState({ ... })
        },
        render: template
    });
});

carMapItem.ts

import React = require("react");
import template = require("./carMapItem.rt");

class carMapItem extends React.Component {
        public displayName:string = 'carMapItem',
        static defaultProps = {
            ...
            onErrorShow: () => void 0
        }
        getInitialState() { return { ... } }
        onPopupClosed() { this.setState({ ... }) }
        render() { return template }
}

export = carMapItem;

TypeScript
или
Facebook Flow?

.

TypeScript
или
Babeljs?

.

TypeScript vs Babel

.
.

Выбираем Flow если ...

Что нравится в Flow

Что не нравится в Flow

Почему
нам
нравится
TypeScript

.

Почему нам нравится TypeScript

TypeScript обрастает инструментами

TypeScript завтра

Вопросы?

TypeScript
Особенности разработки

Александр Майоров, Tutu.ru

Презентация: frontendconf.majorov.su

Александр Майоров