DevGang
Авторизоваться

Как легко перейти с JavaScript на TypeScript 

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

Если вы работали в индустрии разработки программного обеспечения (особенно если вы много работали в области внешнего интерфейса) в последние пару лет, то, скорее всего, вы работали или продолжаете работать над проектом на JavaScript. И к настоящему времени вы более чем устали от этого. Поэтому в этой статье я хотел бы поговорить о том, как  перейти с JavaScript на TypeScript .

Не поймите меня неправильно, JavaScript является чрезвычайно гибким и простым в изучении и использовании языком с одним из крупнейших сообществ. Но это также сопровождается множеством подводных камней, с которыми вы, в конце концов, столкнетесь, как, например, неудачная типизация, которая может привести к «странному» поведению. И есть некоторые действительно интересные языки, которые переносятся в JS и могут использоваться поверх него, такие как Dart, Elm или TypeScript, и это лишь некоторые из них.

Как легко перейти с JavaScript на TypeScript

Гораздо проще отказаться от JS при запуске нового проекта, когда вам не нужно беспокоиться о таких вещах, как ретро-совместимость или поддержка приложения в production. В этом случае вы можете попробовать много вариантов и выбрать тот, который вам больше нравится.

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

Это возможно, потому что TypeScript - это расширенный набор JavaScript, что означает, что любой код JS также является допустимым кодом TS (при условии, что конфигурация TS настроена на совместимость с ним).

Теперь я представлю простой способ добавления TypeScript в проект без необходимости изменять нашу конфигурацию webpack, gulp или любой другой системы сборки.

Предполагая, что вы используете npm в качестве менеджера пакетов в своем проекте, первое, что нам нужно сделать, это добавить TypeScript в качестве зависимости (если нет, вы можете установить его глобально):

npm install --save-dev typescript

Примечание: в зависимости от вашего проекта, вы также можете установить «@types» для других библиотек, от которых вы зависите. Например, если у вас есть React проект, вам может потребоваться установить следующее:

npm install --save-dev @types/node
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
npm install --save-dev @types/react-redux
npm install --save-dev @types/react-router-dom

После этого нам нужно добавить файл tsconfig.json в корневой каталог проекта. Этот файл содержит параметры компилятора, необходимые для преобразования TS в JS. Чтобы иметь наименьшее количество проблем, используйте следующую конфигурацию, чтобы сделать код JS совместимым с TS:

tsconfig.json
{
 "compilerOptions": {
     "module": "commonjs",
     "sourceMap": true,
     "jsx": "react"
 },
 "exclude": [
     "node_modules"
 ]
}

Примечание: вам может потребоваться изменить некоторые биты в зависимости от вашего проекта. Подробнее об этом  здесь.

Теперь добавьте следующий скрипт в ваш package.json:

package.json
"tsc:w": "tsc -w"

И запустить его. Будет запущен наблюдатель, который переносит все файлы .ts (или .tsx) в обычные файлы .js. Кроме того, он будет генерировать эти файлы по тому же пути, что и оригинал; поэтому все операции импорта и все процессы сборки, которые у вас могут быть, будут работать, как и раньше, поскольку файлы .ts полностью игнорируются, и вместо них используется результат переноса. Сгенерированная файловая структура имеет следующую структуру:

file.ts
 ├── file.js
 └── file.js.map

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

Это не приносит много изменений. Мы все еще можем поставить нормальный код JS и не получить помощи от того, что может предложить TypeScript. Для того, чтобы TS заставил нас на самом деле набирать наш код, нам нужно изменить файл tsconfig.json. В частности, мы сосредоточимся на двух параметрах компилятора:

tsconfig.json
"noImplicitAny": true,
"strictNullChecks": true,

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

function getSavings() {
 //returns savings
}

И функция, чтобы решить, возможна ли ипотека:

function concedeMortgage(homeValue) {
     const savings = getSavings();
     return savings / homeValue > 0.2;
}

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

function concedeMortgage(homeValue) {
     if(!homeValue || !parseFloat(homeValue)) return false;
     const savings = getSavings();
     if(!savings || !parseFloat(savings)) return false;
     return savings / homeValue > 0.2;
}

Это выглядит довольно ужасно.

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

function concedeMortgage(homeValue: number): boolean {
     if(!homeValue) return false;
     const savings = getSavings();
     if(!savings) return false;
     return savings / homeValue > 0.2;
}

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

concedeMortgage("foo")  // ERROR! Argument of type 'foo' is not assignable to parameter type 'number'

К сожалению, null и undefined все еще находятся допустимыми, поэтому было бы возможно сделать это:

concedeMortgage(null) // Still works

Чтобы это исправить, нам нужно активировать другую опцию в файле tsconfig.json, который мы упомянули, strictNullChecks.

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

concedeMortgage(null) // ERROR! Argument of type 'null' is not assignable to parameter of type 'number'

Это означает, что нам не нужно проверять нулевые типы, что упрощает логику до чего-то вроде:

function concedeMortgage(homeValue: number): boolean {
     const savings = getSavings();
     return savings / homeValue > 0.2;
}

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

Источник:

#JavaScript #TypeScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить