关于前端:ts类型定义记录

Record

Record 用来定义对象的键和值的类型，也就是 key 和value。

// 上面用 Record 定义了一个对象，键 string 类型，值为 any 类型。type query = Record<string, any>;

const params: query = {
    name: 'Duo',
    age: 10,
    desc: undefined,
    children: [],
    target: null,
}

枚举

type Page = "home" | "about" | "contact";

// pageName 为 Page 枚举类型，其值只能为 home\about\contact 三者其一。const pageName: Page = 'home';

枚举也能够与 Record 组合应用

type Page = "home" | "about" | "contact";

// 此时，pages 的 key 只能为 home\about\contact 三者其一。const pages : Record<Page, string> = {home: '首页',}

定义 React 组件

函数申明

interface TitleProps {name: string;}

function Title({name}: TitleProps) {
  return (
    <div className="container">
      {name}
    </div>
  );
}

函数表达式

import React from 'react';

interface TitleProps {name: string;}

const Title: React.FC<TitleProps> = ({name}) => (
  <div className="container">
    {name}
  </div>
);