TypeScript在React中的优雅写法


type BasicProps = {
  message: string;
  count: number;
  disabled: boolean;
  /** 数组类型 */
  names: string[];
  /** 用「联合类型」限制为下面两种「字符串字面量」类型 */
  status: "waiting" | "success";
};

对象类型


type ObjectOrArrayProps = {
  /** 如果你不需要用到具体的属性 可以这样模糊规定是个对象 ❌ 不推荐 */
  obj: object;
  obj2: {}; // 同上
  /** 拥有具体属性的对象类型 ✅ 推荐 */
  obj3: {
    id: string;
    title: string;
  };
  /** 对象数组 😁 常用 */
  objArr: {
    id: string;
    title: string;
  }[];
  /** key 可以为任意 string，值限制为 MyTypeHere 类型 */
  dict1: {
    [key: string]: MyTypeHere;
  };
  dict2: RecordMyTypeHere>; // 基本上和 dict1 相同，用了 TS 内置的 Record 类型。
}


//通过接口定义相应的结构
interface Item {
	name: string,
	icon: string,
    url: string,
	status:boolean,
	initShow:boolean,
    copanyStatus:boolean
}


interface MyObject {
       [key: string]: any;
}

函数类型


// 基本语法
interface InterfaceName {
  (param1: parameterType1,param2:parameterType2... ): returnType;
}
 
// type定义
type FunctionProps = {
  /** 任意的函数类型 ❌ 不推荐 不能规定参数以及返回值类型 */
  onSomething: Function;
  /** 没有参数的函数 不需要返回值 😁 常用 */
  onClick: () => void;
  /** 带函数的参数 😁 非常常用 */
  onChange: (id: number) => void;
  /** 另一种函数语法 参数是 React 的按钮事件 😁 非常常用 */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  (name:string):string;
  /** 可选参数类型 😁 非常常用 */
  optional?: OptionalType;
}

React 相关类型


export declare interface AppProps {
  children1: JSX.Element; // ❌ 不推荐 没有考虑数组
  children2: JSX.Element | JSX.Element[]; // ❌ 不推荐 没有考虑字符串 children
  children4: React.ReactChild[]; // 稍微好点 但是没考虑 null
  children: React.ReactNode; // ✅ 包含所有 children 情况
  functionChildren: (name: string) => React.ReactNode; // ✅ 返回 React 节点的函数
  style?: React.CSSProperties; // ✅ 推荐 在内联 style 时使用
  // ✅ 推荐原生 button 标签自带的所有 props 类型
  // 也可以在泛型的位置传入组件 提取组件的 Props 类型
  props: React.ComponentProps<"button">;
  // ✅ 推荐 利用上一步的做法 再进一步的提取出原生的 onClick 函数类型 
  // 此时函数的第一个参数会自动推断为 React 的点击事件类型
  onClickButton：React.ComponentProps<"button">["onClick"]
}

React元素相关

React元素相关的类型主要包括ReactNode、ReactElement、JSX.Element。

ReactNode。表示任意类型的React节点，这是个联合类型，包含情况众多；

ReactElement/JSX。从使用表现上来看，可以认为这两者是一致的，属于ReactNode的子集，表示“原生的DOM组件”或“自定义组件的执行结果”。

使用示例如下：


const MyComp: React.FC<{ title: string; }> = ({title}) => <h2>{title}h2>;
 
// ReactNode
const a: React.ReactNode =
  null ||
  undefined || <div>hellodiv> || <MyComp title="world" /> ||
  "abc" ||
  123 ||
  true;
 
// ReactElement和JSX.Element
const b: React.ReactElement = <div>hello worlddiv> || <MyComp title="good" />;
 
const c: JSX.Element = <MyComp title="good" /> || <div>hello worlddiv>;

原生DOM相关

原生的 DOM 相关的类型，主要有以下这么几个：Element、 HTMLElement、HTMLxxxElment。

简单来说： Element = HTMLElement + SVGElement。

SVGElement一般开发比较少用到，而HTMLElement却非常常见，它的子类型包括HTMLDivElement、HTMLInputElement、HTMLSpanElement等等。

因此我们可以得知，其关系为：Element > HTMLElement > HTMLxxxElement，原则上是尽量写详细。

类组件


// Second.tsx
 
