TypeScript基本语法---09接口

接口 Interfaces

接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。

接口(Interfaces)是一个很重要的概念,可以理解为一种规范或者约束,用来描述 对象(object) 的形状 或者对 类(class) 的行为 进行抽象。对类的行为抽象将在后面 类与接口 一章中介绍,下面主要介绍对对象的形状进行描述。

接口定义

使用 interface 定义接口, 接口名称一般首字母大写,定义接口的时候,只定义声明即可,不包含具体内容:

实现接口的时候,要实现里面的内容,定义的变量比接口少了或多了属性都是不允许的 。

// 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象的方法调用,让具体的类执行具体的方法。
// 关键字  interface
interface IPerson {
    firstName: string,
    lastName: string,
    sayHi: () => string
}

// 具体实现Iperson类的对象
// 实现接口的时候,要实现里面的内容,定义的变量比接口少了或多了属性都是不允许的:
var stu: IPerson = {
    firstName: 'muzidigbig',
    lastName: 'Lee',
    sayHi: (): string => {
        return 'Hello! ' + stu.lastName + '.' + stu.firstName;
    }
}
console.log(stu.firstName);
console.log(stu.sayHi());

需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。

编译以上代码,得到以下 JavaScript 代码:

// 具体实现Iperson类的对象
// 实现接口的时候,要实现里面的内容,定义的变量比接口少了或多了属性都是不允许的:
var stu = {
    firstName: 'muzidigbig',
    lastName: 'Lee',
    sayHi: function () {
        return 'Hello! ' + stu.lastName + '.' + stu.firstName;;
    }
};
console.log(stu.firstName);
console.log(stu.sayHi());

可选属性

使用 ? 代表可选属性, 即该属性可以不存在, 但不允许添加未定义的属性

interface Person {
  name: string;
  age?: number;
}
let tom: Person = {
  name: 'tom'
}
// age是可选属性

任意属性

定义了任意属性后可以添加未定义的属性,并可以指定属性值的类型

interface Person2 {
    firstName: string,
    lastName: string,
    age? : number,//可选属性
    [propName: string]: any,//任意属性
    sayHi: () => string
}
var stu2: Person2 = {
    firstName: 'muzidigbig',
    lastName: 'Lee',
    age: 22,
    sex: '男',
    sayHi: (): string => {
        return `我叫${stu2.firstName}.${stu2.lastName}-${stu2.sex}今年${stu2.age}`
    }
}
stu2.age = 23;
console.log(stu2.age); //23
console.log(stu2.sayHi()); //我叫muzidigbig.Lee-男今年23

注意:定义了任意属性,那么确定属性和可选属性都必须是它的子属性

interface Person2 {
    firstName: string,
    lastName: string,
    age? : number,//可选属性
    [propName: string]: string,//任意属性

}
// 编译报错:Person2定义了一个任意属性,其值为string类型。则Person的所有属性都必须为string类型,而age为number类型

只读属性 readonly

interface Person3 {
    readonly id: number,
    name: string,
    age?: number,
    [propName: string]: any
}

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

var stu3:Person3 = {
    id: 0,
    name: 'muzidigbig',
    age: 22
}
console.log(stu3.id);
// => 编译报错:id为只读, 不可修改
// stu3.id = 1;

函数类型接口

// 只有参数列表和返回值类型的函数定义, 参数列表里的每个参数都需要名字和类型
interface SearchFunc {
  (flg1: number, flg2: number): boolean;
}
// 用接口定义函数的形状
interface FunFlg {
    (flg1: number, flg2: number): boolean;
}

// 函数的参数名不需要与接口里定义的名字相匹配
var flg: FunFlg;
flg = (value1: number,value2: number) => {
    return value1 > value2;
}
console.log(flg(2,23)); //false
var flg2: FunFlg;
flg2 = (value1: number,value2: number) => {
    return value1 < value2;
}
console.log(flg2(2,23)); //true

联合类型和接口

//联合类型和接口
interface RunOptions {
    program: string,
    commandlines: string[] | string | (() => string);
}
// commandline 是字符串
var options1: RunOptions = {
    program: 'test1',
    commandlines: 'this is name muzidigbig'
}
console.log(options1.commandlines);
// commandline 是字符串数组
var options2: RunOptions = {
    program: 'test2',
    commandlines: ['muzi','digbig']
}
// commandline 是一个函数表达式
var options3: RunOptions = {
    program: 'test3',
    commandlines: (): string => {
        return options3.program;
    }
}
var fn: any = options3.commandlines;
console.log(fn());

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型,索引值可以是数字或字符串。常用作定义任意属性

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] / 错误元素 1 不是 string 类型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误

 

 

 

 

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页