Назад | Учебник TypeScript | Вперёд
Буду изучать TypeScript по официальной документации. Заодно напишу русский перевод.
Для начала нам нужно установить TypeScript. Предполагается, что вы уже знакомы с npm и умеете им пользоваться. Также предполагается, что вы уже освоили учебник HTML и учебник JavaScript. Для установки нужно выполнить команду:
1 |
npm install -g typescript |
Этой командой мы установили TypeScript с помощью npm глобально. Создадим файл «greeter.ts»:
1 2 3 4 5 6 7 |
function greeter(person) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user); |
Мы создали файл с расширением «.ts», но на самом деле это обычный JavaScript код. При желании мы могли скопипастить его с существующего приложения.
Скомпилируем наш файл:
1 |
tsc greeter.ts |
В результате мы получим файл «greeter.js» с тем же самым содержимым. Любой код JavaScript является корректным кодом TypeScript. Всё. Мы написали наше первое приложение на TypeScript.
Теперь добавим в код полезных штук из TypeScript. Для начала укажем, что параметр типа string:
1 2 3 4 5 6 7 |
function greeter(person: string) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user); |
Для проверки, что переданные аргументы проверяются на совпадение с указанным типом передадим в функцию массив:
1 2 3 4 5 6 7 |
function greeter(person: string) { return "Hello, " + person; } var user = [0, 1, 2]; document.body.innerHTML = greeter(user); |
При компиляции с помощью tsc вы увидите ошибку:
1 |
greeter.ts(7,26): Supplied parameters do not match any signature of call target |
Несмотря на ошибку файл JavaScript всё равно создаётся, но зато мы сразу видим, что с кодом что-то не так.
Теперь добавим в наш код интерфейсы. В TypeScript объекты считаются совместимыми, если они имеют совместимую внутреннюю структуру. Это позволяет не использовать ключевое слово implements:
1 2 3 4 5 6 7 8 9 10 11 12 |
interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = { firstName: "Jane", lastName: "User" }; document.body.innerHTML = greeter(user); |
Теперь добавим туда класс с помощью ключевого слова class и объявим один конструктор. Ключевые слова public у конструктора автоматически создают свойства с указанными именами:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user); |
Скомпилируйте этот код и посмотрите, что получилось в JavaScript-е. Вы увидите самое обычное прототипное ООП. Классы TypeScript — это всего лишь более классический способ создания классов для ООП, который при компиляции превращается в обычное прототипное ООП.
Теперь создадим файл «greeter.html» и запустим наш код:
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html> |
Откройте его в браузере и посмотрите на результат.
Назад | Учебник TypeScript | Вперёд
You should not learn TypeScript before you understand the true power of Pure JavaScript