Как использовать Typescript с Create React App
Development, Java | Комментировать запись
Create React App предоставляет набор пакетов и конфигураций, необходимых для начала работы над приложением React. Версия 2.0 представила официальную поддержку TypeScript, что позволило пользователям JavaScript писать код во фронтенд среде React с применением соглашений TypeScript.
TypeScript – это мощный инструмент, который помогает писать более надежный и самодокументированный код и позволяет разработчикам быстрее обнаруживать ошибки.
В этом руководстве вы научитесь настраивать приложение React с помощью TypeScript и Create React App.
Требования
- Локальная установка Node.js. Инструкции по установке зависят от дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
- Базовое знакомство с React.
- Некоторое знакомство с соглашениями TypeScript.
- Рекомендуется также установить современный редактор кода, поддерживающий подсказки. Например, Visual Studio Code предоставляет эту функцию через IntelliSense.
Это руководство было проверено на версиях Node v15.13.0, npm v7.8.0, react-scripts v4.0.3, response v17.0.2 и typescript v4.2.3.
Создание приложения в среде TypeScript+Create React App
Сначала откройте окно терминала и перейдите в каталог, в котором вы хотите создать свой проект.
Затем используйте команду create-response-app с флагом –template typescript:
npx create-react-app cra-typescript-example --template typescript
В терминале вы увидите сообщение:
Creating a new React app in [..]/cra-typescript-example. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template-typescript...
Флаг –template typescript сообщает Create React App, что ему нужно выполнить сборку с помощью шаблона cra-template-typescript. Это добавит главный пакет TypeScript.
Примечание: В предыдущих версиях Create React App можно было использовать флаг –typescript, но на сегодняшний день этот параметр устарел.
После завершения установки у вас будет новое приложение React с поддержкой TypeScript. Перейдите в каталог этого проекта и откройте его в редакторе кода.
Файл tsconfig.json
Возможно, вы обратили внимание, что в окне вашего терминала отображается следующее сообщение:
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you. Your tsconfig.json has been populated with default values.
Файл tsconfig.json используется для настройки проектов TypeScript, точно так же, как package.json используется для проектов JavaScript.
Файл tsconfig.json, автоматически созданный Create React App, будет выглядеть следующим образом:
{
"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"
]
}
Эта конфигурация устанавливает несколько правил компиляции и версий ECMAScript.
Файл App.tsx
Теперь давайте откроем файл App.tsx:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Если вы раньше работали с Create React App, вы могли заметить, что этот файл очень похож на файл App.js, который Create React App генерирует и для других сборок, не связанных с TypeScript. То есть в получаете ту же базу, что и проекты JavaScript, отличие лишь в том, что здесь в конфигурацию встроена поддержка TypeScript.
Давайте теперь создадим компонент TypeScript и рассмотрим преимущества, которые он может дать.
Создание компонента TypeScript
Для начала добавим в файл App.tsx функциональный компонент:
function MyMessage({ message }) {
return <div>My message is: {message}</div>;
}
Этот код будет принимать значение message из props. Он отобразит div с текстом My message is: и значением сообщения.
Теперь давайте попробуем с помощью TypeScript сообщить этой функции, что ее параметр message должен быть представлен строкой.
Если вы уже знакомы с TypeScript, вы можете подумать, что вам следует добавить message: string в message. Однако в этой ситуации нужно определить типы для всех props как объекта.
Есть несколько способов добиться этого.
Например, можно определить встроенные типы:
function MyMessage({ message }: { message: string }) {
return <div>My message is: {message}</div>;
}
Определить объект props:
function MyMessage(props: { message: string }) {
return <div>My message is: {props.message}</div>;
}
Использовать отдельный интерфейс:
interface MyMessageProps {
message: string;
}
function MyMessage(props: MyMessageProps) {
return <div>My message is: {props.message}</div>;
}
Также можно создать interface и переместить его в отдельный файл, чтобы типы могли храниться в другом месте.
Мы сказали этому компоненту, что в качестве значения для параметра message он может принимать только string. Теперь давайте попробуем использовать это внутри нашего компонента App.
Компоненты TypeScript
Давайте используем компонент MyMessage, добавив его в логику рендеринга.
Компонент начинается с:
<MyMessage
Если ваш редактор кода поддерживает автозаполнение, вы заметите на экране подпись компонента, когда начнете вводить его.
Это поможет вам получить ожидаемые значения и типы без необходимости возвращаться к компоненту. Особенно это полезно при работе с несколькими компонентами в отдельных файлах.
Типы свойств
Теперь начните вводить свойства:
<MyMessage messa
Обратите внимание: когда вы начнете вводить слово message, на экране появится подсказка. В нашем случае это будет (JSX attribute) message: string.
Типы ошибок
Попробуйте теперь передать в message числовое значение, а не строчное.
<MyMessage message={10} />
В таком случае TypeScript выдаст ошибку и поможет отследить проблему в коде.
React даже не скомпилируется, если в коде есть подобные ошибки. В данном случае он выдаст предупреждение:
Type 'number' is not assignable to type 'string'
Заключение
В этом руководстве мы рассказали, как настроить приложение React с помощью TypeScript и Create React App.
В TypeScript можно создавать типы для всех компонентов и свойств. А с помощью современных редакторов кода вы можете пользоваться автозаполнением и подсказками по коду. Кроме того, вы будете быстрее обнаруживать ошибки, поскольку TypeScript даже не позволяет проекту компилироваться, если видит проблемы с кодом.
Tags: Create React App, React, TypeScript