TypeScript экономит время на разработку, но стоит ли весь процесс миграции?

Я тебя понимаю всякий раз, когда есть проект, который нужно перенести на другой язык, твой внутренний голос дрожит и кричит: НЕТ БОГА! ПОЖАЛУЙСТА, НЕТ!
Его не волнует, если вы на работе и должны ли вы это делать, поскольку кодирование - это ваша работа или вы месяцами боретесь с этим решением, но ваш частный проект будет лучше после миграции.

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

В настоящее время я разрабатываю свой следующий курс Udemy на тему Как создать простую веб-игру на простом старом JavaScript!.

Мой совет: если вы не знаете, что делаете, то лучше

и оставьте эти джунгли JavaScript!

Но ждать! Разве Машинопись не просто…

… Надмножество JavaScript, и это означает, что мы можем легко перейти на?

Это правильно, и знание этого приводит нас к выводу, что весь код JavaScript является действительным кодом TypeScript. Установка еще одного сверху: компилятор Typescript не может использоваться только в проектах Typescript. Этот маленький чувак похож на Стоунера Стэнли, ему все равно. По крайней мере, о финале файла. Дайте ему *.js или *.ts файл, и я уверен, он даже не заметит разницы ...

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

Почувствуйте тип!

То, что я объяснил до сих пор, включает только систему типов TypeScript. JavaScript не может просто распознать эти типы. Как оно вообще должно это делать? Если TypeScript является расширенным набором, JavaScript является базовой версией и имеет только базовые типы: boolean, null, undefined, number, string и object. Как тогда сделать это возможным?

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

let x: number, y: number;

Следовательно, эта строчка нам, как невежественным людям, совершенно не поможет. Но мы можем положиться на нашего старого доброго Доктора, не на Док Маккой или Док Брауна, я имею в виду JSDoc!

Положиться на него - значит использовать самый простой способ. Согласуйте стиль комментариев с известным синтаксисом JSDoc. Теперь мы можем ввести ранее переменные с помощью следующего оператора:

/** @type {number} */ 
let x;
/** @type {number} */ 
let y;

Доступ к двум переменным означает, что мы можем присвоить два числа.

x = 23;
y = 23;

Ха! Проблема решена, больше никаких вопросов, ваша честь!

ВОЗРАЖЕНИЕ!

x = 'OBJECTION!'; 
y = true;

К сожалению, присвоение любого другого значения не приводит к ошибке. Хотя должен быть один. Две строки присваивают неправильные типы значений и являются действительными.

Так зачем я тебе все это объясняю ?!

Причина наличия этого допустимого кода связана с тем обстоятельством, что TypeScript проверяет типы только в среде на основе проектов TS. Среда JavaScript не заслуживает внимания Его Высочества, пока мы не добавим туда немного удовольствия. К счастью, мы можем включить этот тип для проверки вручную, добавив просто строку. Преобразование

/** @type {number} */ 
let x;
/** @type {number} */ 
let y;

to

//@ts-check
/** @type {number} */
let x;
/** @type {number} */ 
let y;

просто добавив //@ts-check над строками, обозначенными JSDoc, и вы получите общее мудрое решение. Такой простой выберут только самые мудрые. Есть больше ключевых слов JSDoc, поддерживаемых Typescript.

Но ждать! Ни у кого нет времени вручную помещать выражение //@ts-check во все файлы!

Настройте свой проект JavaScript

Вместо этого мы собираемся сделать его глобально доступным, и нам нужно будет реализовать линию только один раз. Итак, мы создаем файл jsconfig.json. Да, вы не ослышались, это младший брат tsconfig.json, который пытается скопировать все, что старший брат делает для проектов JavaScript.

{ 
  "include": ["./src/**/*.js"],
    "compilerOptions": {
        "checkJs": true,
    }
}

Хотите исключить некоторые файлы из вечеринки и впервые в жизни поиграть на дискотеке? Либо исключить в jsconfig.json

{ 
  "include": ["./src/**/*.js"],
    "compilerOptions": {
        "checkJs": true,
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}

или зайдите в конкретный файл и добавьте:

//@ts-nocheck

Начиная с TypeScript 3.7

Дайте мне число от 0 до 10! Это 7, почти в 70% случаев, когда я спрашиваю 70 человек ... Это волшебство, и поэтому TypeScript версии 3.7 позволяет создавать *.d.ts файлов из объявлений типов, для которых мы используем комментарии JSDoc. Это означает, что мы также можем вводить переменные в библиотеки, вообще не переходя на TypeScript.

Для этого вам теперь нужен великий брат tsconfig.json, хотя это все еще чистый проект JavaScript. Но эта операция не единственная. Все перечисленное должно быть включено в ваш файл JSON под объектом "compilerOptions".

  • "allowJs" : "true": Рассмотрите даже файлы JavaScript в проекте и сделайте объявления типов. Файлы JavaScript по умолчанию игнорируются в проектах TypeScript.
  • "declaration" : "true": Сообщите компилятору, чтобы он явно создавал объявления типов в форме *.d.tsfiles.
  • "emitDeclarationOnly": "true": Вы хотите получить только объявления типов, а не перевод кода.
  • "outDir": "./dist": Объявления типов не являются частью исходного кода. Поэтому вставьте в предпочтительный каталог.

Реализация их в вашем JSON-файле будет выглядеть так:

{ 
  "include": ["./src/**/*.js"],
    "compilerOptions" : {
        "allowJs": true,
        "declaration": true,
        "emitDeclarationOnly":true,
        "outDir": "./dist"
    }
}

Недостаточно хакерский?

Если редактировать файл JSON недостаточно, вы должны запустить компилятор с определенными параметрами, чтобы получить желаемый результат. Загрузите диспетчер пакетов npx и начните с объясненных параметров в качестве начальных параметров, например

$ npx tsc ./src/**/*.js --allowJs --declaration --emitDeclarationOnly --outDir ./dist

Выводы

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

Заключение

Итак, всего несколько шагов отделяют вас от создания гибрида JavaScript / TypeScript. Не всегда нужно переходить на Typescript. Если у вас есть более крупный проект на JavaScript и вы не хотите выполнять миграцию, начните с проверки типов и посмотрите, как будет развиваться ваш проект!

Это связано с тем, что TypeScript основан на комментариях, таких как JSDoc, где документация вашей JS-Codebase расширяется, по крайней мере, при использовании JSDoc. Я не могу отрицать, что вы получаете только некоторые важные функции, которые предлагает TypeScript, и что они будут сопровождаться полной миграцией.

Подведем итоги: все лучше, чем ничего. Она ведет себя как пицца, если вы едите ее в холодном состоянии, она не так хороша, как горячая, но пицца - это пицца 🍕.

использованная литература

JSDoc - Reference и 6 лет разработки программного обеспечения