Как переделать js в typescript

Question

Accepted Answer

TypeScript добавляет в JavaScript статическую типизацию. За счёт этого мы можем выявить многие ошибки, связанные с несоответствиями типов данных, еще на этапе разработки приложения. Подробнее об этом рекомендую почитать на бесплатном курсе по TypeScript на Code Basics.

Рассмотрим пример того, как можно переделать JavaScript в TypeScript. Для этого сначала инициализируем npm-проект:

npm init -y

После чего установим TypeScript в качестве зависимости для разработки:

npm install typescript --save-dev

Для работы с TypeScript создаем файлы с расширением .ts, а не .js. При первом приближении мы можем рассматривать TypeScript как продвинутый вариант линтера: если у нас есть код на JavaScript, который нужно преобразовать в валидный код на TypeScript, то задача состоит в том, чтобы TypeScript перестал выдавать ошибки.

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

let someVariable = 'Hello, world!';

someVariable = 42; // Type 'number' is not assignable to type 'string'.
someVariable = false; // Type 'boolean' is not assignable to type 'string'.
someVariable = ['Hello, world!']; // Type 'string[]' is not assignable to type 'string'.
someVariable = {id: 1, text: 'Hello, World!'}; // Type '{ id: number; text: string; }' is not assignable to type 'string'.
someVariable = 'Some new text'; // Тут ошибки не будет, так как типы совпадают

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

let someVariable = 'Hello, world!';

someVariable.map((el) => el.toUpperCase()); // Property 'map' does not exist on type 'string'.

Чтобы научиться работать с подобным ошибками и не допускать их, нужно изучить TypeScript. Однако в самом простом случае, мы можем указать для переменной someVariable тип any. В этом случае TypeScript не будет проверять типы и не сообщит об ошибке.

Данный способ допустим на начальном этапе перевода проекта из JavaScript в TypeScript, когда сначала все типы объявляются как any, а затем понемногу переписываются на нужные. Но всё равно нужно иметь в виду, что в большинстве случаев при использовании any теряется весь смысл языка TypeScript, и ошибка в любом случае возникнет, но уже при попытке запустить приложение:

let someVariable: any = 'Hello, world!'; // указали тип any, отключив тем самым проверку типов
someVariable.map((el) => el.toUpperCase()); // TypeScript не сообщает об ошибке

Компилируем код в JavaScript и пробуем его запустить:

npx tsc index.ts # При компиляции также нет никаких ошибок

node index.js # При попытке запуска всё падает с ошибкой 'TypeError: someVariable.map is not a function'

Как переделать js в typescript

Похожие вопросы