Что такое TypeScript? TypeScript — это строго типизированный язык программирования, основанный на JavaScript, предоставляющий вам лучшие инструменты в любом масштабе.

Мир фронтенд-разработчиков React гудит от любви к использованию и предпочитанию TypeScript JavaScript. Хотя он не рекомендуется для всех типов проектов, он сильно устраняет многие недостатки JavaScript и улучшает его.

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

Что такое TypeScript?

TypeScript — это строго типизированный язык программирования, основанный на JavaScript, предоставляющий лучшие инструменты в любом масштабе. Это бесплатный проект с открытым исходным кодом, созданный Microsoft.

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

Вот где этот язык на самом деле сияет… помните термин «строгая типизация», который мы использовали выше? Что оно означает в данном контексте? Что ж, это означает, что типы данных переменных/функций и других примитивов должны быть предопределены. Это одна из самых важных особенностей TypeScript (поэтому он так много внимания уделяет «типу»).

Под капотом он компилируется в JavaScript, предоставляя вам преимущества платформы JavaScript плюс предполагаемые преимущества типов.

Основные возможности TypeScript

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

1. JavaScript и многое другое: TypeScript добавляет синтаксический сахар в ваш код JavaScript для обеспечения более тесной интеграции с вашим редактором.

2. Запускается везде, где работает JavaScript: код TypeScript преобразуется в JavaScript, который затем можно запускать в браузере, на Node.js или Deno и в ваших приложениях.

3. Безопасность с масштабируемостью: он использует вывод типов, чтобы предоставить вам отличные инструменты без написания дополнительного кода.

4. Поддержка редактора: большинство современных IDE и редакторов кода, таких как VS Code, имеют встроенную поддержку файлов TypeScript. Вы получаете поддержку автозаполнения и автоматического импорта в VS Code из коробки.

5. Уникальные особенности языка: вот некоторые функции, которые вы найдете только в коде TypeScript; Интерфейсы, пространства имен, обобщения, абстрактные классы, модификаторы данных и многое другое!

6. Постепенная скорость внедрения: вы можете постепенно применять типы к любым предыдущим проектам JavaScript или кодовой базе. Благодаря отличной поддержке редактора TypeScript выявляет ошибки прямо в вашем редакторе!

7. Легко описать данные: действительно легко описать форму объектов и функций в вашем коде. Это позволяет просматривать документацию и проблемы в вашем редакторе.

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

От JavaScript к TypeScript

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

Допустим, у нас есть следующий код JavaScript:

// @ts-check
function compact (arr) {
  if (orr. length > 10)
    return arr. trim(0, 10)
  return arr
}

Теперь вы увидите ошибку типа «Не удается найти имя ‘orr’». Далее, предположим, мы делаем еще одну ошибку, например, используя

trim вместо slice в массиве:

function compact (arr: string[]) {
  if (arr.length > 10)
    return arr.slice(0, 10)
  return arr
}

Мы добавляем тип string[] (массив строк) для параметра arr , поэтому он всегда должен принимать массив на основе строк и ничего больше. Следовательно, мы называем TypeScript «строго типизированным».

Спонсор:

Установка и настройка TypeScript

Пришло время написать код TS локально на нашей машине! Вы можете установить TypeScript глобально с помощью следующей команды NPM:

npm install -g typescript

Затем вы можете подтвердить установку, запустив tsc –v, чтобы проверить версию TypeScript, установленную в вашей системе.
Обратите внимание, что после того, как вы напишете код TypeScript и захотите его запустить, просто запустив tsc с файлом, имя не будет работать. поскольку tsc это всего лишь компилятор TypeScript. Нам нужен Node.js, чтобы получить фактический вывод журнала. Мы можем сделать это, запустив эту команду для программы Hello World:

tsc hello.ts && node hello.js

Ваш первый "Hello World!" в TypeScript
После того, как вы глобально установили TypeScript на свой компьютер, вы можете открыть подходящий редактор кода, такой как VS Code, который отлично поддерживает инструменты TypeScript.

  1. Создайте новый файл TypeScript с именем helloWorld.ts. Затем просто напишите оператор журнала консоли, как в JavaScript:
console.log("Hello World!");

2. Откройте командную строку или окно терминала и запустите tsc helloWorld.ts. Вы увидите, что ничего не произойдет, так как здесь не назначены типы, следовательно, нет ошибок типов.

3. Вместо этого вы увидите, что компилятор TypeScript создает новый файл helloWorld.js в том же каталоге. Это тот же код TS, но это сгенерированный файл JS.

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

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}
greet('Brendan');

Обратите внимание, как мы вызываем функцию greet . Если вы запустите это, вы получите эту ошибку, потому что мы передали только 1 аргумент вместо ожидаемых 2:

// TS ERROR: Expected 2 arguments, but got 1.

Параметры функции приветствия() не имеют явно определенных типов, поэтому TS присвоит ей любой тип.

  1. Давайте исправим нашу функцию следующим допустимым кодом:
// "greet() takes a person of type string, and a date of type Date"
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}`);
}
greet('Maddison', new Date());

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

На всякий случай, если вам интересно, эквивалентный JS-код будет таким:

// "greet() takes a person of type string, and a date of type Date"
function greet(person, date) {
    console.log("Hello " + person + ", today is " + date.toDateString() + "!");
}
greet('Maddison', new Date());

На этом мы рассмотрели минимальные основы, которые вам нужно знать о языке TypeScript. Как вы видели, он очень близок к JavaScript, поэтому, если вы уже работали с JavaScript, вам будет легко изучить и перенести свои проекты на TypeScript. Чтобы облегчить вашу работу, есть несколько магазинов шаблонов дашбордов, таких как WrapPixel и AdminMart. Проверьте их сейчас!

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.