import * as React from 'react'
import SecondComponent from './component/Second1'
export interface ISecondProps {}
 
export interface ISecondState {
  count: number
  title: string
}
 
export default class Second extends React.Component<
  ISecondProps,
  ISecondState
> {
  constructor(props: ISecondProps) {
    super(props)
 
    this.state = {
      count: 0,
      title: 'Second标题',
    }
    this.changeCount = this.changeCount.bind(this)
  }
  changeCount() {
    let result = this.state.count + 1
    this.setState({
      count: result,
    })
  }
  public render() {
    return (
      <div>
        {this.state.title}--{this.state.count}
        <button onClick={this.changeCount}>点击增加button>
        <SecondComponent count={this.state.count}>SecondComponent>
      div>
    )
  }
}


// second1.tsx
 
import * as React from 'react'
 
export interface ISecond1Props {
  count: number
}
 
export interface ISecond1State {
  title: string
}
 
export default class Second1 extends React.Component<
  ISecond1Props,
  ISecond1State
> {
  constructor(props: ISecond1Props) {
    super(props)
 
    this.state = {
      title: '子组件标题',
    }
  }
 
  public render() {
    return (
      <div>
        {this.state.title}---{this.props.count}
      div>
    )
  }
}

函数组件


// Home.tsx
 
import * as React from 'react'
import { useState, useEffect } from 'react'
import Home1 from './component/Home1'
interface IHomeProps {
  childcount: number;
}
 
const Home: React.FunctionComponent<IHomeProps> = (props) => {
  const [count, setCount] = useState < number > 0
  function addcount() {
    setCount(count + 1)
  }
  return (
    <div>
      <span>Home父组件内容数字是{count}span>
      <button onClick={addcount}>点击增加数字button>
      <Home1 childcount={count}>Home1>
    div>
  )
}
 
export default Home


// Home1.tsx
 
import * as React from 'react'
 
interface IHome1Props {
  childcount: number;
}
 
const Home1: React.FunctionComponent<IHome1Props> = (props) => {
  const { childcount } = props
  return <div>Home组件1--{childcount}div>
}
 
export default Home1


import React from 'react'
 
interface Props {
  name: string;
  color: string;
}
 
type OtherProps = {
  name: string;
  color: string;
}
 
// Notice here we're using the function declaration with the interface Props
function Heading({ name, color }: Props): React.ReactNode {
  return <h1>My Website Headingh1>
}
 
// Notice here we're using the function expression with the type OtherProps
const OtherHeading: React.FC<OtherProps> = ({ name, color }) =>
  <h1>My Website Headingh1>

关于 interface 或 type ，我们建议遵循 react-typescript-cheatsheet 社区提出的准则：

在编写库或第三方环境类型定义时，始终将 interface 用于公共 API 的定义。
考虑为你的 React 组件的 State 和 Props 使用 type ，因为它更受约束。”

让我们再看一个示例：


import React from 'react'
 
type Props = {
   /** color to use for the background */
  color?: string;
   /** standard children prop: accepts any valid React Node */
  children: React.ReactNode;
   /** callback function passed to the onClick handler*/
  onClick: ()  => void;
}
 
const Button: React.FC<Props> = ({ children, color = 'tomato', onClick }) => {
   return <button style={{ backgroundColor: color }} onClick={onClick}>{children}button>
}

在此

事件类型	解释
`ClipboardEvent`	剪切板事件对象
`DragEvent`	拖拽事件对象
`ChangeEvent`	Change事件对象
`KeyboardEvent`	键盘事件对象
`MouseEvent`	鼠标事件对象
`TouchEvent`	触摸事件对象
`WheelEvent`	滚轮时间对象
`AnimationEvent`	动画事件对象
`TransitionEvent`	过渡事件对象

相关阅读:
21、ila
Python学习笔记--生成器
牛客网基础知识强化巩固-周结03
Android 12.0 开启蓝牙状态栏即显示蓝牙图标
幻核退出 “数字藏品有何用”阶段性无解
webpack
SpringSecurity认证和授权流程详解
水塘抽样（应用场景+算法步骤+算法证明+Python实现）
最小生成树算法之 Kruskal 和 Prim
【愚公系列】2022年12月使用win11系统自带SSH，远程控制VMware中Liunx虚拟机系统

原文地址：https://blog.csdn.net/duansamve/article/details/126767053