Что пишут на typescript

Вроде бы уже достаточно сложно, чтобы не изучать TypeScript? Но трудности еще не закончились!

Выразительность типовой системы TypeScript

В 2017 году на GitHub появилась запись, что типовая система TypeScript является Turing Complete. То есть на типах TypeScript можно написать машину Тьюринга:

Задумайтесь — выразительная способность типовой системы TypeScript настолько высокая, что она Turing Complete и позволяет писать любые программы просто на типах! Но что с этим может быть не так? Давайте рассмотрим очень простую функцию changeCase, которая в зависимости от флага low делает строчке либо LowerCase(), либо UpperCase():

function changeCase(value, low)

Это довольно очевидный способ написать функцию как в JavaScript, так и в TypeScript. Но можно сделать и так:

declare function changeCase(value: T, low: Q): Q extends true ? Lowercase : Q extends false ? Uppercase : string changeCase("FOO", true); //type "foo" changeCase("foo", false); //type "FOO"

Кажется, этот код невозможно прочесть, но идея в том, что когда мы передаем в нашу функцию значение true и какой-то строковый литерал, то на уровне типов мы получаем правильное итоговое значение. Задумайтесь! Мы не выполняем нашу функцию, но знаем, что она вернет для конкретной комбинации параметров (для флага true и для флага false).

Выразительность TypeScript позволяет делать просто умопомрачительные вещи. Вы можете не просто сказать, что функция вернет какое-то значение, а описать, что конкретно она будет возвращать даже для частных случаев.

Но есть нюанс. При попытке точно описать всё, что делает функция — мы легко можем попасть в ситуацию, когда в тайпингах какой-нибудь известной библиотеки (например, Styled Components) совершенно невозможно понять, что там происходит. Вот пример:

Здесь можно увидеть интерфейс ThemedStyledFunction, а в нем — набор generic параметров, которые выполняют совершенно непонятную функцию. Кроме того, интерфейс расширяет какой-то ThemedStyledFunctionBase.

Размотать эту цепочку и понять, что делает функция, практически невозможно без редактора, который хорошо поддерживает TypeScript. Кроме того, когда у нас не «срослись» типы, ситуация еще больше усугубляется. Для всего этого надо уметь ходить в декларации, по десяткам библиотек, которые друг друга наследуют и расширяют. В итоге мы уже не можем писать, как в старые добрые времена, на JS в каком-нибудь Sublime Text без языковой поддержки.

Конечно, мы сейчас говорим не про IDE, а про любой «умный» редактор, где есть языковой сервис. Например, это может быть Vim с поддержкой TypeScript Language Service.

Многие вещи всё ещё трудно выразить

Самое смешное, что несмотря на Turing-полноту, выразительность TypeScript все еще недостаточная, чтобы описать некоторые функции, которые есть в стандартной библиотеке JavaScript. Например, декларация Object.assign() выглядит в TypeScript 4.5 следующим образом:

assign(target: T, source: U): T & U; assign(target: T, source1: U, source2: V): T & U & V; assign(target: T, source1: U, source2: V, source3: W): T & U & V & W; assign(target: object, . sources: any[]): any;

Для двух, трех и даже четырех параметров мы еще возвращаем intersection, а для пяти уже сдаемся. В некоторых библиотеках можно увидеть до 90 таких сигнатур с разным количеством параметров. Здесь, как нельзя кстати подходит этот твит:

С типами мы пока закончили, переходим к другим сложностям.

Структурная типизация

Что такое структурная типизация? Это подход, при котором мы смотрим не на то, как называется тип или где он определяется, а на то, что он описывает внутри. Например, есть два интерфейса, которые определяют поле foo. Для TypeScript эти два интерфейса одинаковые, он не различает их в момент использования. Вы можете взять переменную одного интерфейса, присвоить в переменную другого, и всё будет работать:

interface Foo1 < foo: string >interface Foo2 < foo: string >let foo1: Foo1 = < foo: "text1" >; //ok let foo2: Foo2 = < foo: "text2" >; //ok foo1 = foo2; //ok

В TypeScript используется этот подход потому, что очень часто в JavaScript мы работаем с объектными литералами, которые не привязаны ни к какому типу. Довольно логично, что в таком случае, когда мы определяем просто объект с полем foo, то он может быть присвоен как первому интерфейсу, так и второму.

Перейдем к проблемам:

interface Foo < foo: string >interface Bar < bar: string >declare let foo: Foo; declare let bar: Bar; foo = bar;

