React
Реагирование, установка Webpack & TypScript
Поиск…
замечания
Чтобы получить подсветку синтаксиса в вашем редакторе (например, код VS), вам нужно будет загрузить информацию для ввода модулей, которые вы используете в своем проекте.
Скажем, например, вы используете React и ReactDOM в своем проекте, и вы хотите получить подсветку и Intellisense для них. Вам нужно будет добавить типы в свой проект, используя следующую команду:
npm install --save @types/react @types/react-dom
Теперь ваш редактор должен автоматически забрать эту информацию и предоставить вам автозаполнение и Intellisense для этих модулей.
webpack.config.js
module.exports = {
entry: './src/index',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.ts', '.tsx']
}
};
Основные компоненты являются (в дополнении к стандартному entry , output и другим свойствам WebPack):
Погрузчик
Для этого вам нужно создать правило, которое проверяет расширения файлов .ts и .tsx , в качестве загрузчика укажите ts-loader loader.
Устранение расширений TS
Вам также нужно добавить расширения .ts и .tsx в массив resolve , или webpack их не увидит.
tsconfig.json
Это минимальный tsconfig, чтобы вы могли работать.
{
"include": [
"src/*"
],
"compilerOptions": {
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true
}
}
Давайте рассмотрим свойства один за другим:
include
Это массив исходного кода. Здесь у нас есть только одна запись, src/* , которая указывает, что все в каталоге src должно быть включено в компиляцию.
compilerOptions.target
Указывает, что мы хотим скомпилировать целевой объект ES5
compilerOptions.jsx
Установка этого значения в true заставит TypeScript автоматически скомпилировать ваш синтаксис React.createElement("div") из <div /> в React.createElement("div") .
compilerOptions.allowSyntheticDefaultImports
Удобное свойство, которое позволит вам импортировать модули узла, как если бы они были модулями ES6, поэтому вместо того, чтобы делать
import * as React from 'react'
const { Component } = React
вы можете просто сделать
import React, { Component } from 'react'
без каких-либо ошибок, сообщая вам, что React не имеет экспорта по умолчанию.
Мой первый компонент
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
interface AppProps {
name: string;
}
interface AppState {
words: string[];
}
class App extends Component<AppProps, AppState> {
constructor() {
super();
this.state = {
words: ['foo', 'bar']
};
}
render() {
const { name } = this.props;
return (<h1>Hello {name}!</h1>);
}
}
const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);
При использовании TypeScript с React, как только вы загрузите определения типа React DefinitelyTyped ( npm install --save @types/react ), каждый компонент потребует добавления аннотаций типа.
Вы делаете это так:
class App extends Component<AppProps, AppState> { }
где AppProps и AppState - это интерфейсы (или псевдонимы типов) для реквизита ваших компонентов и состояния соответственно.