Вы можете быть знакомы с 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.json
file в корневом каталоге вашего проекта после установки 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 вместе с tsc
command для запуска программы TypeScript без компиляции ее в JavaScript для проверки на наличие ошибок:
tsc --noEmit
Ваш код TypeScript будет проверен компилятором с помощью этой команды, чтобы проверить наличие ошибок и отобразить все найденные.
Используйте это, чтобы исправить любые ошибки в вашем коде, прежде чем пытаться скомпилировать его в JavaScript.
Заключение
Переход с JavaScript на TypeScript может быть сложным, но полезным. Более надежный тип системы, превосходный инструментарий и повышенная производительность разработчиков — вот лишь несколько преимуществ TypeScript по сравнению с JavaScript. Вы можете успешно перенести свой проект на TypeScript и воспользоваться этими преимуществами, следуя инструкциям в этом руководстве. Кроме того, вы можете получить помощь и совет от процветающего сообщества участников TypeScript, работающих над улучшением языка.
Ищете внештатного технического писателя? Не смотрите дальше! Если вам понравилась эта статья, не забудьте похлопать в ладоши и оставить комментарий ниже. Давайте свяжемся и поработаем вместе над вашим следующим проектом. Если вы заинтересованы в сотрудничестве со мной, свяжитесь с нами по электронной почте [email protected].