Первая программа на TypeScript

Буду изучать TypeScript по официальной документации. Заодно напишу русский перевод.

Для начала нам нужно установить TypeScript. Предполагается, что вы уже знакомы с npm и умеете им пользоваться. Также предполагается, что вы уже освоили учебник HTML и учебник JavaScript. Для установки нужно выполнить команду:

npm install -g typescript

1	npm install -g typescript

Этой командой мы установили TypeScript с помощью npm глобально. Создадим файл «greeter.ts»:

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

function greeter(person) {

return "Hello, " + person;

}

var user = "Jane User";

document.body.innerHTML = greeter(user);

Мы создали файл с расширением «.ts», но на самом деле это обычный JavaScript код. При желании мы могли скопипастить его с существующего приложения.

Скомпилируем наш файл:

tsc greeter.ts

1	tsc greeter.ts

В результате мы получим файл «greeter.js» с тем же самым содержимым. Любой код JavaScript является корректным кодом TypeScript. Всё. Мы написали наше первое приложение на TypeScript.

Теперь добавим в код полезных штук из TypeScript. Для начала укажем, что параметр типа string:

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

function greeter(person: string) {

return "Hello, " + person;

}

var user = "Jane User";

document.body.innerHTML = greeter(user);

Для проверки, что переданные аргументы проверяются на совпадение с указанным типом передадим в функцию массив:

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

function greeter(person: string) {

return "Hello, " + person;

}

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

При компиляции с помощью tsc вы увидите ошибку:

greeter.ts(7,26): Supplied parameters do not match any signature of call target

1	greeter.ts(7,26): Supplied parameters do not match any signature of call target

Несмотря на ошибку файл JavaScript всё равно создаётся, но зато мы сразу видим, что с кодом что-то не так.

Теперь добавим в наш код интерфейсы. В TypeScript объекты считаются совместимыми, если они имеют совместимую внутреннюю структуру. Это позволяет не использовать ключевое слово implements:

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);

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 у конструктора автоматически создают свойства с указанными именами:

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);

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» и запустим наш код:

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head><title>TypeScript Greeter</title></head>

<body>

</body>

</html>

Откройте его в браузере и посмотрите на результат.

Назад | Учебник TypeScript | Вперёд

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Первая программа на TypeScript

Один комментарий к “Первая программа на TypeScript”

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