React + TypeScript 常用类型汇总（上）-阿里云开发者社区

一、前言

在React项目开发中，写出优雅的、更有意义的typescript代码，是我们一直追求的。本文广东靓仔带小伙伴们一起来看看React项目实际开发中用到的一些常用类型示例。

二、基本prop类型示例

常规的程序中使用的 TypeScript 类型列表：

type AppProps = {
  message: string;
  count: number;
  disabled: boolean;
 /** 一个类型的数组！*/
  names: string[];
  /** 用于指定精确字符串值的字符串文字，使用联合类型将它们连接在一起 */
  status: "waiting" | "success";
  /** 任何对象，只要你不使用它的属性（不常见，但用作占位符）*/
  obj: object;
  obj2: {}; // 和 `object` 差不多，和 `Object` 完全一样  
  /** 具有任意数量属性的对象 (PREFERRED) */
  obj3: {
    id: string;
    title: string;
  };
  /** 对象数组！（常见的） */
  objArr: {
    id: string;
    title: string;
  }[];
  /** 具有任意数量的相同类型属性的 dict 对象 */
  dict1: {
    [key: string]: MyTypeHere;
  };
  dict2: Record<string, MyTypeHere>; // 相当于 dict1   
  /** 任何函数，只要你不调用它（不推荐） */
  onSomething: Function;
   /** 不接受或不返回任何内容的函数（非常常见） */
  onClick: () => void;
   /** 带有命名props的函数（非常常见） */
  onChange: (id: number) => void;
   /** 接受事件的函数类型语法（非常常见） */
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** 接受事件的替代函数类型语法（非常常见） */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  /** 一个可选的props（非常常见！） */
  optional?: OptionalType;
};

三、有用的 React Prop 类型示例

export declare interface AppProps {
  children?: React.ReactNode; // 最好，接受 React 可以渲染的所有内容  
  childrenElement: JSX.Element; // 单个 React 元素  
  style?: React.CSSProperties; // 传递样式props 
  onChange?: React.FormEventHandler<HTMLInputElement>; // 形成事件！泛型参数是 event.target 的类型  
  props: Props & React.ComponentPropsWithoutRef<"button">; // 模拟按钮元素的所有 props 并明确不转发其 ref    
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // 模拟 MyButtonForwardedRef 的所有 props 并显式转发其 ref
}

type还是interface？

这是一个有用的经验法则：

在创作库或第 3 方环境类型定义时，始终用于公共 API 的定义，因为这允许使用者在缺少某些定义时通过声明合并来扩展它们。

考虑为您的 React 组件 Props 和 State 使用，以保持一致性并且因为它受到更多限制。

四、函数组件

这些可以写成普通函数，接受一个props参数并返回一个 JSX 元素。

type AppProps = {
  message: string;
}; /* 如果导出使用 `interface` 以便消费者可以扩展 */ 
// 声明函数组件的最简单方法；推断返回类型。
const App = ({ message }: AppProps) => <div>{message}</div>;
// 您可以选择注释返回类型，这样如果您不小心返回了其他类型，则会引发错误
const App = ({ message }: AppProps): JSX.Element => <div>{message}</div>;
// 你也可以内联类型声明；消除了命名props类型，但看起来重复
const App = ({ message }: { message: string }) => <div>{message}</div>;

hook

useState类型推断对于简单值非常有效：

const [state, setState] = useState(false);
// `state` 被推断为布尔值
// `setState` 只接受布尔值

许多钩子都是用 null-ish 默认值初始化的，你可能想知道如何提供类型。

显式声明类型，并使用联合类型：

const [user, setUser] = useState<User | null>(null);
setUser(newUser);

如果状态在设置后不久初始化并且始终具有以下值，还可以使用类型断言：

const [user, setUser] = useState<User>({} as User);
setUser(newUser);

useReducer您可以将有区别的联合用于 reducer 操作。不要忘记定义reducer的返回类型，否则TypeScript会推断出来。

import { useReducer } from "react";
const initialState = { count: 0 };
type ACTIONTYPE =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: string };
function reducer(state: typeof initialState, action: ACTIONTYPE) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - Number(action.payload) };
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
        -
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
    </>
  );
}

useEffect / useLayoutEffect

