interface
和 abstract 抽象类想比 interface 中不能有具体代码实现。
类中实现 interface
在类中要实现 interface，需要使用 implements <interface name>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| interface IAnimal {
name: string
getName(): void
}
abstract class Animal {
constructor(public name: string) {}
setName(name: string) {
this.name = name
}
}
class Cat extends Animal implements IAnimal {
constructor(public name: string) {
super(name)
}
public getName(): string {
return this.name
}
}
const cat = new Cat("cat")
cat.setName("dog")
console.log(cat.getName())
|
interface 对对象的约束
interface 对对象的约束，作用和 type 类似
[key: string]: any; 表示对象的键需要是字符串类型，值的累心不做约束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| interface IUser {
name: string
age: number
site?: string
info(): string
[key: string]: any
}
let user: IUser = {
name: "wxw",
age: 25,
sex: "男",
info() {
return `${this.name} ${this.age}`
},
}
|
在函数中使用 interface
1
2
3
4
5
6
7
8
| interface IUser {
name: string
age: number
}
function setUser(user: IUser) {
return user
}
setUser({ name: "wxw", age: 25 })
|
interface 对函数的约束
1
2
3
4
5
6
7
| interface IGetUser {
(name: string): string
}
const getUser: IGetUser = (name: string) => {
return name
}
console.log(getUser("W"))
|
在类中使用 interface
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| interface IUser {
name: string
age: number
}
class User {
_info: IUser
constructor(user: IUser) {
this._info = user
}
get info() {
return this._info
}
}
const user = new User({ name: "whbbit", age: 25 })
console.log(user.info)
|
数组中使用 interface
1
2
3
4
5
6
7
8
9
| interface IUser {
name: string
age: number
}
const user1 = { name: "whbbit", age: 25 }
const user2 = { name: "wxw", age: 25 }
const users: IUser[] = [user1, user2]
|
interface 结合 enum
1
2
3
4
5
6
7
8
9
10
11
12
13
| enum SexType {
BOY,
GIRL,
}
interface IUser {
name: string
age: number
sex: SexType
}
const user1 = { name: "whbbit", age: 25, sex: SexType.BOY }
const user2 = { name: "wxw", age: 25, sex: SexType.GIRL }
const users: IUser[] = [user1, user2]
|
interface 的继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| interface IVoice {
voice(): void
}
interface IAnimal extends IVoice {
name: string
getName(): void
}
|
interface 声明合并
写一个同名 interface 就会实现 interface 的合并。
后面的 interface 和前面的 interface 中不能有同名参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| interface IAnimal {
name: string
getName(): string
}
interface IAnimal {
voice(): string
}
const cat: IAnimal = {
getName() {
return this.name
},
name: "cat",
voice() {
return "miao~"
},
}
console.log(cat.getName())
console.log(cat.voice())
|
type
大多数情况下 type 和 interfere 使用相同
1
2
3
4
5
6
7
8
9
10
11
12
| type TUser = { name: string; age: 25 }
function getUser(user: TUser): TUser {
return user
}
const user: TUser = {
name: "wxw",
age: 25,
}
console.log(getUser(user))
|
type 可以作为基本类型的别名使用，也可以申明联合类型
1
2
| type IsAdmin = boolean
type Sex = "boy" | "girl"
|
type 和 interface 的区别
interface 同名会合并，type 同名会报错
interface 可以继承，type 使用 & 合并
type 可以使用 & 合并 interface 类型
1
2
3
4
5
| type TName = { name: stirng };
type TAge = { age: number };
interface IMember = {member: boolean}
type TUser = TName & TAge & IMember;
|