Если присвоить две переменных из разных интерфейсов, то мы получим сообщение об ошибке:

Из-за структурной типизации мы уже не можем просто получить сообщение, что интерфейс Foo не совместим с интерфейсом Bar (или наоборот). Мы должны сказать, что одну переменную нельзя присвоить в другую, потому что в одном из интерфейсов не хватает какого-то поля, или в другом интерфейсе их слишком много. То есть нам нужно понимать внутреннюю структуру объекта и информировать о том, в каком именно месте типы не сошлись. Это легко, когда у нас вложенность первого уровня. Но если у нас вложенность на десятки, и тип не сошелся где-то очень глубоко, то выглядеть это может так:

Это реальное сообщение об ошибке, когда пользователь неправильно добавляет атрибут, при использовании Styled Components в TypeScript. Такое сообщение не только невозможно прочитать, но еще и не дает никакой информации о том, в чем именно проблема.

Структурная типизация для классов

Небольшой бонус: в TypeScript структурная типизация используется еще и для классов, и это просто магическая вещь. Например, у нас есть класс с полем foo:

class ClassFoo < foo?: number >function test(p: ClassFoo) < if (!(p instanceof ClassFoo)) < //p is never here console.log("hello never"); >>

Как работает компилятор для этого кода? Внутри функции TypeScript знает, что переданный параметр p имеет тип ClassFoo. С другой стороны, внутри instanceof он не должен быть ClassFoo. То есть мы никогда не сможем попасть внутрь этого блока кода. Исходя из этого TypeScript считает, что тип переменной p внутри блока — это never. Но невозможное возможно!

class ClassFoo < foo?: number >function test(p: ClassFoo) < if (!(p instanceof ClassFoo)) < //p is never here console.log("hello never"); >> test(<>); //prints “hello never”

За счет структурной типизации пустой объект все еще будет совместим на уровне типов с классом ClassFoo. Мы сможем передать его в эту функцию, где выводится сообщение «hello never» — чего, если верить типовой системе TypeScript никогда не должно случиться. Вот такая магия.

Анализ кода и Type Guard

Вы не обязаны проставлять типы повсеместно. Иногда TypeScript понимает сам, что в данном контексте после применения нескольких if-блоков у переменной будет правильный тип, и можно обращаться к свойствам этой переменной напрямую. Таких механизмов анализа в TypeScript довольно много, и это то, за что можно любить TypeScript. Подобные механизмы анализа есть и в Kotlin, а Java так не умеет.

Простой пример — есть код, мы его скомпилировали и получили ошибку:

Получили ошибку потому, что typeof null — это object. И компилятор TypeScript это знает.

Не очень опытные JS-разработчики могут не знать этого факта и допускать такие ошибки. А TypeScript знает и помогает написать более безопасный код. Посмотрим на другим примере, какие проблемы могут быть с таким анализом кода в TypeScript:

Какой тип у result: string или “bar” | “foo”? Видимо, string, раз в итоге ошибка компиляции. Но самое смешное — это то, как можно исправить эту проблему:

function rand(): "bar" | "foo"

Просто написали const вместо let — и все скомпилировалось! Теперь по мнению компилятора, очевидно, что тип у result будет “bar” | “foo”.

Спецификация?

Вопреки ожиданиям, спецификация TypeScript не поможет разобраться в сложных алгоритмах вывода типов (с использованием Control Flow / Data Flow) — спецификации просто не существует уже много лет. До версии 1.8 она еще была, но после этой версии разработчики выпускают только handbook. Потому что считают, что спецификация никому не нужна, а работы для ее поддержания в актуальном состоянии требуется очень много. Даже сам файл спецификации из репозитория перенесли в архив, чтобы люди не пытались его редактировать.

Теперь давайте пройдемся по этим же пунктам снова и попробуем понять, так ли всё плохо и можно ли эти проблемы решить.

Реальность: так ли всё плохо на самом деле?

Начнем с того, что наличие сложных типов в языке не обязывает вас использовать их. Но есть очень важный нюанс — вы должны знать типы, потому что иначе вы не поймете код в тех же библиотеках. Для примера можно посмотреть, насколько часто используются сложные типы в исходном коде TypeScript и тайпингах React (react.d.ts):

Типы

TypeScript

react.d.ts

Явно определяется тип, включая интерфейсы и все места, где после двоеточия стоит тип (включая вложенные)

Используется тип Conditional

То есть в репозитории TypeScript, на 67 000 определений с типами их 23, а здесь из 430 мест — целых 37!

Используется тип Mapped.

