基于TS的cra项目

删除项目目录

1. $ rm -rf node_modules
2. $ cd ..
3. $ rm -rf 项目名

创建基于ts的项目

$ create-react-app 项目名称 —template=typescript

import { Component } from 'react'
interface P { // 约定组件属性的数据类型
}
interface S { // 约定组件状态的数据类型
  name?: string
}
export default class App extends Component<P, S> {
  state = {
    name: 'syukinmei'
  }
  setName = () => {
    console.log(1)
    this.setState({
      name: 'ebiebi'
    })
  }
  render() {
    return (
      <>
        {this.state.name} <br />
        <Child content='ebiebi' setName={this.setName} />
      </>
    )
  }
}
interface PP {
  content: string
  setName: () => void
}
interface SS {
  flag: boolean
}
class Child extends Component<PP, SS>{
  constructor(props: PP) {
    super(props)
    this.state = {
      flag: true
    }
  }
  render() {
    return (
      <>
        <button onClick={this.props.setName}>setName</button>
        {this.props.content}
      </>
    )
  }
}
// Child组件为函数式组件时
interface PP {
  content: string
  setName: () => void
}
function Child(props:PP){
  return(
    <>
    {props.content}
    <button onClick={props.setName}>setName</button>
    </>
  )
}