search

g1er / Andrew

0 stars 0 forks source link

Инсталяция Typescript #15

Open IgorKulishov opened 6 years ago

IgorKulishov commented 6 years ago

Typescript

Итак мы начинаем изучать язык Typescript - язык программирования для многих JS фреймфорков в том числе Angular, React, Node.js (back end).

Typescript - это язык разработки, который используется только в среде разработки (в редакторе которым пользуется программист) и непосредственно перед использованием / для использования исходный код Typescript программы перекомпелируется специальным Typescript компелятором в JavaSript (причем опционально на выбор как в классический ES5 так и ES6) для дальнейшего использования в браузере.

В этом задании нам надо будет установить среду разработки и и компилятор с typescript в javascript, а так же проделать небольшое практическое задание по компелации ts в js.

TypeScript это открытый (opensource) язык, который был разработан и поддерживается командой Microsoft. Синтакс похож на объектно-ориентированные языки такие как Java, C++, что позволяет програмистам быстро осваиваивать.

Однако внутри файла typescript можно использовать превычный синтакс от JavaScript ES5 / ES6 и естественно он так же будет работать.

TypeScript похож на ES6 по синтаксису, но имеет более объектно-ориентированный синтакс.

Целью создания является - возможность использовать / применить объектно-ориентированный синтаксиса при разработке / написании ПО, что позволяет программистам использовать синтакс как для написания front-end так и back-end. После завершения написания кода, производится компелиция кода в понятный для браузера JavaScript формат для уже для размещения на сайте в формате JavaScript.

Ты уже ознакомился в предыдущих главах с основами объектно-ориентированного синтаксиса JavaScript ES6.

На сегодня TypeScript используется в языках и фреймворках Angular, React (front-ent), так и JS языке back-end - Node.js. На сегодня многие framework начали использовать TypeScript для написания программ.

Файлы носят расширение *.ts (app.ts) компилируются в app.js

Что еще кроме синтаксиса дает TypeScript. Дело в том что TypeScript как и любой объектно-ориентированный язык является более строгим языком, где надо заранее определить тип переменнной (String, Number, Boolean), это правило хорошего тона, то чего не надо делать в JavaScript (в JavaScript переменная может быть string, number, boolean, например в JS возможно: 

var test = 123; test = false;

но это не есть правило хорошего тона в TypeScript как и во всех ОО языках).

Что это дает что в ОО языках надо заранее определить тип переменной - если в большой программе ты определишь переменную как String а будешь пытаться передать (прировнять) значение из другого модуля программы значение переменной определенное как Number, то сама среда разработки (программа в которой ты пишешь код сразу даст тебе сообщение об ошибке о том что переменные разные по типу). Возможно для небольших программ разница не ощущается, однако для больших программ это позволяет предотвратить ошибку на этапе программирования, а не на этапе работы программе в произвостве).

Что нам понадобиться в данной теме:

1. Установить среду разработки:

Самым распростаненной средой разработки для TypeScript является Visual Studio Code (VSC) (разработанный Microsoft - free - opensource)

Он бесплатный в отличии от Visual Studio 2017 (by Microsoft).

Ссылка для скачивания и установки на https://code.visualstudio.com/

Примечание: есть плагины для почти всех существующих сред разработки, включая тот который ты использовал - sublime text. Но я все таки прошу установить visual studio code для того что бы была полная поддержка и кроме того я не пробовал еще и не сравнивал возможности плагинов для sublime text.

2. Установить компилятор typescript в javascript (или просто компилятор).

Для того что бы установить компилятор глобально на компе так что он будет доступен в любой папке любого проекта надо будет открыть командную строку в любом месте и набрать в командной строке

npm install -g typescript

Для проверки установки набери в командной строке: tsc -v

3. Практические занятия по компеляции.

Ссылка на источник : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html Я буду делать тоже самое ниже.

А) создай папку проекта Б) создай файл в папке с раширением ts: например app.ts

Опционально, тоже самое можно делать в редакторе VSC. а) открой редактор VSC который ты установил б) создай в нем новый файл путем навигации File>New File и нажми сохранить (Ctrl+S), набери название и выбери в меню тип файла как TypeScript и сохрани.

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

В) Набери скопируй код ниже в формате ES5 в файл app.ts:

как мы уже говорили ES5 / ES6 код может быть внутри TS файла

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Г) Компелируем в командной строке app.ts в app.js при помощи команды:

tsc app.ts

После того как введешь операцию можно увидеть что в папке проекта появится второй файл с тем же названием, но расширением *.js т.е. в нашем примере мы увидем app.js

В данном примере мы не применили синтаксис TypeScript но попрактиковались с компелятором.

В последующих главах мы займемся синтаксисом TypeScript.

g1er commented 6 years ago

Я сделал 1 и 2 процедуры: установил VSCode и компилятор(version 2.8.1). Да, этот редактор проигрывает по встроенному функционалу Sublime, поэтому пришлось установить дополнительные расширения для удобства, чтобы настроить примерную привычную рабочую среду. Установил следующее:

g1er commented 6 years ago

Готово, перекомпилировал app.ts через командную строку. Подтверждаю, появился второй файл с расширением js. Перехожу в след тему