Как легко перейти с 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:
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"jsx": "react"
},
"exclude": [
"node_modules"
]
}Примечание: вам может потребоваться изменить некоторые биты в зависимости от вашего проекта. Подробнее об этом здесь.
Теперь добавьте следующий скрипт в ваш package.json:
"tsc:w": "tsc -w"
И запустить его. Будет запущен наблюдатель, который переносит все файлы .ts (или .tsx) в обычные файлы .js. Кроме того, он будет генерировать эти файлы по тому же пути, что и оригинал; поэтому все операции импорта и все процессы сборки, которые у вас могут быть, будут работать, как и раньше, поскольку файлы .ts полностью игнорируются, и вместо них используется результат переноса. Сгенерированная файловая структура имеет следующую структуру:
file.ts
├── file.js
└── file.js.map
Теперь все, что нам нужно сделать, это создать наш первый файл .ts, изменив расширение существующего, которое мы хотим перенести в TypeScript. Кроме того, мы также можем создать пустой файл, чтобы начать работу в нашем приложении.
Это не приносит много изменений. Мы все еще можем поставить нормальный код JS и не получить помощи от того, что может предложить TypeScript. Для того, чтобы TS заставил нас на самом деле набирать наш код, нам нужно изменить файл 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 в него.
