- Сообщения
- 460
- Реакции
- 189
Почему именно TypeScript?
В двух словах, преимущества использования TypeScript включают:
- Выявление ошибок на ранних стадиях процесса разработки.
- Упрощение понимания и сопровождения кода.
- Обеспечение лучшего опыта разработки благодаря таким функциям, как автодополнение и проверка типов.
Начало работы
Чтобы создать новое приложение React с TypeScript, используйте следующую команду:
Код:
npx create-react-app my-app --template typescript
Вот и все, Create React App CLI создаст новое приложение с правильно настроенным TypeScript, и вы сможете сразу же приступить к работе.
Однако если у вас уже есть приложение React, которое вы хотите преобразовать в TypeScript, вам придется выполнить несколько дополнительных шагов.
Однако не волнуйтесь, это довольно просто!
First, install TypeScript and other required packages:
Сначала установите TypeScript и другие необходимые пакеты:
Код:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Теперь переименуйте все файлы с расширением .js в файлы с расширением .tsx и не забудьте перезапустить ваш сервер разработки, прежде чем продолжить.
Также может потребоваться перезапуск редактора кода / IDE.
Последнее, что вам нужно сделать, это создать файл tsconfig.json.
Обычно этот файл создается при создании нового проекта, но поскольку это уже существующий проект, вам придется создать его самостоятельно.
В корневой папке вашего проекта создайте новый файл tsconfig.json и вставьте в него следующее:
Код:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
Это практически все.
Имейте в виду, что включение TypeScript в существующем проекте может "внести" некоторые ошибки, или же обнаружаться конфликты.
Обычно это не страшно и даже может оказаться полезным и помочь вам решить несколько ошибок. Вам нужно будет разобраться с ними, прежде чем продолжать разработку.
Теперь, когда у нас есть работающее приложение TypeScript React, мы можем начать использовать TypeScript для улучшения нашей разработки.
Запись .tsx файлов
Мы начнем с простого компонента React, который отображает заголовок. Затем мы используем TypeScript для добавления типов и безопасности типов в компонент. Наконец, мы скомпилируем код TypeScript в JavaScript и запустим приложение.Сначала создадим простой компонент React, который отображает заголовок:
JavaScript:
import React from 'react';
const Header = () => {
return (
<header>
<h1>Hello, world!</h1>
</header>
);
};
export default Header;
Этот компонент Header не делает многого, он просто отображает элемент заголовка с текстом "Hello, world!". Мы можем написать этот компонент на TypeScript или JavaScript. Для этого примера мы напишем его на TypeScript.
Добавление типов с помощью TypeScript
Теперь, когда у нас есть базовый компонент React, давайте добавим несколько типов с помощью TypeScript. Мы можем начать с добавления типов к нашим props и state:
JavaScript:
import React from 'react';
interface HeaderProps {
message: string;
}
const Header = (props: HeaderProps) => {
return (
<header>
<h1>{props.message}</h1>
</header>
);
};
export default Header;
Как видите, мы добавили интерфейс для наших реквизитов и указали, что реквизит message имеет тип string. Таким образом, если мы попытаемся передать в реквизит message что-либо, отличное от строки, TypeScript выдаст нам ошибку.
Мы также можем добавить типы к нашему состоянию:
JavaScript:
import React, { useState } from 'react';
const [count, setCount] = useState<number>(0);
const Header = (props: HeaderProps) => {
return (
<header>
<h1>{props.message}</h1>
<button onClick={() => setCount(count + 1)}>
Click me!
</button>
<p>You've clicked the button {count} times.</p>
</header>
);
};
export default Header;
Как видите, мы добавили типы для нашего состояния и указали, что переменная состояния count имеет тип number. Таким образом, если мы попытаемся установить для переменной состояния count значение, отличное от числа, TypeScript выдаст нам ошибку.
Исследование безопасности типов в обработчиках событий React
Одним из преимуществ использования TypeScript в React является то, что разработчики могут отлавливать ошибки в обработчиках событий. Обработчики событий - это способ реагирования на пользовательский ввод в приложениях React. Когда происходит событие, например, пользователь нажимает на кнопку, компилятор проверяет тип каждого параметра в функции обработчика событий, а также проверяет возвращаемый тип функции. Если в любом из них есть несоответствие, компилятор выдаст ошибку. Это означает, что разработчики могут отлавливать ошибки в своих обработчиках событий до выполнения кода.Однако при использовании TypeScript с React есть некоторые потенциальные подводные камни. Одна из них заключается в том, что можно написать код, который является правильным TypeScript, но не будет компилироваться из-за ошибки в React. Например, посмотрите на следующий код:
Код:
class MyComponent extends React.Component {
handleClick(event: MouseEvent) {
// do something
}
}
Этот код не скомпилируется из-за ошибки в React: "handleClick" должен быть объявлен как статический метод на "MyComponent". Однако этот код является правильным TypeScript, и он выдаст ошибку только при компиляции с React. Это означает, что при написании кода разработчикам необходимо помнить как о TypeScript, так и о React.
В заключение, TypeScript - это отличный способ улучшить ваш код React. Он поможет вам выявить ошибки, оптимизировать производительность и сделать ваш код более читабельным. Кроме того, его просто интересно использовать.