Как фронтенд-инженер, я уверен, что вы, скорее всего, слышали о typescript для написания фронтенд-приложений. В этой статье мы рассмотрим, что такое машинописный текст, его важность и то, как он используется с интерфейсной средой, такой как React, для создания веб-приложений.

Что такое машинописный текст?

Typescript — это надмножество javascript, которое компилируется в обычный javascript при запуске в браузере. Typescript подразделяется на два типа: встроенные типы и определяемые пользователем типы.

Встроенные типы

  • логический
  • Нить
  • Число
  • Пустота
  • Символ
  • Нулевой и неопределенный

Пользовательские-Определенные Типы

  • Множество
  • перечисления
  • Классы
  • Интерфейсы

Ниже приведены некоторые из основныхважных машинописных текстов:

  • Легко определить типы реквизита
  • Лучший опыт для разработчиков при написании кода
  • Он допускает необязательную статическую проверку, что означает, что типы проверяются
  • Делает код легким для чтения и понимания
  • Дает меньше неопределенных ошибок; это связано с тем, что typescript обнаруживает ошибки во время выполнения компилятора.

Типы Any и Unknown в Typescript (когда и какие):

Типы any и unknown являются одними из наиболее часто используемых типов в машинописном приложении, однако разработчикам важно знать, какой из них использовать при создании приложения, и избегать использования «any» для любых типов, которые не определены. .

Тип any позволяет присвоить значение любого типа переменной типа any. Это специально используется, когда значение необходимо сохранить в переменной, а тип переменной не указан, особенно когда такое значение поступает из вызова API.

N/B: TypeScript предполагает, что переменная имеет тип any, если вы явно не указываете тип, и компилятор не может вывести тип из окружающего контекста.

Тип «Неизвестный»: мы можем присвоить что угодно неизвестному, но неизвестное нельзя присвоить ничему, кроме самого себя и любого, без выполнения утверждения типа элемента управления. сужение на основе потока. Операция не может быть выполнена над переменной неизвестного типа без предварительной привязки ее к определенному типу.

Вспомогательные типы в Typescript

Также важно знать наиболее важные типы утилит, используемых в ts. Утилиты используются для упрощения преобразования типов.
* Partial‹Type›: создает тип со всеми необязательными свойствами.
* ReadOnly‹Type›: создает тип со всеми свойствами, доступными только для чтения. Это нельзя изменить, что делает тип неизменяемым.
* Required‹Type›: создает тип со всеми свойствами, установленными на required.
* Record‹Keys, Type›: создает тип объекта, в котором ключи свойств имеют тип Keys, а значения — Type.

Использование машинописного текста в приложении React
Реагирующий проект может использовать машинописный текст либо с помощью CRA, либо путем преобразования всего существующего кода JS-реакции в проект машинописного текста.

Прежде чем сделать что-либо из вышеперечисленного, важно, чтобы у вас уже был установлен машинописный текст. Вы можете установить typescript глобально или в своем проекте, запустив следующую строку cmd:

Глобальная установка Typescript:

npm install -g typescript

Установка Typescript в ваш проект:

npm install typescript --save-dev. or

yarn add typescript --save-dev

Создание реактивного проекта с CRA:

npx create-react-app my-app

Преобразование существующего проекта React в машинописный текст:

Мы предпримем следующие шаги, чтобы преобразовать существующее реагирующее приложение в машинописное:

  • Во-первых, мы собираемся добавить машинописный текст в проект, и, сделав это, мы перейдем в корень нашего проекта и запустим командную строку следующим образом:

если вы используете Yarn, выполните следующую команду:

yarn add typescript @types/node @types/react @types/react-dom @types/jest

если вы используете npm:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
  • После добавления машинописного текста мы также создадим файл tsconfig.json в корневом источнике нашей папки. Цель этого файла — предоставить параметры компилятора для компиляции проекта в машинописный текст.
  • Затем мы начали бы изменять файлы в нашем проекте в файлы .ts или .tsx. Для этого мы начнем с самых простых компонентов, чтобы все было проще и не запутывалось.

Также важно знать, какие из файлов предназначены для преобразования в файлы .ts или .tsx. Файлы, которые ранее были написаны с расширением .jsx, должны быть переименованы в расширение .tsx, а файлы с расширением .js должны быть переименованы в расширение .ts. Зачем мы это делаем? Это связано с тем, что расширения файлов .ts используются, когда мы создаем функции, классы или редукторы, а расширения файлов .tsx используются, когда мы используем синтаксис JSX (что позволяет нам писать html внутри javascript/typescript).

Также важно иметь в виду, что при преобразовании ваших файлов вы можете столкнуться с некоторыми ошибками машинописи, и нам придется подавить эти ошибки, используя //ts-ignore в строке перед ошибкой. Кроме того, в зависимости от того, какая сторонняя библиотека или пакет у вас есть в вашем проекте, вы должны обязательно добавить типы этого пакета в качестве зависимости разработчика.

  • После того, как все вышеперечисленное будет сделано, обязательно запустите свой проект и убедитесь, что он компилируется без ошибок. Он должен скомпилироваться без ошибок, если были предприняты необходимые шаги.
  • Вернемся к пустому файлу tsconfig.json, который мы создали ранее. В этом файле мы собираемся установить некоторые строгие правила для нашего проекта или приложения. То, что означает и представляет каждая строка, было включено в комментарии.
{
 "compilerOptions": {
   "module": "system", // Specify module code generation
   "noImplicitAny": true,
   "outFile": "../../built/local/tsc.js",
   "allowJs": true, // Allow JavaScript files to be compiled
   "sourceMap": true, // Generate corrresponding .map file
   "strict": true, // Enable all strict type checking options
   "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
   "jsx": "react", // Support JSX in .tsx files
   "moduleResolution": "node", // Resolve modules using Node.js style
   "isolatedModules": true, // Unconditionally emit imports for unresolved files
   "noUnusedParameters": true, // Report errors on unused parameters
 },
 "include": ["src/**/*"],  //this represent the files typescript should checck
 "exclude": ["node_modules", "build"] //this represents the files typescripts shouldnt check
}

N/B: вам не нужно создавать файл tscofig.json при использовании метода CRA, потому что он уже был создан. Все, что вам нужно сделать, это добавить свои собственные правила для проекта в соответствии с вашими предпочтениями.

Я считаю, что это должно дать вам фору и правильное направление для использования машинописного текста и его настройки для проекта.