Используя TypeScript с React, мы получаем отличные возможности для разработчиков по сравнению с другими фреймворками. TypeScript может быть полезен разработчикам React во многих отношениях.
TypeScript позволяет определять сложные type определения в форме интерфейсов. Это полезно, когда у вас есть сложный type, который вы хотите использовать в своем приложении, например объект, содержащий другие свойства. Это приводит к строгим проверкам, которые, в свою очередь, сокращают количество возможных ошибок, которые вы могли бы создать без него.
Ключ к TypeScript в том, что это статически типизированный скрипт. Языки программирования могут иметь статическую или динамическую типизацию; разница в том, когда происходит проверка типа. Переменные статических языков проверяются по типу, что также помогает сделать код более читабельным.
В этом посте я покажу вам, как использовать TypeScript для улучшения кода приложения React, открыв синтаксис для самодокументированного кода.
Совет: используйте Bit для совместного использования и повторного использования компонентов React между приложениями. Вы можете находить компоненты, играть с ними и устанавливать их для более быстрой сборки. Попытайся.
Начало работы с примерами
Установка
Начнем с создания простого проекта React Project с использованием create-react-app. В командном терминале введите:
$ create-react-app typescript-react $ cd typescript-react
Эта команда создаст в вашей папке новый каталог проекта React с именем typescript-react. Давайте внесем некоторые изменения в этот проект, чтобы мы могли использовать TypeScript.
Начнем с установки пары пакетов в качестве зависимостей от этого проекта. Наряду с такими вещами, как webpack и webpack-dev-server, нам также необходимо установить пакет typescript и специальные модули TypeScript, такие как @types/react и @types/react-dom. Также нам понадобится ts-loader для webpack.
$ yarn add webpack webpack-cli webpack-dev-server typescript @types/react @types/react-dom ts-loader
Конфигурация
Откройте каталог проекта в редакторе кода, поддерживающем TypeScript (I ❤️ VS Code), и посмотрите файл package.json. Перепишите объекты scripts, как показано ниже:
"scripts": {
"build": "webpack ./webpack.config.js",
"start": "webpack-dev-server ./webpack.config.js --content-base ./public"
}
Здесь сценарий start использует файл webpack.config.js для запуска webpack-dev-server для разработки приложений в реальном времени и обслуживает папку ./public. Создайте этот файл в корне каталога и напишите в нем следующий код:
module.exports = {
devtool: 'inline-source-map',
entry: './src/app.tsx',
output: {
path __dirname + '/public',
filename: 'build/app.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{test: /\.tsx?$/, loader: 'ts-loader'}
]
}
}
Здесь inline-source-map используется для отладки файлов TypeScript в браузере. ./src/app.tsx указан как точка входа. Я также указал место для сборки пакета внутри объекта output. Нам также необходимо сообщить webpack, что он должен поддерживать все файлы с расширением .ts, .tsx или .js. Наконец, нам нужно указать webpack использовать ts-loader для .tsи .tsx файлов.
Внутри папки public удалите все, кроме файла index.html. Перепишите код внутри этого файла, как показано ниже:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="./build/app.js"></script>
</body>
</html>
В этом коде есть простой div с id «root», в котором мы будем отображать приложение React, а затем загружаем пакет, созданный веб-пакетом.
Затем давайте напишем некоторую конфигурацию для TypeScript. Создайте tsconfig.jsonfile в корне каталога и напишите внутри него следующий код:
{
"compilerOptions": {
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"src"
],
"compileOnSave": false
}
sourceMaps включен для отладки файлов TypeScript в браузере. Нам также нужно сообщить TypeScript, что мы используем commonjs для формата модуля, ориентированного на es5. Но самый важный фрагмент кода здесь - тот, который сообщает jsx о необходимости преобразования в React.createElement. После этого нам нужно сообщить TypeScript, что исходный код находится внутри папки src. Отключите TypeScripts compileOnSave, потому что это будет обрабатывать веб-пакет.
Проверять
Удалите все файлы в папке src и создайте новый файл с именем app.tsx со следующим кодом внутри него:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render(
<div>Use TypeScript with React</div>,
document.getElementById('root')
);
Запустите сценарий start, используя NPM или Yarn. Это запустит сервер разработки webpack и будет обслуживать папку public по адресу localhost:8080.
Компоненты React без сохранения состояния в TypeScript
Написать компоненты React без сохранения состояния на TypeScript просто. Откройте файл app.tsx в папке src и переместите div внутри функции render в компонент без состояния.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
const App = () => <div>Use TypeScript with React</div>;
ReactDOM.render(
<App />,
document.getElementById('root')
);
Используя компоненты, мы можем использовать props для изменения поведения компонента. Передайте prop с именем message компоненту App и используйте его внутри тела функции.
const App = ({message}) => <div>{message}</div>;
TypeScript теперь выдаст нам ошибку о том, что необходимо предоставить свойство message. Чтобы устранить эту ошибку, перепишите функцию render следующим образом:
ReactDOM.render(
<App message="Use TypeScript with React"/>,
document.getElementById('root')
);
Это отлично подходит для функций без сохранения состояния. Мы можем пойти дальше и обозначить эту функцию как React.SFC. Перепишите компонент App следующим образом:
const App: React.SFC<{message: string}> = ({message}) => <div>{message}</div>;
И вы также можете взять определение встроенного типа опоры и переместить его в type:
type AppProps = {message: string}
const App: React.SFC<AppProps> = ({message}) => <div>{message}</div>;
Компоненты Stateful React с использованием TypeScript
Чтобы создать компонент с отслеживанием состояния в React, нам нужно расширить класс React.Component. Этот класс принимает два общих параметра: props и state.
Откройте файл app.tsx внутри папки src и перепишите компонент App как компонент с отслеживанием состояния, как показано ниже:
class App extends React.Component {
render() {
return(
<div>Use TypeScript with React</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Подобно компонентам без состояния, мы можем использовать props для изменения поведения компонента. React.Component принимает props в качестве первого аргумента:
class App extends React.Component <{
message: string
}> {
render() {
return (
<div>{this.props.message}</div>
);
}
}
ReactDOM.render(
<App message="Use TypeScript with React"/>,
document.getElementById('root')
);
Такие компоненты, которые расширяют React.Component, называются с отслеживанием состояния, потому что они могут иметь собственное внутреннее состояние. React.Component принимает второй общий аргумент, определяющий тип состояния.
class App extends React.Component <{
message: string
}, {
count: number,
}> {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
render() {
return(
<div>{this.props.message}{this.state.count}</div>
);
}
}
Здесь я создаю состояние под названием count типа number. Затем это состояние инициализируется внутри constructor. Затем мы можем использовать это состояние в других местах, например, в методе render.
Основная причина наличия локального состояния в компоненте заключается в том, что вы можете управлять им внутри компонента. Внутри компонента App создайте новую функцию с именем increment.
increment = () => {
this.setState({
count: this.state.count + 1
});
}
Вызовите эту функцию для div, который находится внутри функции render компонентов.
render() {
return (
<div onClick={this.increment}>{this.props.message}{this.state.count}</div>
Теперь состояние будет меняться всякий раз, когда пользователь щелкает div, отображаемый в браузере.
Заключение
В этом посте вы увидели, как можно использовать TypeScript, чтобы сделать код наших приложений React более удобным и читаемым.
- Мы начали с изучения пакетов, необходимых для обеспечения совместимости TypeScript с React.
- Затем вы увидели, как настроить TypeScript для приема кода React и как настроить Webpack для отображения этого кода в браузере.
- Наконец, мы узнали, как писать простые компоненты React без сохранения состояния и с отслеживанием состояния с помощью TypeScript.