useEffect和都useLayoutEffect用于执行副作用并返回一个可选的清理函数，这意味着如果它们不处理返回值，则不需要类型。

使用时useEffect，注意不要返回除函数 or 以外的任何东西undefined，否则 TypeScript 和 React 都会提示你。

这在使用箭头函数时可能很微妙：

function DelayedEffect(props: { timerMs: number }) {
  const { timerMs } = props;
  useEffect(
    () =>
      setTimeout(() => {
        /* do stuff */
      }, timerMs),
    [timerMs]
  );
  // 反面例子！setTimeout 隐式返回一个数字
  // 因为箭头函数体没有用大括号括起来
  return null;
}

useRef

在 TypeScript 中，返回一个只读或可变useRef的引用，取决于您的类型参数是否完全覆盖初始值。选择一个适合您的用例。

1、DOM 元素 ref 访问 DOM 元素：

仅提供元素类型作为参数，并null用作初始值。.current在这种情况下，返回的引用将具有由 React 管理的只读引用TypeScript 期望将此 ref 提供给元素的ref prop：

function Foo() {
  // - 如果可能，请尽可能具体。例如，HTMLDivElement
  // 比 HTMLElement 好，也比 Element 好得多。
  // - 从技术上讲，这会返回 RefObject<HTMLDivElement>
  const divRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    // 注意 ref.current 可能为空。这是意料之中的
    // 有条件地渲染被引用的元素，或者你可能忘记分配它
    if (!divRef.current) throw Error("divRef is not assigned");
    // 现在 divRef.current 肯定是 HTMLDivElement
    doSomethingWith(divRef.current);
  });
   // 将 ref 赋予一个元素，以便 React 可以管理它
  return <div ref={divRef}>etc</div>;
}

如果确定divRef.current永远不会为空，也可以使用非空断言运算符!：

const divRef = useRef<HTMLDivElement>(null!);
// 无需检查是否为空
doSomethingWith(divRef.current);

2、可变值 ref 要具有可变值：提供您想要的类型，并确保初始值完全属于该类型：

function Foo() {
  // 从技术上讲，这将返回 MutableRefObject<number | 空>
  const intervalRef = useRef<number | null>(null);
  // 你自己管理 ref（这就是为什么它被称为 MutableRefObject！）
  useEffect(() => {
    intervalRef.current = setInterval(...);
    return () => clearInterval(intervalRef.current);
  }, []);
  // ref 不会传递给任何元素的 "ref" 属性
  return <button onClick={/* clearInterval the ref */}>Cancel timer</button>;
}

自定义hook如果你在自定义 Hook 中返回一个数组，你会想要避免类型推断，因为 TypeScript 会推断一个联合类型（当你实际上想要在数组的每个位置使用不同的类型时）

import { useState } from "react";
export function useLoading() {
  const [isLoading, setState] = useState(false);
  const load = (aPromise: Promise<any>) => {
    setState(true);
    return aPromise.finally(() => setState(false));
  };
  return [isLoading, load] as const;  // 推断 [boolean, typeof load] 而不是 (boolean | typeof load)[]
}

五、类组件

在TypeScript 中，React.Component是一个泛型类型（aka React.Component），因此希望为它提供（可选）prop 和 state 类型参数：

type MyProps = {
  // 使用 `interface` 也可以
  message: string;
};
type MyState = {
  count: number; // 像这样  
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // 可选的第二个注解，用于更好的类型推断
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

Tips: 可以导出/导入/扩展这些类型/接口以供重用。类方法：像往常一样做，要记住函数的任何参数也需要输入：

class App extends React.Component<{ message: string }, { count: number }> {
  state = { count: 0 };
  render() {
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    );
  }
  increment = (amt: number) => {
    this.setState((state) => ({
      count: state.count + amt,
    }));
  };
}

类属性：如果需要声明类属性以供以后使用，只需将其声明为state，但无需赋值：

class App extends React.Component<{
  message: string;
}> {
  pointer: number; // 像这样
  componentDidMount() {
    this.pointer = 3;
  }
  render() {
    return (
      <div>
        {this.props.message} and {this.pointer}
      </div>
    );
  }
}

getDerivedStateFromProps

派生状态可以使用钩子来实现，这也可以帮助设置memoization。

