关于前端: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>
);