Работа с Create React App 2 и TypeScript

26 мая, 2020 12:34 пп 669 views | Комментариев нет

, | | Комментировать запись

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

В этом мануале мы рассмотрим создание приложения React с помощью TypeScript и Create React App.

Запуск Create React App и TypeScript

Для начала используйте команду create-react-app с флагом –typescript:

npx create-react-app my-typescript-app --typescript
→ batcave npx create-react-app my-app --typescript
npx: installed 63 in 1.553s
creating a new React app in /mnt/c/Users/chris/Documents/batcaaave/my-app.

Давайте посмотрим, какие пакеты предоставляет флаг –typescript и какие изменения он вносит.

Дополнительные пакеты TypeScript

Флаг –typescript добавит основной пакет TypeScript.

Мы также получим такое уведомление:

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Файл tsconfig.json – это конфигурации проектов TypeScript (по аналогии файл package.json – конфигурации для проектов JS).

Файл tsconfig.json по умолчанию будет выглядеть примерно так:

{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": ["src"] }

Файл app.tsx

Давайте перейдем в главный файл app.tsx (как правило, это главный компонент React).

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
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;

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

Теперь давайте создадим компонент TypeScript и посмотрим, какие преимущества он нам дает.

Создание компонента TypeScript

Начнем с создания обычной функции компонента в этом же файле App.tsx:

function MyMessage({ message }) {
return <div>i shall speak! my message is: {message}</div>;
}

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

Если вы знакомы с TypeScript, вы можете подумать, что в сообщение нужно добавить следующее: message: string. В этой ситуации мы должны определить все props как объекты. Есть несколько способов сделать это.

Можно применить встраиваемые типы:

function MyMessage({ message }: { message: string }) {
return <div>i shall speak! my message is: {message}</div>;
}

Объект реквизита:

function MyMessage(props: { message: string }) {
return <div>i shall speak! my message is: {props.message}</div>;
}

Отдельные объекты:

interface MyMessageProps {
message: string;
}
function MyMessage({ message }: MyMessageProps) {
return <div>i shall speak! my message is: {props.message}</div>;
}

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

Этот компонент в качестве параметра message принимает только строку. Теперь давайте попробуем использовать его в компоненте App.

Использование компонентов TypeScript

Давайте попробуем использовать компонент MyMessage.

Когда мы будем вводить его, VS Code покажет код компонента прямо при вводе. Благодаря этому нам не нужно возвращаться к компоненту (особенно если он находится в другом файле), чтобы увидеть, каким должен быть ввод.

Теперь давайте используем каждый реквизит отдельно.

Проверка типов реквизитов

Как только мы начнем вводить message, мы увидим, каким должен быть этот реквизит:

|<MyMessage messa
|        🔧 message
|                  (JSX attribute) message: string

Проверка ошибок типов

Если в качестве сообщения мы введем число, TypeScript выдаст ошибку и поможет нам отследить эту ошибку ввода.

[ts] Type ‘number’ is not assignable to type ‘string’.
App.tsx(5, 35): The expected type comes from property ‘message’ which is declared here on type ‘IntrinsicAttributes & {

React даже не скомпилируется, если в коде будет подобная ошибка. Вы получите сообщение:

Failed to compile

Заключение

Это лишь краткое описание функций и возможностей TypeScript. Вы можете создавать типы для всех ваших компонентов и реквизитов, а с помощью VS Code вы можете их читать. Также вы можете быстрее обнаруживать ошибки, поскольку TypeScript просто не даст проекту компилироваться, если в нем есть ошибки или опечатки.

Читайте также:

Tags: , , ,

Добавить комментарий