以下是可以注释的几种方法getDerivedStateFromProps

1、如果已显式键入派生状态并希望确保 from 的返回值getDerivedStateFromProps符合它。

class Comp extends React.Component<Props, State> {
  static getDerivedStateFromProps(
    props: Props,
    state: State
  ): Partial<State> | null {
    //
  }
}

2、希望函数的返回值确定的状态时。

class Comp extends React.Component<
  Props,
  ReturnType<typeof Comp["getDerivedStateFromProps"]>
> {
  static getDerivedStateFromProps(props: Props) {}
}

3、想要具有其他状态字段和记忆的派生状态时

type CustomValue = any;
interface Props {
  propA: CustomValue;
}
interface DefinedState {
  otherStateField: string;
}
type State = DefinedState & ReturnType<typeof transformPropsToState>;
function transformPropsToState(props: Props) {
  return {
    savedPropA: props.propA, // 保存以备memoization
    derivedState: props.propA,
  };
}
class Comp extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      otherStateField: "123",
      ...transformPropsToState(props),
    };
  }
  static getDerivedStateFromProps(props: Props, state: State) {
    if (isEqual(props.propA, state.savedPropA)) return null;
    return transformPropsToState(props);
  }
}

六、form和event

如果需要单独定义事件处理程序，IDE 工具在这里真的很方便，因为 @type 定义带有丰富的类型。输入要查找的内容，通常自动完成功能会为您提供帮助。onChange这是表单事件的样子

type State = {
  text: string;
};
class App extends React.Component<Props, State> {
  state = {
    text: "",
  };
   // 在 = 的右侧输入
  onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({ text: e.currentTarget.value });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.onChange} />
      </div>
    );
  }
}

React.FormEvent<>除了使用and键入参数和返回值void，您还可以将类型应用于事件处理程序本身

// 在 = 的左侧输入
  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    this.setState({text: e.currentTarget.value})
  }

键入 onSubmit，在表单中包含不受控制的组件

如果不太关心事件的类型，可以使用 React.SyntheticEvent。

如果目标表单具有想要访问的自定义命名输入，可以使用类型断言：

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      email: { value: string };
      password: { value: string };
    };
    const email = target.email.value; // 类型检查！ 
    const password = target.password.value; // 类型检查！ 
    // ...
  }}
>
  <div>
    <label>
      Email:
      <input type="email" name="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="Log in" />
  </div>
</form>

事件类型列表

七、Context

基本示例

import { createContext } from "react";
interface AppContextInterface {
  name: string;
  author: string;
  url: string;
}
const AppCtx = createContext<AppContextInterface | null>(null);
// 应用程序中的提供程序
const sampleAppContext: AppContextInterface = {
  name: "Using React Context in a Typescript App",
  author: "thehappybug",
  url: "http://www.example.com",
};
export const App = () => (
  <AppCtx.Provider value={sampleAppContext}>...</AppCtx.Provider>
);
// 在你的应用中使用
import { useContext } from "react";
export const PostInfo = () => {
  const appContext = useContext(AppCtx);
  return (
    <div>
      Name: {appContext.name}, Author: {appContext.author}, Url:{" "}
      {appContext.url}
    </div>
  );
};

扩展示例使用createContext空对象作为默认值

interface ContextState {
  // 使用上下文设置你想要处理的状态类型，例如
  name: string | null;
}
// 设置一个空对象为默认状态
const Context = createContext({} as ContextState);
// 像在 JavaScript 中一样设置上下文提供程序

使用createContext 和 context getters来制作 a createCtx with no ，但无需检查：

import { createContext, useContext } from "react";
const currentUserContext = createContext<string | undefined>(undefined);
function EnthusasticGreeting() {
  const currentUser = useContext(currentUserContext);
  return <div>HELLO {currentUser!.toUpperCase()}!</div>;
}
function App() {
  return (
    <currentUserContext.Provider value="Anders">
      <EnthusasticGreeting />
    </currentUserContext.Provider>
  );
}

注意我们需要的显式类型参数，因为我们没有默认string值：

const currentUserContext = createContext<string | undefined>(undefined);
//                                             ^^^^^^^^^^^^^^^^^^

连同非空断言告诉 TypeScript currentUser肯定会在那里：

