TS基础知识点快速回顾(下)

上期回顾：TS基础知识点快速回顾(上)-CSDN博客

 ⾃定义类型

⾃定义类型，可以更灵活的限制类

// 性别的枚举
enum Gender {
 Male,
 Female
}
// ⾃定义⼀个年级类型（⾼⼀、⾼⼆、⾼三）
type Grade = 1 | 2 | 3
// ⾃定义⼀个学⽣类型
type Student = {
 name:string,
 age:number,
 gender:Gender,
 grade:Grade
}
// 定义两个学⽣变量：s1、s2
let s1:Student
let s2:Student
s1 = {name:'张三',age:18,gender:Gender.Male,grade:1}
s2 = {name:'李四',age:18,gender:Gender.Female,grade:2}

抽象类

常规类：

class Person {
 name: string
 age: number
 constructor(name:string,age:number){
 this.name = name
 this.age = age
 }
}
const p1 = new Person('张三',18)
const p2 = new Person('李四',19)
console.log(p1)
console.log(p2)

继承：

// Person类
class Person { }
// Teacher类继承Person
class Teacher extends Person { }
// Student类继承Person
class Student extends Person { }
// Person实例
const p1 = new Person('周杰伦',38)
// Student实例
const s1 = new Student('张同学',18)
const s2 = new Student('李同学',20)
// Teacher实例
const t1 = new Teacher('刘⽼师',40)
const t2 = new Teacher('孙⽼师',50)

抽象类：不能去实例化，但可以被别⼈继承，抽象类⾥有抽象⽅法

// Person（抽象类）
abstract class Person { }
// Teacher类继承Person
class Teacher extends Person {
 // 构造器
 constructor(name: string,age: number){
 super(name,age)
 }
 // ⽅法
 speak(){
 console.log('你好！我是⽼师:',this.name)
 }
}
// Student类继承Person
class Student extends Person { }
// Person实例
// const p1 = new Person('周杰伦',38) // 由于Person是抽象类，所以此处不可以new Perso
n的实例对象

接⼝

接⼝梳理：

1. 接⼝⽤于限制⼀个类中包含哪些属性和⽅法：

// Person接⼝
interface Person {
 // 属性声明
 name: string
 age: number
 // ⽅法声明
 speak():void
}
// Teacher实现Person接⼝
class Teacher implements Person {
 name: string
 age: number
 // 构造器
 constructor(name: string,age: number){
 this.name = name
 this.age = age
 }
 // ⽅法
 speak(){
 console.log('你好！我是⽼师:',this.name)
 }
}

2. 接⼝是可以重复声明的：

// Person接⼝
interface PersonInter {
 // 属性声明
 name: string
 age: number
}
// Person接⼝
interface PersonInter {
 // ⽅法声明
 speak():void
}
// Person类继承PersonInter
class Person implements PersonInter {
 name: string
 age: number
 // 构造器
 constructor(name: string,age: number){
 this.name = name
 this.age = age
 }
 // ⽅法
 speak(){
 console.log('你好！我是⽼师:',this.name)
 }
}

3. 【接⼝】与【⾃定义类型】的区别：

接⼝可以：

1.  当⾃定义类型去使⽤；
2.  可以限制类的结构；

⾃定义类型：

1.  仅仅就是⾃定义类型；

// Person接⼝
interface Person {
 // 应该具有的属性
 name: string
 age: number
 // 应该具有的⽅法
 speak():void
}
// Person类型
/*
 type Person = {
 // 应该具有的属性
 name: string
 age: number
 // 应该具有的⽅法
 speak():void
 }
*/
// 接⼝当成⾃定义类型去使⽤
let person:Person = {
 name:'张三',
 age:18,
 speak(){
 console.log('你好！')
 }
}

4. 【接⼝】与【抽象类】的区别：

抽象类：

1.  可以有普通⽅法，也可以有抽象⽅法；
2.  使⽤ extends 关键字去继承抽象类；

接⼝中：

1.  只能有抽象⽅法；
2.  使⽤ implements 关键字去实现接⼝

 抽象类举例：

// 抽象类 —— Person
abstract class Person {
 // 属性
 name:string
 age:number
 // 构造器
 constructor(name:string,age:number){
 this.name = name
 this.age = age
 }
 // 抽象⽅法
 abstract speak():void
 // 普通⽅法
 walk(){
 console.log('我在⾏⾛中....')
 }
}
// Teacher类继承抽象类Person
class Teacher extends Person {
 constructor(name:string,age:number){
 super(name,age)
 }
 speak(){
 console.log(`我是⽼师，我的名字是${this.name}`)
 }
}

接⼝举例：

// 接⼝ —— Person，只能包含抽象⽅法
interface Person {
 // 属性，不写具体值
 name:string
 age:number
 // ⽅法，不写具体实现
 speak():void
}
// 创建Teacher类实现Person接⼝
class Teacher implements Person {
 name:string
 age:number
 constructor(name:string,age:number){
 this.name = name
 this.age = age
 }
 speak(){
 console.log('我在⻜快的⾏⾛中......')
 }
}

属性修饰符

泛型

定义⼀个函数或类时，有些情况下⽆法确定其中要使⽤的具体类型（返回值、参数、属性的类型不能确定），此时就需要泛型了。

举例： <T> 就是泛型，（不⼀定⾮叫T ），设置泛型后即可在函数中使⽤ T来表示该类型：

function test<T>(arg: T): T{
return arg;
}
// 不指名类型，TS会⾃动推断出来
test(10)
// 指名具体的类型
test<number>(10)

泛型可以写多个：

function test<T, K>(a: T, b: K): K{
 return b;
}
// 为多个泛型指定具体⾃值
test<number, string>(10, "hello");

类中同样可以使⽤泛型：

class MyClass<T>{
 prop: T;
 constructor(prop: T){
 this.prop = prop;
 }
}

也可以对泛型的范围进⾏约束：

interface Demo{
 length: number;
}
// 泛型T必须是MyInter的⼦类，即：必须拥有length属性
function test<T extends Demo>(arg: T): number{
 return arg.length;
}
test(10) // 类型“number”的参数不能赋给类型“Demo”的参数
test({name:'张三'}) // 类型“{ name: string; }”的参数不能赋给类型“Demo”的参数
test('123')
test({name:'张三',length:10})