Хорошо иллюстрирует эту ситуацию твит от одного из создателей TypeScript:

Райан говорит, что проблема не с типовой системой TypeScript, а с экосистемой JavaScript: она настолько сложная, что ей требуются эти типы. А так — да, вас никто не заставляет их использовать при написании кода, при проектировании ваших API.

Тем не менее, типизация, если использовать ее аккуратно, делает любую функцию гораздо лучше. Например, наш замечательный пример с changeCase можно переписать следующим образом:

function changeCase (value: string, low: boolean): string

Она уже не будет так эффектно выводить типы, но это будет читаемый код.

С другой стороны, высокая выразительность типовой системы TypeScript подводит нас к очень важной идее: типовая система — это язык программирования. И к его использованию применяются соответствующие требования, как к обычному коду, который мы пишем. То есть мы должны делать его понятным, не должны делать over-engineering и т.д.

Тогда другим вариантом типизации функции changeCase будет явное прописывание нескольких вариантов сигнатур. Это уже чуть лучше, хотя всё еще не идеально. Для случаев true и false просто определяются отдельные сигнатуры, плюс мы пишем общую сигнатуру, которая получится в итоге, если мы не знаем тип:

function changeCase (value: TString, low: true): Uppercase function changeCase (value: TString, low: false): Lowercase function changeCase (value: string, low: boolean): string

Понятно, что это по-прежнему не очень читаемо, но уже гораздо лучше, чем двойной conditional тип, который был до этого.

TypeScript — это во многом про то, как надо и как не надо писать код, в также про соглашения и стиль написания кода. Конечно, многие вещи характерные для TypeScript можно реализовать на уровне каких-то конвенций: мы просто договариваемся внутри команды, что делаем явное приведение типов, не пишем какие-то конструкции и не присваиваем в переменную 10 разных типов, только чтобы ее переиспользовать, и т.д.

TypeScript позволяет это сделать более строго, и вам уже не нужно задумываться про такие мелочи. Вы будете знать, что на уровне TypeScript у вас уже есть некоторая строгость, которая определяет то, как ваша команда будет писать код.

Например, для JavaScript такой код будет абсолютно валидным:

console.log(Math.sin("3.1415"))

TypeScript скажет, что это неправильно:

Разработчики, которые только начинают писать код, могут быть не очень опытными и не совсем понимать, как писать правильно, а как писать нельзя. И TypeScript им сможет это подсказать.

Вернемся к случаю, когда тип переменной был не очень понятен. Использование const вместо let на самом деле — всего лишь трюк, о котором нужно знать. А правильное исправление — это добавлении типа:

function rand(): "bar" | "foo" < let result: : "bar" | “foo" = Math.random() < 0.5 ? "foo" : “bar"; return result;

Для TypeScript явное всегда лучше, чем неявное: когда мы говорим, что здесь используется конкретный тип, то мы сразу же убираем всю сложность, которую привносит неспецифицированный анализ типов в TypeScript.

На самом деле это касается и типов возвращаемых значений функций. Чтобы избавиться от всей магии, когда TypeScript начинает применять свои внутренние правила про то, как вывести и расширить тип литерала и т.д., можно просто указать явный тип. Читаемость кода значительно повысится за счет того, что люди будут знать, что эта функция возвращает.

Что касается редактора с языковой поддержкой, то он помогает решать огромное количество проблем, а сам процесс написания кода становится очень удобным. Потому что TypeScript даёт обратную связь в момент написания кода, а не в момент тестирования:

Конечно, сила TypeScript не только в этом, как мы уже увидели. Подсказки от редактора IDE могут значительно повысить продуктивность при написании кода. Да, мы чем-то пожертвовали: мы уже не можем писать код в блокноте. Но при этом мы выигрываем огромное количество времени просто за счет того, что редактор подсвечивает типы, говорит, что передавать в данную функцию и пр.

На заметку

О чем стоит помнить? Во-первых, что TypeScript — это индустриальный стандарт типизации. Текущее состояние JavaScript мира таково, что про типизацию — это TypeScript и ничто другое. Сейчас нет другого решения, которое бы позволило бы эффективно внедрить типизацию в проект. Можно, конечно, использовать какие-то контракты, конвенции или JSDoc для описания типов. Но все это будет гораздо хуже для читаемости кода по сравнению с типовыми аннотациями TypeScript. Они позволят не метаться вам глазами вверх-вниз, вы будете просто читать сигнатуру и тут же все понимать.

