TS的 interface接口 type关键字 enum枚举类型

2,194 阅读4分钟

TS的 interface 接口

  1. interface 的话就是指定一个协议 使用的话 就要遵守里面的规则 也就是数据要符合数据类型以及名称及返回值等等
  2. 使用的话先通过 interface 指定一个接口
interface Parsen {
    name:string,
    age:number,
    say():string //注意定义方法 不要写具体操作 要写返回值 不然会报错
}

当函数使用 interface 接口的话

// 首先通过 interface 来声名一个接口
interface Persen {
  name: string;
  age: number;
}
//使用
const fn = (user: Persen): string => {
  return `我是${user.name}${user.age}岁`;
};
//传参
console.log(fn({ name: "张三", age: 10 }));

接口的实现 通过 implements 关键字

//接口的实现 首先通过 interface 来声名接口
interface Animal {
  message: string;
  color: string;
  say(): void;
}

//使用 implements 关键字来使用接口
//注意 属性 和 方法 定义的要一样 可以多但是不能少
class Big implements Animal {
    message: string;
    color: string;
    dog: string;
    constructor(message: string,color: string,dog: string) {
        this.message = message;
        this.color = color;
        this.dog = dog;
    }
    say() {
        console.log('还有谁');
        return `${this.message}${this.color}${this.dog}`
    }
}
let b1= new Big('信息','黑色','小狗');
console.log(b1); //Big { message: '信息', color: '黑色', dog: '小狗' }

作为参数的类型声明,自定义一个类型.

//作为参数类型 自定义一个规则

interface Ruler {
  name: string;
  age: number;
}

class Son {
  constructor(config: Ruler) {
    
  }
}
//注意这里的参数 在传参的时候 不能增加 也不能减少 跟规则 保持一致 不然会报错
let s1 = new Son({ name: "赵四", age: 15 });

当 interface 会合并它的规则 当接口名字一样时 一个名字可以声名多次并继承

//interface 可以合并它声名的规则
interface List {
    name:string,
    age:number
}
interface List {
    sex:string
}

class Man {
    constructor(config:List) {

    }
}
let m1 = new Man({name:'刘能',age:20}) //报错
let m2 = new Man({name:'刘能',age:20,sex:"男"}) //不会报错

image.png

对象使用interface 接口

//对象使用 interface 接口 不能多不能少
interface Isobj {
    name:string,
    age:number,
    say():void
}

let obj :Isobj = {
    name:'广坤',
    age:20,
    say:()=>{
        
    }
}

多了少了会报错 image.png

interface 增加任意属性

//interface 增加任意属性
interface ok {
    name?:string,
    age?:number,
    color?:string
}

let obj1 : ok ={ //可选的可写可不写
    name:'哈哈'
}

方法不可以会报错

72d827e03e5033dd05008d45e47dee3.png

interface 继承

interface One {
    name:string,
}
interface Two {
    age:number,
}

interface Three extends One,Two {
    sex:string
}

let obj2:Three = {
    name:'张三',
    age:10,
    sex:'nan'
}

type 关键字

type:其作用就是给类型起一个新名字,可以作用于原始值(基本类型),联合类型,元组以及其它任何你需要手写的类型

type Second = number; // 基本类型
let timeInSecond: number = 10;
let time: Second = 10;  // time的类型其实就是number类型
type userOjb = {name:string} // 对象
type getName = ()=>string  // 函数
type data = [number,string] // 元组
type numOrFun = Second | getName  // 联合类型

type与interface相似 但是也有区别

  1. interface 可以通过 extends 可以完成继承
  2. type 不可以 extendsimplement
  3. type 可以通过 & 进行合并
type Name = { name: string; } 
type User = Name & { age: number }; 
let stu:User={name:'wang',age:1}
console.log(stu)
  1. interface 可以 extends type
type Name = { name: string; }
interface User extends Name { age: number; } 
let stu:User={name:'wang',age:1}
  1. type可以通过 & 与interface 合并
interface Name { name: string; } 
type User = Name & { age: number; } 
let stu:User={name:'wang',age:1}
  1. type 能使用 in 关键字生成映射类型,但 interface 不行。
type Keys = "name" | "sex"

type DulKey = {
    [key in Keys]: string    // 类似for...in
}

let stu: DulKey = {
    name: "wang",
    sex: "man"
}

枚举类型

创建一个枚举类型的基本语法:  
enum 枚举类型名{  
       枚举值1,枚举值2,…  
}  
枚举类型名是由用户自定义的,同时枚举值通常都会用大写,多个枚举值之间用逗号隔开。
//枚举颜色 
            enum color{
                       red=1, 
                       oreange=2, 
                       yellow=3, 
                       green=4, 
                       ching=5, 
                       blue=6, 
                       purple=7
            };
1、如果在定义枚举类型时指定元素的值,也可以改变枚举元素的值
例如:
enum weekday{sun=7,mon=1,tue,wed,thu,fri,sat}day;
这时,sun 为 7,mon 为 1,以后元素顺次加 1,所以 sat 就是 6 了。

2、枚举值可以用来作判断
例如:
if (day==month) {…}
if (day>month) {…}
枚举值的比较规则是:按其在说明时的顺序号比较,如果说明时没有人为指定,则第一个枚举元素的值认作 03、一个整数不能直接赋给一个枚举变量,必须强制进行类型转换才能赋值
enum myType {
  up = 1,
  down = 2,
  left = 3,
  sum,
  go=6,
  no,
  right='右'

}

console.log(myType.sum); //得到 4
console.log(myType.no); //得到 7