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

Преимущества перехода на TypeScript

По сравнению с JavaScript у TypeScript есть несколько преимуществ. Вот несколько объяснений того, почему вы можете захотеть переехать:

  • Статическая типизация. Статическая типизация TypeScript может помочь разработчикам выявлять ошибки перед выполнением. В результате вы можете тратить меньше времени на отладку кода.
  • Улучшенная структура кода: модель программирования на основе классов, используемая TypeScript, может сделать ваш код более модульным и понятным.
  • Улучшенные инструменты: TypeScript хорошо работает с инструментами разработки, такими как Visual Studio Code, улучшая завершение кода и выделение ошибок.
  • Обратная совместимость: поскольку TypeScript совместим с JavaScript, вы можете перенести свой код на TypeScript, не начиная с нуля.

Переход с JavaScript на TypeScript

Переход с JavaScript на TypeScript может показаться сложным, но вы можете упростить его, разделив его на более мелкие шаги:

Установить машинописный текст

Установка TypeScript на первом месте. Для этого используйте npm:

npm install -g typescript

Настроить TypeScript

Вы должны создать tsconfig.jsonfile в корневом каталоге вашего проекта после установки TypeScript. Этот файл указывает TypeScript, как собрать исходный код. Вот пример файла конфигурации:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Параметры компилятора настроены на ES5, используют систему модулей CommonJS, выводят скомпилированные файлы в каталог dist , включают строгую проверку типов и устанавливают для esModuleInterop значение true в этом файле конфигурации. Кроме того, мы указываем TypeScript включить все файлы, найденные в каталоге src.

Включите типы TypeScript в свой код

Вы можете начать включать типы TypeScript в свой код JavaScript после настройки конфигурации TypeScript. Строка, число, логическое значение, массив и объект — это лишь некоторые из встроенные типы, доступные в TypeScript. Кроме того, вы можете создавать свои собственные типы. Вот иллюстрация того, как добавить тип к функции:

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

На этом рисунке мы модифицируем параметр name функции _5, включив параметр string type.

Вот некоторые популярные типы TypeScript и примеры кода:

  • Логический тип:
let isCompleted: boolean = false;

Это объявляет логическую переменную с именем isCompleted, которая может содержать только значение true или false.

  • Тип номера:
let age: number = 25;

Это объявляет числовую переменную с именем age, которая может содержать только числовые значения.

  • Тип строки:
let firstName: string = "John";

Это объявляет строковую переменную с именем firstName, которая может содержать только строковое значение.

  • Тип массива:
let numbers: number[] = [1, 2, 3, 4, 5];

Это объявляет переменную массива с именем numbers, которая может содержать только числовые значения. Синтаксис [] указывает, что это массив.

  • Тип объекта:
let person: { name: string, age: number } = { name: "John", age: 25 }

Это объявляет объектную переменную с именем person, которая может содержать значения только со свойством name строки типа и свойством age типа число.

  • Любой тип:
let value: any = "Hello";

Это объявляет переменную с именем value, которая может содержать значение любого типа. Это полезно в тех случаях, когда тип переменной неизвестен во время объявления.

Измените свои документы JavaScript на TypeScript

Следующий шаг — начать преобразование файлов JavaScript в TypeScript. Для этого измените расширение файла с .js на .ts . Любые ошибки типов, которые обнаруживает TypeScript, также должны быть исправлены.

Используйте расширенные функции TypeScript

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

  • Интерфейсы: форма объекта может быть указана с помощью интерфейсов.
  • Enums: справка Enums определяет набор именованных констант.
  • Обобщения: Обобщения позволяют разрабатывать повторно используемый код, совместимый с различными типами.

Чтобы в полной мере использовать функции TypeScript, вы можете начать включать эти функции в свой код.

Скомпилируйте свой код TypeScript

Наконец, вам нужно скомпилировать код TypeScript в JavaScript. Вы можете сделать это с помощью компилятора TypeScript:

tsc

Эта команда скомпилирует все файлы TypeScript в вашем проекте и выведет полученные файлы JavaScript в указанный выходной каталог. Изменив опцию outDir в файле tsconfig.json , вы можете изменить выходной каталог с ./dist на что-то другое.

Если вы хотите отслеживать изменения в файлах TypeScript и компилировать их по мере внесения изменений, вы можете использовать параметр — — watch с командой tsc :

tsc --watch

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

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

Вы можете использовать — — noEmit option вместе с tsccommand для запуска программы TypeScript без компиляции ее в JavaScript для проверки на наличие ошибок:

tsc --noEmit

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

Заключение

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

Ищете внештатного технического писателя? Не смотрите дальше! Если вам понравилась эта статья, не забудьте похлопать в ладоши и оставить комментарий ниже. Давайте свяжемся и поработаем вместе над вашим следующим проектом. Если вы заинтересованы в сотрудничестве со мной, свяжитесь с нами по электронной почте [email protected].