Why

• 在vue中使用接口和泛型，其实是一种很常见的操作，其中跟我之前学的C#还是略微有点差别的。

How

• 首先，根据习惯，需要在src下面新建一个文件夹types，然后下面新建一个文件index.ts。直接上代码：

//声明接口
export interface PersonInterface {

    name: string;

    age: number;

    phone: string;

}

  
//以下是两种泛型的定义方式
// export type Person1 = Array<PersonInterface>;

export type Persons = PersonInterface[];

• 注意这里的string是小写。
• 使用示例：

import { type PersonInterface, type Persons } from '@/types/index'

  

let person1: PersonInterface = reactive({

  name: "Peng",

  age: 3,

  phone: '15154',

});

let persons: Array<PersonInterface> = [

  { name: "Peng", age: 3, phone: '15154' },

  { name: "January", age: 5, phone: '15154' },

  

]
  

let persons1= reactive<Persons>({

  person1: { name: "Peng", age: 3, phone: '15154' },

  person2: { name: "January", age: 5, phone: '15154' },

})

• 注意上述是有两种方式可以定义数组的PersonInterface的。

Tips

• 最好要写成这种写法：let persons1= reactive<Persons>