Vue3+TypeScript从入门到精通系列之：TypeScript接口_vue3 typescript 接口 类

一、TypeScript接口

(() => {

//定义一个接口，该接口作为person对象的类型使用

interface IPerson{
//readonly id number
  id: number
  name: string
  age: number
  //?可有可无
  sex?: string
}

//定义一个对象，该对象类型的类型就是定义的接口IPerson

const person:IPerson = {
id:1,
name:"犬夜叉",
age:18,
}

console.log(person)
person.id = 2
console.log(person)

//最简单判断使用readonly还是const方法，
//要看把它作为变量使用还是作为属性
//作为变量使用const
//作为属性使用readonly

})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• 最简单判断使用readonly还是const方法，要看把它作为变量使用还是作为属性
• 作为变量使用const
• 作为属性使用readonly

输出如下所示：

{ id: 1, name: '犬夜叉', age: 18 }
{ id: 2, name: '犬夜叉', age: 18 }
1
2

二、TypeScript接口转化为js

tsc ./接口.ts
1

(function () {
    //定义一个接口，该接口作为person对象的类型使用
    //定义一个对象，该对象类型的类型就是定义的接口IPerson
    var person = {
        id: 1,
        name: "犬夜叉",
        age: 18
    };
    console.log(person);
    person.id = 2;
    console.log(person);
})();
1
2
3
4
5
6
7
8
9
10
11
12

三、查看js输出

node ./接口.js
{ id: 1, name: '犬夜叉', age: 18 }
{ id: 2, name: '犬夜叉', age: 18 }
1
2
3