ts：react中使用ts遇到的坑总结_react中import引入不进ts

编写一个 TSX 组件

import React from 'react' 
import ReactDOM from 'react-dom'

const App = () => {
 return (
  <div>Hello world</div>
 )
}
ReactDOM.render(<App />, document.getElementById('root')
1
2
3
4
5
6
7
8
9

上述代码运行时会出现以下错误
Cannot find module 'react'
Cannot find module 'react-dom'
错误原因是由于 React 和 React-dom 并不是使用 TS 进行开发的，所以 TS 不知道 React、 React-dom 的类型，以及该模块导出了什么，此时需要引入 .d.ts 的声明文件

安装 React、 React-dom 类型定义文件

yarn add @types/react @types/react-dom
1

有状态组件开发

import * as React from 'react';
interface IProps {
  color: string,
  size?: string,
}
interface IState {
  count: number,
}
class App extends React.Component<IProps, IState> {
  public state = {
    count: 1,
  }
  public render () {
    return (
      <div>Hello world</div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18