React+Typescript规范

最新推荐文章于 2024-07-22 00:27:59 发布

youlinaixu

最新推荐文章于 2024-07-22 00:27:59 发布

阅读量352

点赞数 1

分类专栏： ts 文章标签： typescript react interface

本文链接：https://blog.csdn.net/youlinaixu/article/details/111997335

版权

本文介绍了在React中使用TypeScript时的规范，包括如何定义类型，如使用`createRef`、Partial Types来处理state和props，以及利用typeof推断类型。同时，文章探讨了type与interface的相似之处和差异，如两者都能描述对象和函数，支持拓展，并讨论了接口合并的特点。

摘要由CSDN通过智能技术生成

React+Typescript规范

定义用到的类型：

type AppProps = {
   
  message: string;
  count: number;
  disabled: boolean;
  /** array of a type! */
  names: string[];
  /** string literals to specify exact string values, with a union type to join them together */
  status: "waiting" | "success";
  /** any object as long as you dont use its properties (NOT COMMON but useful as placeholder) */
  obj: object;
  obj2: {
   }; // almost the same as `object`, exactly the same as `Object`
  /** an object with any number of properties (PREFERRED) */
  obj3: {
   
    id: string;
    title: string;
  };
  /** array of objects! (common) */
  objArr: {
   
    id: string;
    title: string;
  }[];
  /** a dict object with any number of properties of the same type */
  dict1: {
   
    [key: string]: MyTypeHere;
  };
  dict2: Record<string, MyTypeHere>; // equivalent to dict1
  /** any function as long as you don't invoke it (not recommended) */
  onSomething: Function;
  /** function that doesn't take or return anything (VERY COMMON) */
  onClick: () => void;
  /** function with named prop (VERY COMMON) */
  onChange: (id: number) => void;
  /** alternative function type syntax that takes an event (VERY COMMON) */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  /** an optional prop (VERY COMMON!) */
  optional