Use of interface, type and Record in vite+vue3+ts
- Use of interface, type and Record in vite+vue3+ts
interface: interface
Chinese official document: https://www.tslang.cn/docs/handbook/interfaces.html
type: type alias
https://www.tslang.cn/docs/handbook/advanced-types.html
https://www.typescriptlang.org/docs/handbook/2/keyof-types.html
basic type
type Person = string;
combination
interface People {
name: string,
weight: number
}
type Animal = {
name: string,
}
type Cat = People | Animal
type Fruit = 'apple' | 'pear' | 'orange';
type Vegetable = 'broccoli' | 'carrot' | 'lettuce';
// 'apple' | 'pear' | 'orange' | 'broccoli' | 'carrot' | 'lettuce';
type HealthyFoods = Fruit | Vegetable;
const bf: HealthyFoods = 'broccoli';
console.log(bf);
const useDemo = function (food: HealthyFoods) {
console.log(`Eating ${food}`);
}
useDemo('carrot');
tuple
Tuples combine values of different types in a predefined order, each position has a fixed type, and the order of the positions is determined when it is defined
type ResponseCode = [string, number];
interface Dog {
name: string;
}
interface Cat {
age: number;
}
type Animal = [Dog, Cat];
// 创建一个 Animal 元组实例
const animal1: Animal = [
{ name: "Fido" },
{ age: 3 }
];
console.log(animal1[0].name); // 输出: "Fido"
console.log(animal1[1].age); // 输出: 3
type capture
const orange = { color: "Orange", vitamin: 1}
// { color: string, vitamin: number }
type Fruit = typeof orange
let apple: Fruit;
apple = { color: "Red", vitamin: 2 }
type will automatically capture that color is a string type and vitamin is a number type
let div = document.createElement("div");
type B = typeof div; // HTMLDivElement
traverse properties
type Keys = "firstName" | "lastName";
type Name = {
[key in Keys]: string;
};
const myName: Name = {
firstName: "kelen",
lastName: "huang",
};
expand
interface is always extensible
interface extends interface (merged)
interface Animal {
name: string
}
interface Animal {
honey: boolean
}
// 定义bear的实例
const bear: Animal = {
name: 'wine',
honey: true
}
interface extends interface (inheritance)
interface Animal {
name: string
}
interface Bear extends Animal {
honey: boolean
}
const bear: Bear = {
name: 'wine',
honey: true
}
// 如果不写honey属性就会报错
type extends type (merge)
After the type is created, it cannot be changed, and it cannot be extended by the same name, only by &
de-extending
type Animal {
name: string
}
type Bear & Animal {
honey: boolean
}
// 定义bear的实例
const bear:Bear = {
name: 'wine',
honey: true
}
interface extension type
type Animal = {
name: string,
}
interface Bear extends Animal {
honey: boolean;
}
type extends interface
interface Animal {
name: string,
}
type Bear = Animal & {
honey: boolean
}
Record
https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type
Record<key type, value type>
The firstkey
value type, the second isobj[key]
the data typeRecord<string, unknown>
any object
easy to use
let termMap1 = {} as Record<string, string>;
// 定义对象 Record<string, string> 第一个string为key值,第二个为obj[key]数据的类型
termMap1 = {
age:10, // 不能将类型“number”分配给类型“string”。
num:'11'
}
console.log('termMap1',termMap1 );
complex object
// Record 来限制 对象的key和value
type P = {
[key: string]: number;
};
let p: P = { ppp: 10, ooo: 10 };
// k不是泛型 K泛型
// 01 Record 来限制 对象的key和value
type PP = Record<string, number>;
let pp: PP = {
ppp: 10,
ooo: 10,
};
type PP2 = Record<string, string>;
let pp2: PP2 = {
ppp: "10", // ppp: '10' 不能将类型“number”分配给类型“string”
ooo: "10",
};
// 02 Record 来限制 复杂对象的key和value
interface term {
info: number;
checked: boolean;
}
type TermMap = Record<string, term>;
// item项目 key:string value: { info: 10, checked: true }
let termMap: TermMap = {
xxx: {
info: 10,
checked: true,
},
};
// 03 Record 来限制 复杂对象的key和value
interface info_config {
name: string;
}
interface term2 {
info: info_config;
checked: boolean;
}
let termMap2 = {} as Record<string, term2>;
// 定义对象 Record<string, string> 第一个string为key值,第二个为obj[key]数据的类型
termMap2 = {
xxx: {
info: {
name: "111",
},
checked: true,
},
};
// 04 Record 来限制 复杂对象的key和value
interface info_config3 {
name: string[];
}
interface term3 {
info: info_config3;
checked: boolean;
}
let termMap3 = {} as Record<string, term3>;
// 定义对象 Record<string, string> 第一个string为key值,第二个为obj[key]数据的类型
termMap3 = {
xxx: {
info: {
name: ["1", "2"],
},
checked: true,
},
};