前端Ts整理

DeepLemon
128 阅读5分钟

一.Ts中类的继承：

1.代码演示：

// ts中定义一个类
class Person{ 
    name:string
    age:number
    constructor(name:string,age:number){ 
        this.name = name
        this.age = age
    }
    say():string{ 
        return '我会说rap'
    }
}
let p1=new Person('老王',33)
console.log(p1); //Person { name: '老王', age: 33 }

1.1 ts中类继承的案例

//父类
class Animal {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    move() {

    }
}
// let a = new Animal('狮子王', 15,);
// console.log(a);
//继承类
class Dog extends Animal {
    // name: string
    // age: number
    say: string
    food:string
    constructor(name: string,age:number, food: string, say: string) {
        super(name,age)
        this.say = say
        this.food = food
    }
    move() {
        console.log('会跑');

    }
    eat() {
        console.log('吃大骨头');

    }
    bark() {
        console.log(`我是${this.name},我喜欢吃${this.age}见到坏人会${this.say}`);

    }
}
let d = new Dog('小狗',8 ,'大骨头', '汪汪叫')
// console.log(d);
console.log(d.bark());

2.接口的描述

2.1接口的描述

  • 在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

2.2 ts中接口的描述

  1. 接口介绍

    TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

  2. 接口的描述

    TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

2.3接口的使用方法

定义接口

我们可以使用 interface来定义接口；例如:

// 定义一个接口
interface IUser {
      name:string, 
      age:number
}

定义接口注意事项：

  • 定义接口 语法 interface 接口名 {}
  • 接口名称尽量以大写的 I 开头
  • 接口中的属性之间可以写分号 、逗号或者不写

2.4 接口描述对象

使用接口描述对象的形状

我们首先定义一个名称为IUser的 接口，接口中有两个属性name和age；要求name属性类型为string，age属性类型为number；代码如下：

// 定义一个名称为 IUser 的接口；
interface IUser {
    name: string
    age: number
}

使用接口约束对象：

  • 使用IUser接口约束一个名称为tom的对象

    let tom:IUser = {
    
}
// 报错： 类型“{}”缺少类型“IUser”中的以下属性: name, age

  • 给对象赋值 name属性

    let tom:IUser = {
    name: 'tom'
}
// 报错： 类型 "{ name: string; }" 中缺少属性 "age"，但类型 "IUser" 中需要该属性

  • 给对象赋值 age 属性

    // 如果赋值的age值为字符串
let tom:IUser = {
    name: 'tom',
    age: '1'
}
// 报错： 不能将类型“string”分配给类型“number”。
​
// 赋值 age为数字类型
​
let tom:IUser = {
    name: 'tom',
    age: 18
}
​
// IUser接口约束tom对象完成

    综上所述：增加变量和减少变量是不允许的，改变属性的数据类型是不允许的；可见，赋值的时候，变量的形状必须和接口的形状保持一致。

    3. 接口属性

    3.1 可选属性

  • 接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。我们希望不要完全匹配一个形状，那么可以用可选属性；

  • 可选属性的定义，在定义接口的时候，属性和类型的冒号前加上英文的问号(?),

interface IUser {
    name: string
    age: number
    gender?: string  // 定义可选属性
}
  • 使用接口约束对象：
let tom:IUser = {
    name: 'tom',
    age: 18
}

  • 我们可以发现，tom对象可以有 gender属性也可以没有 gender属性；

  • 但是，如果我们想给tom对象接口添加一个 email属性；是不允许的：

let tom:IUser = {
    name: 'tom',
    age: 18,
    email: 'jiyun@163.com'
}
// 报错： 不能将类型“{ name: string; age: number; email: string; }”分配给类型“IUser”。对象文字可以只指定已知属性，并且“email”不在类型“IUser”中。

3.2 任意属性

有时候我们需要给对象添加任意的属性，那么就需要接口有任意的属性；

就可以使用 [propName: string] 定义任意属性，属性值取 string 类型的值。

interface IUser {
    name: string
    age: number
    gender?: string,
    [prop:string]:string|number  // 添加任意属性
}

需要注意的是：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集，可以理解为之遥添加了任意属性，那么确定属性和可选属性都是他的子集。

interface IUser {
    name: string
    age: number
    gender?: string,
    [prop:string]:string
}
// 报错： 类型“number”的属性“age”不能赋给“string”索引类型“string”。

3.3只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性；

// 定义接口
interface IUser {
    readonly id: string, // id为只读属性
    name: string
    age: number
    gender?: string,
    [prop:string]:string|number
}

使用 IUser 接口 约束对象：

let tom:IUser = {
    id: '123',
    name: 'tom',
    age: 18,
    email: 'jiyun@163.com'
}

接下来，我们改变 tom 的 id 值

tom.id = '456'
// 报错： 无法分配到 "id" ，因为它是只读属性。

注意： 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

3.4可索引接口

3.4.1 描述数组

// 定义一个接口
interface Iarr {
    [prop:number]: string
}
// 使用接口约束数组
let arr:Iarr = ['1','2']

3.4.2 描述对象

interface Iobj {
    [prop:string]: string
}
​
let arr:Iobj = {
    a: '1'
}
  • 图例如下：

image.png

3.5案例通过定义接口来约束对象和类

  • 练习：定义一个类，要求这个类必须具有address属性和run方法，用接口进行限制
一：//定义一个接口
 interface objType{
    name:string,
    age:number,
    address:string,
    run():string
}
二：//通过接口定义对象
let obj:objType={
    name:'隔壁老王',
    age:32,
    address:'北京海淀',
    run():string{
        return '我跑步很厉害'
    }

}
// console.log(obj);
三：//通过接口定义类
class Son implements objType{ 
    name:string
    age:number
    address: string
    constructor(name:string,age:number,address:string){
        this.name=name
        this.age = age
        this.address=address
    }
    run(): string {
        return '我是短跑冠军'
    }
}
// console.log(Son);

let s=new Son('小王',18,'郑州中牟')
console.log(s.run());
  • 图例演示

image.png

3.枚举

3.1枚举类型分为数字枚举和字符串枚举

3.1.1数字枚举

  • 默认从0自增，也可以设定初始值，然后一次自增
//枚举
enum Direction {
    up=10,
    down,
    left,
    right
}
function changeDiretion(direction:Direction){
    console.log(direction);
}
changeDiretion(Direction.left) //打印12
  • 类似于js中的对象，直接使用点（.）语法访问枚举的成员

3.1.2字符串枚举

enum working{ 
    one='进厂打螺丝',
    two='提桶跑路',
    three='学习',
    four='敲代码'
}

function doing(goto:working){ 
console.log(goto);

}
doing(working.one)  //进厂打螺丝
avatar
文章
阅读
粉丝