В 2012 г. была официально выпущена версия 0.8 TypeScript — языка с открытым исходным кодом, поддерживаемого командами Microsoft. С тех пор TypeScript сильно развился, чтобы занять значительное место среди веб-разработчиков, но не только. Теперь, когда TypeScript поддерживается node.js , нередко можно увидеть серверные проекты, разработанные на этом языке.
Как вы наверняка читали во многих местах, TypeScript — это то, что называется надмножеством (или надмножеством) JavaScript, наиболее широко используемого языка в Интернете сегодня, и для уважительная причина, он используется только браузерами (конечно, за исключением HTML и CSS). Это указывает на то, что все, что написано на JavaScript, будет работать на TypeScript, и любая библиотека или библиотека JavaScript (Angular, React, JQuery и т. д.) будет использоваться с TypeScript. Так зачем возиться с пальто?
Что такое TypeScript?
Чтобы понять полезность TypeScript, вы уже должны знать ограничения JavaScript и причины, побудившие команду Microsoft создать такой компонент, как TypeScript. JavaScript — это прежде всего легкий однопоточный язык сценариев. Он интерпретируется версией движка JavaScript, присутствующей в браузере, в котором он выполняется. Сначала предполагалось добавить мультимедийные функции на веб-страницу, проверку формы или анимацию. В настоящее время мы очень далеки от языка, допускающего ООП (объектно-ориентированное программирование), здесь мы работаем с объектами, и единственное понятие наследования — через прототипы. Затем код становится очень трудно поддерживать в крупномасштабных проектах. Такие библиотеки, как JQuery, позволили решить некоторые проблемы, но управление ошибками во время выполнения всегда было сложным для исправления. То же самое касается таких фреймворков, как Angular или React.
Хотя стандартизация JavaScript появилась с ECMAScript, чтобы ограничить вариации интерпретации навигаторами, за ней не сразу последовали те. Это немного менее верно сегодня с более регулярным применением стандартов, тем более, что мы можем создавать серверный JavaScript благодаря node.js. Но пробел остается. Здесь на помощь приходит TypeScript.
TypeScript позволяет создавать объектно-ориентированный код, который можно встретить в скомпилированном коде, таком как Java или C#. Бэкэнд-программист будет меньше теряться в вседозволенности интерпретации JavaScript. Таким образом, статическая типизация кода позволит избежать многих ошибок благодаря улучшенной интеграции TypeScript в среды разработки, такие как, например, Visual Studio Code, и особенно через компиляцию кода. Наконец, мы должны скорее сказать транскомпиляция, потому что созданный код TypeSript в конечном итоге преобразуется в JavaScript, поскольку браузеры не имеют возможности интерпретировать TypeScript. Тогда вполне возможно использовать последние достижения ECMAScript и транскомпилировать их в формат, читаемый старыми браузерами, в данном случае ECMAScript 5 или ES5. Компилятор TypeScript отвечает за предоставление библиотек JavaScript или полифилов, позволяющих выполнить эту операцию.
Как работает TypeScript?
Что вам нужно понять, так это то, что TypeScript способствует разработке в безопасной и строго типизированной среде, что позволяет вам легче выявлять ошибки перед компиляцией кода в JavaScript. Таким образом, код JavaScript, предоставленный для среды выполнения, априори более подвержен ошибкам, чем ваш код TypeScript, но на самом деле код, который вы создали с помощью TypeScript, укрепит ваш код JavaScript. Кроме того, ваша IDE уведомит вас об ошибках перед транскомпиляцией, а транскомпиляция проверит правильность созданного кода.
Возьмем пример класса TypeScript, который возвращает в консоль сообщение Hello, World! :
HelloWorld.ts
interface IHelloWorld {
write(name: string): void;
}
class HelloWorld implements IHelloWorld {
constructor(private prefix = 'Hello') {}
public write(name: string): void {
console.log(this.build(name));
}
private build(name: string): string {
return this.prefix + ', ' + name + '!';
}
}
const callFn = (hw: IHelloWorld) => {
hw.write('World');
};
callFn(new HelloWorld());
Здесь мы описываем интерфейс IHelloWorld, унаследованный классом HelloWorld, который ожидает метод write. Затем этот класс создается с помощью метода вызова callFn. Здесь мы находим классическую структуру объектно-ориентированного программирования. После компиляции кода в ECMAScript 5 компилятором TypeScript мы получаем следующий код:
HelloWorld.js
"use strict";
var HelloWorld = /** @class */ (function () {
function HelloWorld(prefix) {
if (prefix === void 0) { prefix = 'Hello'; }
this.prefix = prefix;
}
HelloWorld.prototype.write = function (name) {
console.log(this.build(name));
};
HelloWorld.prototype.build = function (name) {
return this.prefix + ', ' + name + '!';
};
return HelloWorld;
}());
var callFn = function (hw) {
hw.write('World');
};
callFn(new HelloWorld());
tsconfig.json
Компилятор можно настроить с помощью файла конфигурации в формате JSON с именем tsconfig.json. Таким образом, вы можете указать, под какой версией JavaScript вы хотите транскомпилировать код, активировать дополнительные строгие проверки и линтеры или даже выбрать, какая библиотека используется для модульного управления.
Пример файла конфигурации:
tsconfig.json
{
"compilerOptions": {
"target": "ES2015",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Recommended"
}
Все доступные опции вы можете найти в официальной документации по TypeScript.
Еще один интересный момент: команды Microsoft сделали доступной веб-страницу, позволяющую компилировать код TypeScript на лету, играя с параметрами файла tsconfig.json. Вы можете поэкспериментировать с кодом HelloWorld выше и изменить параметры конфигурации, чтобы увидеть результаты.
Надежен ли компилятор?
Да, Microsoft проделала большую работу, но компилятор можно легко обмануть, если разработчик пишет код неправильно. Возьмем конкретный пример:
class Animal {}
class Dog extends Animal { legs: number = 4; }
class Cat extends Animal { wild: boolean = true; }
function addToCollection(animals: Animal[], animal: Animal) {
animals.push(animal);
}
const dogs: Dog[] = [];
addToCollection(dogs, new Dog());
addToCollection(dogs, new Cat());
console.log(dogs);
В этом примере мы добавляем объект Catв коллекцию объектов Dog. Можно подумать, что компилятор TypeScript предупреждает нас об этой проблеме. Мало того, что код компилируется, мы также получаем объект Catв нашей коллекции. На самом деле это не ошибка TypeScript, а то, как воспринимается добавление, поскольку на самом деле Dog и Cat оба наследуются от класса Animal, и это действительно набор объектов Animal, ожидаемый машинописью. Если мы явно хотим, чтобы это была коллекция определенного типа, мы должны изменить функцию addToCollection следующим образом:
function addToCollection<T extends Animal>(animals: T[], animal: T) {
animals.push(animal);
}
На этот раз IDE должна показать вам опечатку вашей коллекции. Вы можете весело провести время, поэкспериментировав с этим кодом на странице Игровая площадка TypeScript, чтобы увидеть, как реагирует TypeScript.
Разработчик также может злоупотреблять типом any, намеренно опуская тип объекта для передачи в функцию, но это противоречит философии, предлагаемой TypeScript. К счастью, этому можно легко противостоять, применив управляющий параметр в файле конфигурации компилятора и тем самым заставив разработчика не использовать этот тип.
Как использовать TypeScript?
Чтобы начать проект на TypeScript, сначала необходимо установить node.js.
Заключение
Для разработчика, пришедшего из мира BackEnd, TypeScript — идеальный инструмент для понимания FrontEnd-разработки, а также для разработки под Node.js. Разработчик будет находиться в известной и безопасной среде. Для разработчика JavaScript это возможность протестировать объектно-ориентированный типизированный язык. Переход будет более сложным, потому что разработчик JavaScript, вероятно, не привык к тому, чтобы его контролировали, но для больших проектов со значительным количеством зависимостей инструменты, предоставляемые TypeScript, такие как статическая типизация, компилятор, отладчик и ООП, являются реальным преимуществом. . С добавлением линтера и жесткого контроля проект TypeScript упрощает обслуживание и упрощает отслеживание кода.
TypeScript — это только предвкушение того, к чему движется JavaScript, если не его будущая эволюция, предусмотренная стандартом ECMAScript. Более крупные компании, такие как AWS, пишут свой код на TypeScript. Фреймворки FrontEnd, такие как Angular, React и Vue, также разработаны и поддерживают TypeScript. Количество проектов, размещенных на GitHub на TypeScript, постоянно растет, и интеграция языка эффективна в большинстве известных IDE. Вопрос больше не в том, следует ли вам использовать TypeScript, а в том, когда вы это сделаете.
P.S. За последние 3 месяца я заработал более 1000 долларов. Если вы также хотите зарабатывать на Medium, мы предлагаем зарегистрироваться как member. Это стоит всего 5 долларов в месяц. Таким образом, вы не только получите возможность писать и зарабатывать, но и получите неограниченный доступ ко всем историям, подобным этой.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