Второй момент — поддержка JavaScript в редакторах и IDE, как правило, базируется на TypeScript. Этот пункт очень нетривиален, но всегда забавно, когда говорят, что Visual Studio Code нормально писать на JavaScript и без TypeScript, что там и так всё работает. Потому что поддержка JavaScript во всех современных редакторах IDE строится на TypeScript! Поддержка JavaScript в VS Code реализована с помощью TypeScript Language Service. Поддержка JavaScript в WebStorm по большей части полагается на типовую систему TypeScript, и использует ее стандартную библиотеку.

Это наша реальность — вся поддержка JavaScript в редакторах строится поверх TypeScript. То есть нам в любом случае нужно изучать TypeScript. Потому что когда редактор говорит, что не сошлись типы в JavaScript, нам придется читать декларации из TypeScript.

Третий нюанс — Angular использует TypeScript как язык по умолчанию. Раньше у них на сайте можно было выбрать: «Покажи мне, как писать код на Angular в Dart (или в JS)». Но де-факто на Angular, кроме как c использованием TypeScript, никто не пишет. Если вы хоть раз пробовали писать на Angular без TypeScript — вы знаете, что это боль и страдание.

И наконец, TypeScript не заменяет другие инструменты повышения качества кода. TypeScript — это всего лишь один из инструментов, который позволяет вести какие-то конвенции в проекте и сделать так, чтобы были типы. Но вам все равно нужно писать тесты, делать код-ревью и уметь правильно проектировать архитектуру.

Выводы

• TypeScript имеет много проблем, но, по мнению Андрея, плюсы перевешивают, причем значительно.
• Вы не обязаны использовать TypeScript для каждого проекта. Если вы уже писали на TypeScript, то вы будете точно также хорошо писать код на JavaScript — у вас уже есть шаблон, как делать правильно, а как — нет. Это понимание приходит с опытом, после чего можно довольно гибко выбирать, где использовать TypeScript, а где нет.
• Но если вы создаете внешнюю библиотеку, то у вас нет выбора: люди будут ее использовать в том числе с TypeScript. Для этой библиотеки должны быть типовые декларации. Единственный нормальный способ их получить — это написать библиотеку на TypeScript. Точно такая же ситуация, если вы делаете какой-то npm-пакет, которым будут пользоваться другие люди.

Профессиональная конференция фронтенд-разработчиков FrontendConf 2022 пройдет 7-8 ноябре в Сколково, Москва. Уже можно забронировать билеты и купить записи выступлений с прошедшей конференции FrontendConf 2021.

До 22 мая все еще открыт CFP, и, если вы хотите выступить, то подумайте об этом — Программный комитет ждет ваши заявки. Чтобы помочь вам развеять сомнения или уточнить тему для выступления — 28 апреля в 19:00 Программный комитет проводит онлайн-встречу. Регистрируйтесь и приходите, чтобы всё обсудить и понять, как лучше «упаковать» вашу тему!

• frontend
• typescript
• javascript
• разработка сайтов
• структурная типизация
• типы TypeScript
• программирование
• веб-разработа
• turing-complete
• turing-completeness

• Блог компании Конференции Олега Бунина (Онтико)
• Веб-разработка
• JavaScript
• Программирование
• TypeScript

TypeScript: понятное руководство для новичков

TypeScript — это язык программирования для разработки современных веб-приложений, расширяющий возможности уже традиционного JavaScript. В своей статье редакция highload.today разобралась, что такое TypeScript, какими он обладает преимуществами и особенностями.

Курс UI/UX для геймдеву.

Під час навчання ви розробите проекти для портфоліо, що складається з 5 ключових аспектів UX/UI-дизайну, та отримаєш необхідні навички для професійного росту.

1. Что такое TypeScript?

