边写组件，边学ts（type和interface、元组、implements和extends、Record、omit）

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

在写form表单的时候，根据vant和element-plus的vue3组件，看到很多ts的语法，因为ts相当于基本没学，使用到的时候才去查，使用完之后也一下子就忘记了，现在在这就把遇到不会的都给记录下来吧，加深印象，同时好好学学ts

type和interface

type和interface的功能很相似，都是定义数据类型

type的使用

type typeTest = "home" | "about" | "test";
type animals = { 
  name: string
  value: number
}
type animalsValue = animals & {
    type: string
}
//等价于
type animalsValue = {
    name: string
    value: number
    type: string
}

interface的使用

interface FieldAttribute {
  desc: string; // 描述
  is_edit: number; //是否可编辑
  is_required: number; //是否必填
  visible: boolean; //是否可见
  max: number; // 最大值
  min: number; //最小值
  name: string; //字段名称
  placeholder: string;
  type: string; //控件类型
}

type和interface的区别

interface可以声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/

inerface 支持同时声明，默认导出而type必须先声明后导出

export default interface Config {
  name: string;
}
// 同一个js模块只能存在一个默认导出哦
 type Config2 = {name: string}
  export default Config2

类型别名可以用于其它类型，interface不支持

type xData = { x: number };
type yDate = { y: number };

// union(联合)
type PartialPoint = xData | yDate;

// tuple(元祖)
type Data = [xData, yDate];

//primitive(原始值)
type Name = Number;

type 能使用 in 关键字生成映射类型，但 interface 不行。

type Keys = 'name' | 'value';

type DudeType = {
  [key in Keys]: string;
};

const test: DudeType = {
  name: 'gg',
  value: 'mm',
};

怎么判断使用

网上找到的一些总结

一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type
type可以声明任意类型，但是在类和对象方面，可扩展性较差。interface只能声明类和对象，其他基础类型不能声明。interface更像是type在类和对象上的一个升级版。建议：基础数据类型用type，类和对象用interface

元组

元组 Tuple 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string和number类型的元组。

implements和extends

implements

顾名思义，实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能

extends

顾名思义，继承，一个新的接口或者类，从父类或者接口继承所有的属性和方法，不可以重写属性，但可以重写方法

接口不能实现接口或者类，所以实现只能用于类身上,即类可以实现接口或类接口可以继承接口或类类不可以继承接口，类只能继承类可多继承或者多实现

Record

类似数组、字符串、数组、接口这些常见的类型都非常常见，但是如果要定义一个对象的 key 和 value 类型该怎么做，我们可以使用ts的Record

interface PageInfo {
  title: string;
}

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

const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  test: { title: "test" },
  home: { title: "home" },
};

omit

3.5 版本之后，TypeScript 在 lib.es5.d.ts 里添加了一个 Omit<T, K> 帮助类型。Omit<T, K> 类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型：

type User = {
name: string;
age: string;
height: string;
};

type UserWithoutHeight = Omit<User, "height">;

// 等价于
type UserWithoutHeight = {
name: string;
age: string;
};