【Typescript】学习笔记（三）之接口与泛型的使用_接口定义泛型函数(1)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

age: 20,
sex: ‘男’
}

类型检查器会查看对象内部的属性是否与 IPerson 接口描述一致, 如果不一致就会提示类型错误。


  

#### 可选属性


接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。

interface IPerson {
id: number
name: string
age: number
sex?: string
}

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 `?` 符号。


可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。

const person2: IPerson = {
id: 1,
name: ‘tom’,
age: 20
// sex: ‘男’ // 可以没有
}

  

#### 只读属性


一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 `readonly` 来指定只读属性:

interface IPerson {
readonly id: number
name: string
age: number
sex?: string
}

一旦赋值后再也不能被改变了。

const person2: IPerson = {
id: 2,
name: ‘tom’,
age: 20
// sex: ‘男’ // 可以没有
// xxx: 12 // error 没有在接口中定义, 不能有
}
person2.id = 2 // error

  

##### readonly vs const


最简单判断该用 `readonly` 还是 `const` 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 `const`，若做为属性则使用 `readonly`。


  

#### 索引类型

interface FrontLanguage {
[index: number]: string
}

const frontend: FrontLanguage = {
1: “HTML”,
2: “CSS”,
3: “JavaScript”
}

interface LanguageBirth {
[name: string]: number
Java: number
}

const language: LanguageBirth = {
“Java”: 1995,
“JavaScript”: 1996,
“C”: 1972
}

  

#### 函数类型


接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。


为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

/*
接口可以描述函数类型(参数的类型与返回的类型)
*/

interface SearchFunc {
(source: string, subString: string): boolean
}

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

const mySearch: SearchFunc = function(source: string, sub: string): boolean {
return source.search(sub) > -1
}

console.log(mySearch(‘abcd’, ‘bc’))

  

#### 接口继承


**接口是支持多继承的（类不支持多继承）**

interface Person {
name: string
eating: () => void
}

interface Animal {
running: () => void
}

interface Student extends Person, Animal {
sno: number
}

const stu: Student = {
sno: 110,
name: ‘Pan’,
eating: function () {
},
running: function (): void {

}
}

  

#### 类的接口

interface Alarm {
alert(): any
}

interface Light {
lightOn(): void
lightOff(): void
}

class Car implements Alarm {
alert() {
console.log(‘Car alert’)
}
}

// 一个类可以实现多个接口
class Car2 implements Alarm, Light {
alert() {
console.log(‘Car alert’)
}
lightOn() {
console.log(‘Car light on’)
}
lightOff() {
console.log(‘Car light off’)
}
}

  

#### 交叉类型


联合类型表示多个类型中一个即可

type Alignment = ‘left’ | ‘right’ | ‘center’

还有另外一种类型合并，就是交叉类型：


* 交叉类似表示需要满足多个类型的条件；
* 交叉类型使用& 符号；

type MyType = number & string

//表达的含义是number和string要同时满足；
//但是有同时满足是一个number又是一个string的值吗？其实是没有的，所以MyType其实是一个never类型；

  

##### 交叉类型的应用


在开发中，我们进行交叉时，通常是对对象类型进行交叉的：

interface Colorful {
color: string
}

interface IRun {
running: () => void
}

type NewType = Colorful & IRun

const obj: NewType = {
color: ‘red’,
running: function() {

}
}

  

#### interface和type区别


如果是定义非对象类型，通常推荐使用type


如果是定义对象类型，那么他们是有区别的：


* interface 可以重复的对某个接口来定义属性和方法；
* 而type定义的是别名，别名是不能重复的；

interface IPerson {
name: string
running: () => void
}

interface IPerson {
age: number
}

type Person = {
name: string
running: () => void
}

// 这里会报错
type Person = { //标识符“Person”重复。
age: number
}

  



![img](https://img-blog.csdnimg.cn/img_convert/4f57a0b8cd79d328f7a1f954016fed5a.png)
![img](https://img-blog.csdnimg.cn/img_convert/c8f99de8cbe2ad15a323667924e3b9d6.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

[外链图片转存中...(img-1gvXT85Q-1715358343556)]
[外链图片转存中...(img-tbUzDRir-1715358343556)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**