TypeScript — что да как…

Решения связанные с TypeScript

Что такое файлы декларации и где их взять?

Файлы декларации предназначены для описания нестандартных объектов используемых в скрипте TypeScipt.
Используются для проверки типов / параметров при компиляции. Также ваша среда разработки будет знать что за объект и выводить нужную подсказку.
В чем то это аналог заголовочных файлов из языка C. Расширение для файлов «d.ts»

Где взять файлы декларации
Зачастую эти «нестандартные объекты» используемые в TS — это внешние библиотеки. Файлы декларации для наиболее популярных библиотек можно найти на GitHub.
Также можно написать самим файл декларации. Описание как это сделать смотрите тут.
Так же любой объект можно объявить как any.
Например объект jQuery:

declare var $: any;

this при вызове калбэков и безымянных функций

При вызове калбек функции надо обратится к this вызывающего класса.
Стандартное решение: внешняя переменная (сохраняем this в переменную self перед вызовом колбэка, и в самом колбеке используем уже self)

declare var $: any;

class Test {
    public name = 'classTest';
    constructor(){
        var self = this;
        $('a').on('click', function(){
            console.log(self.name + ': ' + this.href);
        });
    }
}

testObj: Test;
var testObj = new Test();

Минус: this тут все равно не наш класс. И если вызовем метод класса self.clickLink() то в теле метода обращение к this приведет к проблеме. Это можно обойти вызвав метод через apply

class Test {
    public name = 'classTest';

    public clickLink(e){
        console.log(this.name + ': ' + e.target.href);
    }

    constructor(){
        var self = this;
        $('a').on('click', function(event){
            self.clickLink.apply(self, [event]);
        });
    }
}

Теперь сахар (И так надо делать!!!):
Оцените лаконичность:

class Test {
    public name = 'classTest';

    public clickLink(e){
        console.log(this.name + ': ' + e.target.href);
    }

    constructor(){
        $('a').on('click', (event) => this.clickLink(event));
    }
}

Этот код создает замыкание передающее this

var Test = (function () {
    function Test() {
        var _this = this;
        this.name = 'classTest';
        $('a').on('click', function (event) { return _this.clickLink(event); });
    }
    Test.prototype.clickLink = function (e) {
        console.log(this.name + ': ' + e.target.href);
    };
    return Test;
})();

Настройки PHPStorm или WebStorm

Проверяем что бы в настройках был включена поддержка JavaScript.
File — Settings — Plugins — JavaScript support

TypeScript - PhpStorm

Включаем компилятор на лету
File — Settings — Languages… — TypeScipt
Ставим галочку «Enabled TypeScript Compiler»
TypeScript компилятор

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *