Если вы работали в индустрии разработки программного обеспечения (особенно если вы много работали в области внешнего интерфейса) в последние пару лет, то, скорее всего, вы работали или продолжаете работать над проектом на JavaScript. И к настоящему времени вы более чем устали от этого. Поэтому в этой статье я хотел бы поговорить о том, как перейти с JavaScript на TypeScript .
Не поймите меня неправильно, JavaScript является чрезвычайно гибким и простым в изучении и использовании языком с одним из крупнейших сообществ. Но это также сопровождается множеством подводных камней, с которыми вы, в конце концов, столкнетесь, как, например, неудачная типизация, которая может привести к «странному» поведению. И есть некоторые действительно интересные языки, которые переносятся в JS и могут использоваться поверх него, такие как Dart , Elm или TypeScript, и это лишь некоторые из них.
Вам также могут понравиться:
Новые функции в TypeScript 3.7 и Как их использовать .
Как легко перейти с JavaScript на TypeScript
Гораздо проще отказаться от JS при запуске нового проекта, когда вам не нужно беспокоиться о таких вещах, как ретро-совместимость или поддержка приложения в производстве. В этом случае вы можете попробовать много вариантов, и выбрать тот, который вам нравится больше всего.
Тем не менее, если вам необходимо продолжить работу над старым проектом, вы можете начать переход с JavaScript на TypeScript «медленным» способом, файл за файлом или добавляя TypeScript только в новые создаваемые вами файлы.
Это возможно, потому что TypeScript — это расширенный набор JavaScript, что означает, что любой код JS также является допустимым кодом TS (при условии, что конфигурация TS настроена на совместимость с ним).
Теперь я представлю простой способ добавления TypeScript в проект без необходимости изменять нашу конфигурацию webpack, gulp или любой другой системы сборки.
Предполагая, что вы используете npm в качестве менеджера пакетов в своем проекте, первое, что нам нужно сделать, это добавить TypeScript в качестве зависимости (если нет, вы можете установить его глобально):
Джава
xxxxxxxxxx
1
npm install --save-dev typescript
Примечание : в зависимости от вашего проекта вы также можете установить «@types» для других библиотек, от которых у вас есть зависимости. Например, если у вас есть реактивный проект, вам может потребоваться установить следующее:
Оболочка
xxxxxxxxxx
1
npm install --save-dev @types/node
2
npm install --save-dev @types/react
3
npm install --save-dev @types/react-dom
4
npm install --save-dev @types/react-redux
5
npm install --save-dev @types/react-router-dom
После этого нам нужно добавить файл tsconfig.json в корневой каталог проекта. Этот файл содержит параметры компилятора, необходимые для преобразования TS в JS. Чтобы иметь наименьшее количество проблем, используйте следующую конфигурацию, чтобы сделать код JS совместимым с TS:
JSON
xxxxxxxxxx
1
{
2
"compilerOptions": {
3
"module": "commonjs",
4
"sourceMap": true,
5
"jsx": "react"
6
},
7
"exclude": [
8
"node_modules"
9
]
10
}
Примечание : вам может потребоваться изменить некоторые биты в зависимости от вашего проекта. Подробнее об этом здесь .
Теперь добавьте следующий скрипт в ваш package.json:
JSON
xxxxxxxxxx
1
"tsc:w": "tsc -w"
И запустить его. Будет запущен наблюдатель, который переносит все файлы .ts (или .tsx) в обычные файлы .js. Кроме того, он будет генерировать эти файлы по тому же пути, что и оригинал; поэтому все операции импорта и все процессы сборки, которые у вас могут быть, будут работать, как и раньше, поскольку файлы .ts полностью игнорируются, и вместо них используется результат переноса. Сгенерированная файловая структура имеет следующую структуру:
Джава
xxxxxxxxxx
1
file.ts
2
├── file.js
3
└── file.js.map
Теперь все, что нам нужно сделать, это создать наш первый файл .ts, изменив расширение существующего, которое мы хотим перенести в TypeScript. Кроме того, мы также можем создать пустой файл, чтобы начать работу в нашем приложении.
Это не приносит особых изменений. Мы все еще можем поставить нормальный код JS и не получить помощи от того, что может предложить TypeScript. Для того, чтобы TS заставил нас на самом деле набирать наш код, нам нужно изменить файл tsconfig.json . В частности, мы сосредоточимся на двух параметрах компилятора, которые заставят наш код быть фактически напечатанным:
JSON
xxxxxxxxxx
1
"noImplicitAny": true,
2
"strictNullChecks": true,
Давайте представим, что у нас есть простой симулятор ипотеки, который сообщает пользователю, является ли ипотека жизнеспособной или нет. Для этого у нас будет функция, которая каким-то образом получит сбережения, которые есть у пользователя:
Машинопись
xxxxxxxxxx
1
function getSavings() {
2
//returns savings
3
}
И функция, чтобы решить, возможна ли ипотека:
Машинопись
xxxxxxxxxx
1
function concedeMortgage(homeValue) {
2
const savings = getSavings();
3
return savings / homeValue > 0.2;
4
}
Но, чтобы заставить его работать, нам нужно проверить, существует ли вход. А также, если это номер или нет. То же самое относится и к возвращаемому значению from getSavings, поскольку мы также не знаем тип возвращаемого значения этой функции. Поэтому наш код может выглядеть примерно так:
Машинопись
xxxxxxxxxx
1
function concedeMortgage(homeValue) {
2
if(!homeValue || !parseFloat(homeValue)) return false;
3
const savings = getSavings();
4
if(!savings || !parseFloat(savings)) return false;
5
return savings / homeValue > 0.2;
6
}
Это выглядит довольно ужасно.
Но если мы активируем noImplicitAnyопцию компилятора, больше не нужно будет проверять, являются ли входное значение и возвращаемый результат getSavingsчислами, поэтому функция может выглядеть примерно так:
Машинопись
xxxxxxxxxx
1
function concedeMortgage(homeValue: number): boolean {
2
if(!homeValue) return false;
3
const savings = getSavings();
4
if(!savings) return false;
5
return savings / homeValue > 0.2;
6
}
Это улучшение, поскольку компилятор может помочь нам избежать некоторых ошибок и опечаток, не позволяя нам вызвать функцию со строкой, например:
Машинопись
xxxxxxxxxx
1
concedeMortgage("foo") // ERROR! Argument of type 'foo' is not assignable to parameter type 'number'
К сожалению, null и undefined все еще находятся в домене каждого типа, поэтому было бы возможно сделать это:
Машинопись
xxxxxxxxxx
1
concedeMortgage(null) // Still works
Чтобы это исправить, нам нужно активировать другую опцию в файле tsconfig.json, который мы упомянули strictNullChecks.
Теперь вызов функции с нулевым значением приведет к тому, что компилятор поймает ее:
Машинопись
xxxxxxxxxx
1
concedeMortgage(null) // ERROR! Argument of type 'null' is not assignable to parameter of type 'number'
Это означает, что нам не нужно проверять нулевые типы, что упрощает логику до чего-то вроде:
Машинопись
xxxxxxxxxx
1
function concedeMortgage(homeValue: number): boolean {
2
const savings = getSavings();
3
return savings / homeValue > 0.2;
4
}
Это лишь небольшой взгляд на то, что может дать вам TypeScript, если вы перенесете свой проект из простого JS в него.