TypeScript 初识 - 接口

gnehc 发布于2019-08-26 10:56 / 1628人阅读

摘要：接口的作用是声明变量的结构和方法，但不做具体的实现。这两个使用场景不同。额外的属性检查从字面上的意思看，其实就是对接口未定义的属性进行检查。上面的例子，定义了接口，它具有索引签名。它不会帮你检查类是否具有某些私有成员。

接口的作用是声明变量的结构和方法，但不做具体的实现。通常，接口会强制对所有成员进行类型检查，包括数量和类型：

</>复制代码 
interface Name {
    first: string;
    second: string;
}
let name: Name;
name = {
    first: "John",
    second: "Doe"
};
name = {
    // Error: "second is missing"
    first: "John"
};
name = {
    // Error: "second is the wrong type"
    first: "John",
    second: 1337
};

可选属性

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号：

</>复制代码 
interface Name {
    first?: string;
    second?: string;
}
let name: Name;
name = {
    // 只有 first 也不会报错
    first: "John"
};

只读属性

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

</>复制代码 
interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

TypeScript 具有 ReadonlyArray 类型，它与 Array 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

</>复制代码 
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

readonly 针对一个对象的属性，const 针对的是一个变量。这两个使用场景不同。

额外的属性检查

从字面上的意思看，其实就是对接口未定义的属性进行检查。

当一个变量实现接口时，变量中存在了接口未定义的属性时，TypeScript 会进行报错：

</>复制代码 
interface Point {
    x: number;
    y?: number;
}
// error!
const myPoint: Point = { x: 1, z: 3 };

要想绕过检查，最简单的方法就是使用类型断言：

</>复制代码 
const myPoint: Point = { x: 1, z: 3 } as Point;

最佳的方法是定义接口的时候添加一个字符串索引签名：

</>复制代码 
interface Point {
    x: number;
    y?: number;
    [propName: string]: any;
}

函数类型

可以使用接口表示函数类型，需要给接口定义一个调用签名：

</>复制代码 
interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    const result = source.indexOf(subString);
    return result > -1;
};

和变量类型的接口不同，函数的参数名不需要与接口定义的名字相匹配。函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的：

</>复制代码 
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
    let result = src.indexOf(sub);
    return result > -1;
};

如果没有指定类型，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量：

</>复制代码 
let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.indexOf(sub);
    return result > -1;
};

可索引的类型

可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

</>复制代码 
interface StringArray {
    [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];

上面的例子，定义了 StringArray 接口，它具有索引签名。这个索引签名表示了当用 number 去索引 StringArray 时会得到 string 类型的返回值。

TypeScript 支持两种索引签名：字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。其实，这相当于 JavaScript 对象的 key，数字类型会转换成字符串类型再取值。

字符串索引签名能够很好的描述 dictionary 模式，并且也会确保所有属性与其返回值类型相匹配：

</>复制代码 
interface NumberDictionary {
    [index: string]: number;
    length: number; // 可以，length 是 number 类型
    name: string; // 错误，name 的类型与索引类型返回值的类型不匹配
}

可以将索引签名设置为只读，这样就防止了给索引赋值：

</>复制代码 
interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

类类型

类可以使用 implements 关键字实现某一个接口：

</>复制代码 
interface Point {
    x: number;
    y?: number;
    getX(): number;
}
class MyPoint implements Point {
    constructor(x: number) {
        this.x = x;
    }
    x: number;
    getX(): number {
        return this.x;
    }
}

接口描述了类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。

继承接口

接口之间可以相互继承，并且一个接口还可以继承多个接口，就是将一个接口里的成员复制到另一个接口中：

</>复制代码 
interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型

一个对象可以同时具有多种类型。一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性：

</>复制代码 
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}
function getCounter(): Counter {
    let counter = function(start: number) {};
    counter.interval = 123;
    counter.reset = function() {};
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

GPU云服务器云服务器 docker初识 TypeScript 初识关系数据库 typescript javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106847.html

TypeScript 初识 - 类

摘要：抽象类抽象类做为其它字类的基类使用，一般不会直接被实例化。抽象类中可以包含具体实现，接口不能。抽象类在运行时是可见的，可以通过判断。接口只能描述类的公共部分，不会检查私有成员，而抽象类没有这样的限制。一个普通的类 class Greeter { greeting: string; constructor(message: string) { this....

邹强 2019-08-26 10:57 评论0 收藏0
TypeScript 初识

摘要：当你陷在一个中大型项目中时应用日趋成为常态，没有类型约束类型推断，总有种牵一发而动全身的危机和束缚。总体而言，这些付出相对于代码的健壮性和可维护性，都是值得的。目前主流的都为的开发提供了良好的支持，比如和。参考资料中文文档文章博客地址：http://pinggod.com/2016/Typescript/ TypeScript 是 JavaScript 的超集，为 JavaScrip...

iliyaku 2019-08-19 18:47 评论0 收藏0
TypeScript 初识 - 内置对象

摘要：自带的内置对象都可以直接在中当作定义好的类型。的内置对象标准提供了常用的内置对象等。在不需要额外引入就可以直接使用这些内置对象用写不是内置对象的一部分，想要写时提示，需要引入第三方声明文件 JavaScript 自带的内置对象都可以直接在 TypeScript 中当作定义好的类型。 TypeScript 核心库的定义文件 TypeScript 核心库的定义文件定义了所有浏览器环境需要用...

lordharrd 2019-08-26 10:44 评论0 收藏0
TypeScript 初识 - 基础

摘要：安装通过命令进行安装创建文件文件名以扩展名结尾编译通过命令行进行编译通过运行任务的方式进行编译下使用显示运行任务，选择构建进行编译。安装通过 npm 命令进行安装： $ npm i -g typescript 创建 ts 文件 Typescript 文件名以 ts 扩展名结尾： function hello(value: string) { console.log(`hel...

CODING 2019-08-26 10:43 评论0 收藏0
TypeScript 初识 - 函数

摘要：函数类型函数返回值类型我们可以给每个参数添加类型之后再为函数本身添加返回值类型。能够根据返回语句自动推断出返回值类型，所以通常可以省略它匿名函数完整函数类型完整的函数类型包含两部分参数类型和返回值类型。函数是 JavaScript 的第一等公民，函数在 JavaScript 中可以实现抽象层、模拟类、信息隐藏和模块等等。TypeScript 在一定基础上扩展了函数的功能。函数类型 ...

ARGUS 2019-08-26 11:00 评论0 收藏0

发表评论

登陆后可评论

0条评论

gnehc

男|高级讲师

我要关注我要私信

TA的文章

106短信平台如何申请？申请周期是多久？

阅读 1381·2021-11-22 13:54
C语言学习笔记—P17（函数栈帧的创建与销毁＜超详解版＞+图解+题例）

阅读 1577·2021-11-22 09:34
身价过亿的温柔萝莉对小码农说ADC会采集吗

阅读 2896·2021-11-22 09:34
软件测试肖sir__005测试用例设计方法（1）

阅读 4257·2021-10-13 09:39
【题目】【5天】canvas元素

阅读 3426·2019-08-26 11:52
package.json 中的 Module 字段是干嘛的

阅读 3436·2019-08-26 11:50
TypeScript 初识 - 接口

阅读 1629·2019-08-26 10:56
干货:HTML5获取页面元素及类名操作和自定义属性

阅读 2022·2019-08-26 10:44

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

TypeScript 初识 - 接口

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

TypeScript 初识 - 类