从零构建React+Typescript项目

 一、构建

1、安装 Create-React-App

npm install create-react-app -g

2、创建项目，命名为demo01

create-react-app demo01 --template typescript

项目创建成功后，此时项目结构如下所示：

demo01/
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ .gitignore
├─ images.d.ts
├─ package.json

├─ package-lock.json
├─ README.md
├─ tsconfig.json

 3、运行项目，看看是否能够正常启动

npm start

 二、使用

1、在 src 下创建一个 components 目录，新增 Counter 组件：

import React from 'react';

// 创建接口类型
export interface Iprops {
    value: number
}

// 使用接口代替PropTypes进行类型校验
const Counter = ({ value }: Iprops) => {
    return <p>Clicked：{value} times</p>
}

// 使用类的方式定义
/* class Counter extends React.PureComponent<Iprops> {
    public render() {
        return <p>Clicked：{value} times</p>
    }
} */

export default Counter;

2、在 App.tsx 中引用 Counter 组件并展示

import React from 'react';
import './App.css';

import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Counter value={0}></Counter>
    </div>
  );
}

export default App;