TypeScript 101: инструменты для Hello World

Это сообщение от  Dhananjay Kumar из блога сообщества infragistics.com , синдицированное с разрешения автора.

Этот пост поможет вам начать работу с TypeScript, настроив среду разработки для TypeScript в Visual Studio и Sublime Text. В конце статьи мы создадим простую программу TypeScript в Visual Studio.

Особенности TypeScript

Включает:

Имеет:

TypeScript в Visual Studio

Предпосылки

Для работы с TypeScript в Visual Studio загрузите пакет TypeScript для своей версии Visual Studio с http://www.typescriptlang.org  и установите при необходимости ( рис. 1 , справа).

Более поздние версии Visual Studio включают TypeScript.

Создать проект TypeScript в Visual Studio

1. Найдите  HTML Application with TypeScript в разделе TypeScript установленные шаблоны, как показано на рисунке 2 ниже. 

   

2. Создайте проект, используя

   HTML Application with TypeScript

   шаблон. После создания проекта найдите файлы app.ts в обозревателе решений ( рисунок 3 ) и app.js  в папке проекта:

   • app.ts 
     Файл TypeScript. Всякий раз , когда вы сохраните этот файл, Visual Studio создаст эквивалент JavaScript его с именем app.js .

   • In index.html( Рисунок 4 ), вы заметите ссылку на скомпилированный app.js ; однако файл не включен в проект по умолчанию. Вы можете добавить его в проект вручную.

   

   

Вы можете добавить несколько файлов TypeScript, открыв контекстное меню правой кнопкой мыши, выбрав «Добавить новый элемент», а затем «Файл TypeScript». После добавления нового исходного файла Visual Studio создаст соответствующий файл JavaScript в той же папке. Вам нужно вручную добавить ссылки на эти файлы JavaScript в ваш HTML.

Файл app.ts содержит ссылочный код для печати текущего времени в TypeScript. Ничего не меняя, запустите приложение в своем любимом браузере, и вы получите текущее время, напечатанное в браузере с использованием TypeScript, показанного на рисунке 5 ниже:

TypeScript в возвышенном тексте

Предпосылки

• Подсветка синтаксиса

• Индивидуальная система сборки

Чтобы установить подсветку синтаксиса TypeScript

1. Git  клонировать этот пакет к , \AppData\Roaming\Sublime Text 2\Packagesкак показано на рисунке 6 , ниже:

   

2. После установки создайте новый  файл .ts в Sublime Text, и вы увидите, что синтаксис TypeScript работает ( рисунок 7 ):

   

Чтобы создать систему сборки TypeScript

1. Инструменты  →   Система сборки  →   Новая система сборки

2. В окне «Новая система сборки» вставьте приведенный ниже код и сохраните файл с именем, например «TypeScriptBuild».

{
    "selector": "source.ts",
    "cmd": ["tsc", "$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$"
}

class Student {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    Print() {

        alert(this.name + " is " + this.age + " years old !!");
    }
}

window.onload = () => {
    var stud1 = new Student("DJ", 33);
    stud1.Print();
};