TypeScript — это язык со статической типизацией на основе JavaScript. Он создан в 2012 году в компании Microsoft. Разработкой TypeScript занимался Андрес Гейлсберг (тот самый, который был ведущим архитектором C# и Delphi, а также создал Turbo Pascal).

TypeScript — это JavaScript с дополнительными возможностями

Строгая типизация

Для переменных и других структур данных можно объявить определенный тип, например, строковый или булевский, и TypeScript будет проверять, допустимые ли значения им присваиваются. Это невозможно сделать в JavaScript, в котором типизация нестрогая.

В TypeScript можно явно указать тип переменной. Когда тип переменной определен, ей невозможно присвоить значение, которое относится к другому типу.

Курс Project Manager.

Впроваджуйте покроковий алгоритм управління проєктами вже зараз. У цьому вам допоможе Павло Харіков — Head of IoT у Veon Group (Kyivstar).

Число остается числом

Расширенные возможности ООП

В TypeScript реализованы дополнительные возможности ООП, такие как интерфейсы, поля объекта и модификаторы доступа.

Интерфейс определяется с помощью ключевого слова interface .

// Определить интерфейс домашнего животного interface IPet < name: string, species: string, breed: string, speak: () =>string > // Создать пса var dog:IPet = < name: "Ritchie Blaсkdog", species: "dog", breed: "hellhound", speak: ():string => >

Поля и модификаторы доступа:

class User < // Поля будут приватными private name: string; private password: string; constructor(name: string, password: string)< this.name = name; this.password = password; >// Доступ для чтения открыт public get Name(): string < return this.name; >public get Password(): string < return this.password; >>

2. Отличия TypeScript от JavaScript

JavaScript создан для написания небольших сценариев веб-страниц. Чем крупнее приложение, тем более громоздким становится код на JS.

Поэтому был создан TypeScript, который упрощает разработку широкомасштабных приложений.

Из-за нестрогой типизации в JavaScript многие ошибки видны только во время выполнения. Это неудобно и, в конце концов, неприятно. Приходится тратить много времени на поиск таких ошибок.

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

Ошибки видны во время разработки

В TypeScript реализована поддержка интерфейсов и модификаторов доступа, обобщений, модулей, пространств имен и окружений ( ambients ). В JavaScript этого нет.

Код JavaScript — интерпретируемый язык. Он воспринимается браузерами напрямую. TypeScript компилируется в JavaScript.

Курс Frontend.
Онлайн курс з працевлаштуванням, ставай суперніндзя, який може з нуля створити сайт.

3. Установка TypeScript

Осваивать язык программирования лучше всего на практике. Для тестирования небольших фрагментов кода существует TypeScript Playground. Здесь вы можете набирать код, просматривать ошибки, журнал, код JavaScript, в который скомпилирован ваш код на TypeScript, настраивать среду по своему усмотрению, экспортировать код и скопировать ссылку, чтобы поделиться им.

Бонус — код копируется с форматированием.

Удобная «игровая площадка» для знакомства с TypeScript и тестирования сниппетов

Для разработки проектов вам понадобится установить компилятор TypeScript. Его можно установить с помощью менеджера зависимостей для Node.js: npm, yarn или pnpm.

Предположим, что Node.js и менеджер зависимостей npm установлены. Создадим папку проекта и в командной строке запустим такую команду:

npm install typescript --save-dev

С помощью этой команды установки создается локальная копия TypeScript в папке проекта. Для рабочих проектов рекомендуется использовать именно такую установку.

Можно установить TypeScript и глобально:

npm install -g typescript

В этом случае команда tsc будет доступна в любом расположении. Глобальную установку можно использовать для одноразовых испытаний.

4. Как работает TypeScript?

Теперь проверим установку. В этой же папке создадим файл dog.ts (файлы TypeScript имеют расширение ts ).

Добавим в него код из примера про пса, который приведен выше, и сохраним файл. В командной строке введем:

npx tsc dog.ts

После выполнения команды получим файл dog.js с таким кодом:

Це хороший спосіб розвитку вашої кар'єри в IT-індустрії. Після проходження курсу Mate гарантує вам офер мрії.

// Создать пса var dog = < name: "Ritchie Blaсkdog", species: "dog", breed: "hellhound", speak: function () < return "Woof! Woof-woof-woof!"; >>;

С помощью Deno можно выполнять файлы TypeScript прямо в консоли. Добавим в файл dog.ts такую строку:

console.log(`$ says $`)

deno run dog.ts

И получим результат:

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

Объявление типов

В TypeScript можно объявить переменную четырьмя способами: с указанием типа и значения, с указанием только типа, с указанием только значения — и без типа, и без значения.

// Объявить тип и значение в одном операторе. var amount:number = 10000.00; /* Объявить тип, не присваивая значения. По умолчанию переменной будет присвоено значение undefined. */ var amount:number; /* Объявить значение, не задавая тип. Переменная получит тип присвоенного значения. */ var amount = 10000.00; /* Не указывать ни типа, ни значения. В этом случае переменная получит тип any и значение undefined. */ var amount;

После того как объявлен тип переменной, ей невозможно присвоить значение другого типа.

Тип остается тем же, который был задан

Но если, все-таки, необходимо изменить тип переменной, то можно воспользоваться утверждением типа ( type assertion ). Для этого нужно заключить требуемый тип в символы < >и поместить перед переменной или выражением.

var x = '1' var y:number =  x console.log(typeof(y))

Приведенный выше код выведет в консоль строку « string ».

Рассмотрим типы данных, определенные в TypeScript.

Any

Тип any — это надтип для всех типов в TypeScript, динамический тип. Его использование подразумевает отказ от проверки типа переменной.

Встроенные типы

В приведенной ниже таблице перечислены встроенные типы TypeScript и даны их описания.

Пользовательские типы

В приведенной ниже таблице перечислены пользовательские типы TypeScript и даны их описания.

Литералы типов

Типами в TypeScript могут быть не только строки вообще ( string ) или числа вообще ( number ). Конкретное число или конкретная строка тоже может быть типом. Например, типом может быть « 8 », а может быть « красный ». Если переменная объявлена с литералом типа, то она не может принимать никакие другие значения.

Рассмотрим это на примере кода:

let red:"красный" = "красный"; red = "красный"; red = "зеленый";

При попытке его скомпилировать получим ошибку:

И для чего же нужна переменная с уникальным типом и единственным значением?

Сама по себе она не особо полезна. Дело в применении.

Например, в CSS есть свойства, которые принимают лишь несколько определенных значений. Свойство alignment может принимать значения left, right или center .
Если объединить литералы типов left, right и center (которые объявлены как строки) в union , то получим двойную пользу:

• будут приниматься лишь допустимые значения;
• они будут передаваться в виде строк, которые можно вставить в код (не нужно ветвление, чтобы сопоставить значения из объединения со строковыми значениями).

Наглядно это будет выглядеть так:

function setText(msg: string, alignment: "left" | "right" | "center") < // . >setText("Готово!", "left"); setText("Ошибка!", "bottom");

Компилятор не дает ошибиться:

Шаблоны литералов типов

Шаблоны — это надстройка над литералами типов. Благодаря объединениям они могут разворачиваться во множество строк без необходимости в циклах.

В шаблонах литеральных типов используется тот же синтаксис, что и в шаблонах литералов строк JavaScript, но с указанием типов, а не переменных.

Если же тип определен в виде объединения, то типу присваивается каждый возможный литерал из комбинаций членов объединения.

Если добавить еще один критерий, например, валюту, то будет создано множество из всех возможных комбинаций.

То есть, весь список значений для этого типа будет таким:

type cardsByCurrencies = "USD_prepaid_visa" | "USD_prepaid_mastercard" | "USD_credit_visa" | "USD_credit_mastercard" | "EUR_prepaid_visa" | "EUR_prepaid_mastercard" | "EUR_credit_visa" | "EUR_credit_mastercard"

Необходимо также заметить, что и в литералах типов, равно как и в шаблонах, может использоваться вывод типов. Подробнее см. в документации.

Классы

TypeScript — это объектно-ориентированный JavaScript. Он поддерживает классы, интерфейсы и т. п. TypeScript получил поддержку классов от ES6.

Объявление класса

Для объявления класса используется ключевое слово class .

class User < // Область видимости класса >

Приведенный выше код компилируется в такой код JavaScript.

var User = /** @class */ (function () < function User() < >return User; >());

Приведем пример объявления класса с полями, конструктором и функцией.

class Person < // Поле firstName: string; lastName: string; // Конструктор constructor(firstName:string, lastName: string) < this.firstName = firstName; this.lastName = lastName; >// Функция logFullName(): void < console.log(`$$`); > >

На JavaScript этот код будет выглядеть так:

var Person = /** @class */ (function () < // Конструктор function Person(firstName, lastName) < this.firstName = firstName; this.lastName = lastName; >// Функция Person.prototype.logFullName = function () < console.log("".concat(this.firstName, " ").concat(this.lastName)); >; return Person; >());

Создание экземпляра класса

Экземпляр класса в TypeScript создается с помощью ключевого слова new .

var p = new Person('Mickey', 'Mouse');

Доступ к полям и функциям

Для обращения к полям и функциям используется запись с точкой.

p.firstName; p.logFullName();

Сведем все воедино:

class Person < // Поле firstName: string; lastName: string; // Конструктор constructor(firstName:string, lastName: string) < this.firstName = firstName; this.lastName = lastName; >// Функция logFullName(): void < console.log(`$$`); > > var p = new Person('Mickey', 'Mouse'); console.log(`Имя: $`); console.log(`Фамилия: $`); console.log('Полное имя:'); p.logFullName();

var Person = /** @class */ (function () < // Конструктор function Person(firstName, lastName) < this.firstName = firstName; this.lastName = lastName; >// Функция Person.prototype.logFullName = function () < console.log("".concat(this.firstName, " ").concat(this.lastName)); >; return Person; >()); var p = new Person('Mickey', 'Mouse'); console.log("\u0418\u043C\u044F: ".concat(p.firstName)); console.log("\u0424\u0430\u043C\u0438\u043B\u0438\u044F: ".concat(p.lastName)); console.log('Полное имя:'); p.logFullName();

Как видите, если вы знакомы с ООП и JavaScript, все довольно просто.

Пространства имен

Пространства имен — это способ логической группировки взаимосвязанного кода. Это встроенная возможность TypeScript. В JavaScript пространства имен отсутствуют, поэтому может возникнуть конфликт имен, если в нескольких файлах встретятся переменные с одним и тем же именем.

Пример

var text = "Text from scr1.js"; console.log(text);

var text = "Text from scr2.js"; console.log(text);

Первым импортируется файл scr1.js , вторым — scr2.js , поэтому вложенный сценарий, объявленный после импорта двух внешних, получит переменную text со значением, которое присвоено в scr2.js .

TypeScript устраняет этот недостаток за счет пространств имен. Термин «пространство имен» введен в TypeScript 1.5. До этой версии в TypeScript были внутренние и внешние модули. Теперь внутренние модули называются пространствами имен, а внешние — просто модулями.

Для определения пространства имен используется ключевое слово namespace. Классы и интерфейсы, к которым будут обращаться извне модуля, необходимо пометить ключевым словом export .

namespace MyNameSpaceName < export MyClassName < >export IMyInterfaceName < >>

Для доступа к классу или интерфейсу, которые находятся в другом пространстве имен, используется запись с точкой: namespaceName.className .

Если пространство имен находится в другом файле, то необходимо указать ссылку на этот файл, используя запись с тремя косыми чертами:

Объявим переменные с одним и тем же именем в разных пространствах имен.

namespace Animals
namespace People

/// /// console.log(People.count); console.log(Animals.count);

Скомпилируем эти файлы в код JavaScript. Для этого передадим команде tsc параметр --outFile , за которым указывается имя целевого файла JavaScript, а затем перечисляются файлы TypeScript.

npx tsc --outFile howmany.js howmany.ts animals.ts people.ts

Получим следующий код JavaScript:

var People; (function (People) < People.count = 3; >)(People || (People = <>)); var Animals; (function (Animals) < Animals.count = 12; >)(Animals || (Animals = <>)); /// /// console.log(People.count); console.log(Animals.count);

Соответственно, результаты вывода значения count будут разными: 3 и 12.

У пространств имен в TypeScript есть такие возможности:

• пространство имен можно расположить в отдельном файле, который подключается с помощью ссылки;
• пространства имен можно вкладывать друг в друга. Вложенные пространства имен помечаются ключевым словом export;
• в одном файле можно объявить несколько пространств имен;
• пространство имен можно разбить на несколько файлов, приводя ссылку на основной файл в каждом дополнительном;
• чтобы не набирать долгие пути к классам, можно объявить псевдоним импортируемого класса. Например, если у нас есть пространство имен Data , в которое вложено пространство имен Animal с классом Dog , то псевдоним можно объявить так: import dog = Data.Animal.Dog . Тогда можно будет обращаться к полям и методам этого класса через префикс dog .

Модули

Модули помогают упорядочить код, написанный на TypeScript. До TypeScript 1.5 модули делились на внутренние и внешние. С версии 1.5 внутренние модули называются пространствами имен, а внешние — собственно модулями.

Модулем считается любой файл с импортом или экспортом на высшем уровне. Модули выполняются в собственной области видимости.

Файл без импорта и экспорта на высшем уровне считается сценарием, чье содержимое доступно в глобальной области видимости.

Чтобы интерфейс, класс, переменную или функцию можно было использовать в другом файле, перед объявлением добавляется ключевое слово export (как это делалось в примере с пространствами имен). Но вместо того, чтобы добавлять его к каждому объявлению, можно использовать более простую и наглядную запись, объединяя классы, интерфейсы и т. п.:

export < Dog, move >;

Модуль импортируется с помощью ключевого слова import :

import < Dog, move >from "./myfile.js";

При импорте можно указывать псевдонимы с помощью ключевого слова as (его также можно использовать для создания псевдонима при экспорте):

import < Dog, move as myMove >from "./myfile.js";

Можно импортировать модуль целиком в одно пространство имен:

import * as mymodule from "./myfile.js";

В конце концов, можно указать один класс как экспортируемый по умолчанию. Для этого после слова export указывается слово default . При этом данный класс будет импортироваться по умолчанию, даже если в операторе импорта указан псевдоним.

Совместимость с JavaScript. Окружение (Ambient)

JavaScript — это подмножество TypeScript. Казалось бы, если в сценарии TS есть код JS, то компилятор TypeScript примет его без проблем. Это справедливо, если код JavaScript написан с учетом безопасности с точки зрения типов.

Другое дело, если вы используете большие библиотеки JS или сторонние, например jQuery, Node.js или AngularJS (именно AngularJS, потому что библиотека Angular написана на TypeScript). Чтобы обеспечить безопасность типов и ввод с автодополнением ( intellisense ), TypeScript-программисту придется приложить нечеловеческие усилия.

Объявления окружения ( ambient ) помогают беспроблемно встраивать библиотеки JS в TypeScript. Определения окружений по соглашению помещаются в файл определения типов в расширением d.ts , например ThirdPartyLib.d.ts . Этот файл не компилируется в JavaScript.

Переменные и модули определяются так:

declare module Module_Name < export class SomeClass< doSmth(times:number) : number; >>

В файле окружения нет реализации. В нем объявляются типы. Затем они включаются в файл TypeScript следующим образом:

В результате при попытке передать функции doSmth строковое значение будет выдано сообщение об ошибке — еще во время компиляции.

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

6. Пишем приложение на TypeScript

Создадим приложение для предварительного просмотра сообщений. Сообщения будут делиться на три вида: информационные, предупреждения и сообщения об ошибке. В зависимости от выбранного типа сообщения меняется его стиль.

Создадим файл с полями для указания заголовка, текста и типа сообщения, а также с родительским элементом для его просмотра. Просмотр измененного сообщения будет доступен по нажатию кнопки.

        
Сообщения
 
 
Заголовок
 
Текст
 Текст сообщения 
 
Тип
 Сообщение Предупреждение Ошибка  
 Показать 
 
 
Заголовок
 
Текст сообщения
 
 
  

Настроим внешний вид элементов. Стиль элементов будет состоять из двух частей: типа ( error|warning|info ) и назначения: заголовка и тела сообщения.

body < font-family: Verdana, sans-serif; color: #336699; >div < margin: 5px; padding: 5px; >.param < width:300px; display: inline-block; float: left; background-color: #336699; color: #ffffff; border-radius: 10px; >.result < display: inline-block; float: left; width: 300px; background-color: #ffffff; color: #336699; border: 1px solid #003366; border-radius: 10px; >.message < border: 1px solid; border-radius: 10px; padding: 0px; >.header < font-weight: bold; font-size: larger; >.body < font-style: italic; >.info < color: #009900; border-color: #009900; >.warning < color: #FF8C00; border-color: #FF8C00; >.error

По нажатию кнопки будем менять весь стиль элемента разом. Поскольку из скрипта можно менять только его отдельные свойства, заменим весь innerHTML элемента result . Для каждого элемента укажем класс, подставив литеральный тип перед идентификатором класса назначения элемента.

// Типы сообщений помещаем в объединение type msgTypes = "info" | "warning" | "error"; // Части сообщения тоже помещаем в объединение type msgParts = "header" | "body"; class Message < header: string; body: string; type: msgTypes; constructor(header: string, body: string, type: msgTypes) < this.header = header; this.body = body; this.type = type; >insert(resultElement: HTMLElement) : void < // Поскольку тип определен как строковой литерал, // включаем его в строку без проблем resultElement.innerHTML = `
$ 
$
 `; > > function updateMessage() < // Получаем значения элементов в соответствии с типами const header = (document.getElementById("header") as HTMLInputElement).value; const body = (document.getElementById("body") as HTMLInputElement).value; const type = (document.getElementById("type") as HTMLSelectElement).value; // Настраиваем сообщение let msg = new Message(header, body, type as msgTypes); msg.insert(document.getElementById("result")); >

Это приложение не столько полезно с точки зрения функциональности, сколько наглядно с точки зрения знакомства с некоторыми рассмотренными здесь возможностями TypeScript: типами, объединениями, шаблонами литералов типов.

После компиляции получим такой код:

var Message = /** @class */ (function () < function Message(header, body, type) < this.header = header; this.body = body; this.type = type; >Message.prototype.insert = function (resultElement) < resultElement.innerHTML = "
").concat(this.header, "
\n 
").concat(this.body, "
\n