return <div>HELLO {currentUser!.toUpperCase()}!</div>;
//

这是不幸的，因为我们知道稍后在我们的应用程序中，a Provider将填充上下文。

有几个解决方案：

1、可以通过断言非空来解决这个问题：

const currentUserContext = createContext<string>(undefined!);

2、我们可以编写一个名为的辅助函数createCtx来防止访问Context未提供值的 a。通过这样做，API 相反，我们不必提供默认值，也不必检查：

import { createContext, useContext } from "react";
/**
* 创建上下文和提供者的助手，没有预先的默认值，并且
* 无需一直检查未定义。
*/
function createCtx<A extends {} | null>() {
  const ctx = createContext<A | undefined>(undefined);
  function useCtx() {
    const c = useContext(ctx);
    if (c === undefined)
      throw new Error("useCtx must be inside a Provider with a value");
    return c;
  }
  return [useCtx, ctx.Provider] as const; // 'as const' 使 TypeScript 推断出一个元组 
}
// 用法：
// 我们仍然需要指定一个类型，但没有默认值！
export const [useCurrentUserName, CurrentUserProvider] = createCtx<string>();
function EnthusasticGreeting() {
  const currentUser = useCurrentUserName();
  return <div>HELLO {currentUser.toUpperCase()}!</div>;
}
function App() {
  return (
    <CurrentUserProvider value="Anders">
      <EnthusasticGreeting />
    </CurrentUserProvider>
  );
}

3、可以更进一步，使用createContext和context getters结合这个想法。

import { createContext, useContext } from "react";
/**
* 创建上下文和提供者的助手，没有预先的默认值，并且
* 无需一直检查未定义。
*/
function createCtx<A extends {} | null>() {
  const ctx = createContext<A | undefined>(undefined);
  function useCtx() {
    const c = useContext(ctx);
    if (c === undefined)
      throw new Error("useCtx must be inside a Provider with a value");
    return c;
  }
  return [useCtx, ctx.Provider] as const; // 'as const' 使 TypeScript 推断出一个元组
}
// 用法
export const [useCtx, SettingProvider] = createCtx<string>();  // 指定类型，但不需要预先指定值
export function App() {
  const key = useCustomHook("key"); // 从钩子中获取值，必须在组件中
  return (
    <SettingProvider value={key}>
      <Component />
    </SettingProvider>
  );
}
export function Component() {
  const key = useCtx(); // 仍然可以在没有空检查的情况下使用！
  return <div>{key}</div>;
}

4、使用createContext and useContext制作一个createCtx with unstated-like 上下文设置器：

import {
  createContext,
  Dispatch,
  PropsWithChildren,
  SetStateAction,
  useState,
} from "react";
export function createCtx<A>(defaultValue: A) {
  type UpdateType = Dispatch<SetStateAction<typeof defaultValue>>;
  const defaultUpdate: UpdateType = () => defaultValue;
  const ctx = createContext({
    state: defaultValue,
    update: defaultUpdate,
  });
  function Provider(props: PropsWithChildren<{}>) {
    const [state, update] = useState(defaultValue);
    return <ctx.Provider value={{ state, update }} {...props} />;
  }
  return [ctx, Provider] as const;  // 或者，[typeof ctx, typeof Provider]
}
// 用法
import { useContext } from "react";
const [ctx, TextProvider] = createCtx("someText");
export const TextContext = ctx;
export function App() {
  return (
    <TextProvider>
      <Component />
    </TextProvider>
  );
}
export function Component() {
  const { state, update } = useContext(TextContext);
  return (
    <label>
      {state}
      <input type="text" onChange={(e) => update(e.target.value)} />
    </label>
  );
}

React + TypeScript 常用类型汇总（上）

一、前言

二、基本prop类型示例

常规的程序中使用的 TypeScript 类型列表：

三、有用的 React Prop 类型示例

四、函数组件

hook

五、类组件

六、form和event

七、Context

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

React + TypeScript 常用类型汇总（上）

一、前言

二、基本prop类型示例

常规的程序中使用的 TypeScript 类型列表：

三、有用的 React Prop 类型示例

四、函数组件

hook

五、类组件

六、form和event

七、Context

热门文章

最新文章

相关课程

相关电子书

相关实验场景