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

Posted 2022-04-01 鲨鱼小猫

声明类组件

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>
    ....