Typescript面向对象---下篇_ts channels { id number name string }[](3)

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

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

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

id: 1,
name: ‘james’,
age: 37
// sex: ‘男’ // 可以没有
}

### 只读属性


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

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

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

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

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


### 函数类型


接口能够描述 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’))

### 类类型


定义类时，可以使类实现一个接口,实现接口就是使类满足接口的要求,实现接口需要使用一个关键字`implements`


#### 类实现接口

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’)
}
}

### 接口继承接口


和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface LightableAlarm extends Alarm, Light {}

## 泛型


定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。


* 举例

function test(arg: any): any{
return arg;
}

* 上例中，test函数有一个参数类型不确定，但是能确定的是其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型,这样的话跟js还有什么区别呢？
* 使用泛型：

function test(arg: T): T{
return arg;
}

* 这里的 `<T>` 就是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。
* 那么如何使用上边的函数呢？
	+ 方式一（直接使用）：
		- `test(10)`
		- 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式
	+ 方式二（指定类型）：
		- `test<number>(10)`
		- 也可以在函数后手动指定泛型


### 多个泛型参数的函数


一个函数可以定义多个泛型参数，泛型间使用逗号隔开：

function test<T, K>(a: T, b: K): K{
return b;
}

test<number, string>(10, “hello”);

使用泛型时，完全可以将泛型当成是一个普通的类去使用


### 泛型接口


在定义接口时, 为接口中的属性或方法定义泛型类型在使用接口时, 再指定具体的泛型类型

interface IbaseCRUD {
data: T[]
add: (t: T) => void
getById: (id: number) => T
}

class User {
id?: number //id主键自增
name: string //姓名
age: number //年龄

constructor(name, age) {
this.name = name
this.age = age
}
}

class UserCRUD implements IbaseCRUD {
data: User[] = []

add(user: User): void {
user = { …user, id: Date.now() }
this.data.push(user)
console.log(‘保存user’, user.id)
}

getById(id: number): User {
return this.data.find(item => item.id === id)
}
}

const userCRUD = new UserCRUD()
userCRUD.add(new User(‘tom’, 12))
userCRUD.add(new User(‘tom2’, 13))
console.log(userCRUD.data)

### 泛型类


在定义类时, 为类中的属性或方法定义泛型类型 在创建类的实例时, 再指定特定的泛型类型

class GenericNumber {
zeroValue: T
add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function(x, y) {
return x + y
}

let myGenericString = new GenericNumber()
myGenericString.zeroValue = ‘abc’
myGenericString.add = function(x, y) {
return x + y
}

console.log(myGenericString.add(myGenericString.zeroValue, ‘test’))
console.log(myGenericNumber.add(myGenericNumber.zeroValue, 12))

![img](https://img-blog.csdnimg.cn/img_convert/9e096abe7f43eb8b66500610ae34f6d5.png)
![img](https://img-blog.csdnimg.cn/img_convert/06e163a6aa2e172720f7580f8db7c05f.png)

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

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


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

faB8EYW-1715339518434)]

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

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


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