React中使用TypeScript的常用注意点（看这一篇就够啦~）

声明类组件

interface Props {
    sex:string
}

interface State {   
    name: string;
}

class student extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      name: "不写作文的李华"
    };
  }

  render() {
    return (
        <div>
            name:{this.state.name}
            sex:{this.props.sex}
        </div>
    );
  }
}

函数组件

//写法1
interface IProps {
  id: number;
  name: string;
}

const Robot: React.FC<IProps> = ({ id, name }) => {
  return (
    <li>
      <p>{name}</p>
      <p>{id}</p>
    </li>
  );
};

//写法2
interface IProps {
  id: number;
  name: string;
}

const Robot = ({ id, name }:IProps) => {
  return (
    <li>
      <p>{name}</p>
      <p>{id}</p>
    </li>
  );
};

CSS

• 使用办法1，创建一个style.module.css(里面直接写css)

创建style.d.ts文件，里面写下如下代码
declare module "*.css" {
  const css: { [key: string]: string };
  export default css;
}
直接在txs文件中引用（使用import语句）

• 使用办法2，css变量，变量类型为CSSProperties

const oneStyle:CSSProperties = {
    width:"500px",
    height:"400px"
}

图片

• 和js一样，使用import就可以使用

事件处理函数和事件

• 可以给事件处理函数定义类型，也可以只给事件定义类型，或者同时写上也ok
• 处理函数的类型（请百度）

//这里举个例子
const changeFunction:React.ChangeEventHandler<HTMLInputElement> = (event)=>{}
return(
    <div>
        <input onChange={changeFunction}/>
    </div>
)

• 事件的类型

//这里举个例子
//其中HTMLButtonElement规定了CurrentTarget的类型，MouseEvent规定了target的类型
const clickFunction = (event:React.MouseEvent<HTMLButtonElement, MouseEvent>)=>{}
return(
    <div>
        <button onClick={clickFunction}/>
    </div>
)

axios

• axios的类型需要从安装的axios中引入

import axios, { AxiosInstance, AxiosRequestConfig, AxiosPromise,AxiosResponse } from 'axios'; // 引入axios和定义在node_modules/axios/index.ts文件里的类型声明

 // 定义接口请求类，用于创建axios请求实例
class HttpRequest {
  // 接收接口请求的基本路径
  constructor(public baseUrl: string) { 
    this.baseUrl = baseUrl;
  }
  
  // 调用接口时调用实例的这个方法，返回AxiosPromise
  public request(options: AxiosRequestConfig): AxiosPromise { 
    // 创建axios实例，它是函数，同时这个函数包含多个属性
    const instance: AxiosInstance = axios.create() 
    // 合并基础路径和每个接口单独传入的配置，比如url、参数等
    options = this.mergeConfig(options) 
    // 调用interceptors方法使拦截器生效
    this.interceptors(instance, options.url) 
    // 返回AxiosPromise
    return instance(options) 
  }
  
  // 用于添加全局请求和响应拦截
  private interceptors(instance: AxiosInstance, url?: string) { 
    // 请求和响应拦截
  }
  
  // 用于合并基础路径配置和接口单独配置
  private mergeConfig(options: AxiosRequestConfig): AxiosRequestConfig { 
    return Object.assign({ baseURL: this.baseUrl }, options);
  }
}
export default HttpRequest;

hooks中注意点

• useState

const [count, setCount] = useState<number>(1)

//初始值为空时候，需要写为联合类型
const [count, setCount] = useState<number | null>(null);

//初始值为空对象，一定要断言
const [user, setUser] = React.useState<IUser>({} as IUser);

• useRef

//nameInput是只读
const nameInput = React.useRef<HTMLInputElement>(null)

//nameInput是可改
const nameInput = React.useRef<HTMLInputElement | null>(null);			

• useContext

interface ICo1or {
    color: string;
 }
const colorcontext = React.createcontext<Ico1or>)({ 
    color: "green" });

路由

• 路由子组件中

import {RouteComponentProps} from "react-router-dom";
//注意RouteComponentProps不仅仅是一个接口，还是一个泛型接口，你可以为props约定接口
class App extends React.Component<RouteComponentProps,IState>{
    ....
}