安科网

TypeScript 接口

dz00

dz00

2019-06-28

关注 关注

TypeScript
接口

接口只读属性

使用关键字readonly定义只读的接口属性

interface Point {
    readonly x: number;
    readonly y: number;
}
// 定义一个接口
interface Point{
    readonly x: number;
    readonly y: number;
}

// 对接口赋值
let p1: Point = { x: 10, y: 20 };
p1.x = 5;    // 该句错误，不能进行赋值操作

出现错误，如下
TypeScript 接口

创建不可修改的数组

TypeScript 接口

// 定义一个接口
interface Point{
    readonly x: number;
    readonly y: number;
}

// 对接口赋值
let p1: Point = { x: 10, y: 20 };
//p1.x = 5;    // 该句错误，不能进行赋值操作

let a: number[] = [1, 2, 3, 4, 5];
let ro: ReadonlyArray<number> = a;    // 设置为只读的数组
ro[0] = 12; // 不可进行赋值。出现赋值错误

如果想要重新赋值，断言重写

当一个值有多个类型的时候，使用断言重写，确定一个新的类型
// 定义一个接口
interface Point{
    readonly x: number;
    readonly y: number;
}

// 对接口赋值
let p1: Point = { x: 10, y: 20 };
//p1.x = 5;    // 该句错误，不能进行赋值操作

let a = [2, 3, 4, 5];
let ro: ReadonlyArray<number> = [2, 3, 4, 5];
//ro[0] = 12;    // 不可进行赋值
// 如果需要赋值，使用断言重写
a = ro as number[];    // 进行断言重写
// 对接口赋值
var p1 = { x: 10, y: 20 };
//p1.x = 5;    // 该句错误，不能进行赋值操作
var a = [2, 3, 4, 5];
var ro = [2, 3, 4, 5];
//ro[0] = 12;    // 不可进行赋值
// 如果需要赋值，使用断言重写
a = ro; // 进行断言重写
//# sourceMappingURL=out.js.map
类型断言很大程度上可以规范类型

函数类型的接口

// 定义一个函数类型的接口
interface SearchFunc {
    (source: string, subString: string): boolean;    // 定义一个函数类型的接口
}

// 使用这个接口
let mySearch: SearchFunc;
mySearch = (source:string,subString:string) => {
    let result = source.search(subString);    // 两个字符串正则匹配
    return result > -1;
}
// 使用这个接口
var mySearch;
mySearch = function (source, subString) {
    var result = source.search(subString); // 两个字符串正则匹配
    return result > -1;
};
//# sourceMappingURL=out.js.map

编译器会逐个检查，如果统统正确，则编译通过，否则编译不通过

定义索引接口

// 定义索引接口
interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;    // 定义一个myArray的变量，类型为索引接口
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];    // 取第一个值
var myArray; // 定义一个myArray的变量，类型为索引接口
myArray = ["Bob", "Fred"];
var myStr = myArray[0]; // 取第一个值
//# sourceMappingURL=out.js.map

索引值内部必须全部为number类型的
TypeScript 接口

// 定义接口,一个索引值类型的，其返回值也为索引类型的
interface NumberDictionary{
    [index: string]: number;
    length: number;    // 可以设置length
    name: string;    // 错误索引值内部不能拥有string类型
}

编译一下出现错误

索引签名依旧可以设置为只读，此时可以防止给索引赋值。使用关键字readonly

// 定义接口
interface NumberDictionary {
    readonly [index: number]: string;
}

// 初始化一个变量
let myArray: NumberDictionary = ["hello", "world"];

顺带配置一下配置文件

// tsconfig.json
{
    "compilerOptions": {
        "out": "built/out.js", 
        "sourceMap": true, 
        "target": "es5"
    }, 
    "files": [
        "greeter.ts"
    ]
}
// out.js
// 初始化一个变量
var myArray = ["hello", "world"];
//# sourceMappingURL=out.js.map
// 定义接口
interface NumberDictionary {
    readonly [index: number]: string;
}

// 初始化一个变量
let myArray: NumberDictionary = ["hello", "world"];

// 此时进行赋值为错误的
myArray[2] = "hello world";

类类型

明确一个类去符合一种接口

// 定义接口
interface ClockInterFace {
    currentTime: Date;
}

class Clock implements ClockInterFace {    // 使用implements 关键字clock类符合接口clockInterFace
    currentTime: Date;
    constructor(h:number, m:number){
        // 定义构造函数
    }
}

// 注意在上方中并不会对静态的，进行检查。只会对非静态的部分，即非构造函数部分进行检查

var Clock = /** @class */ (function () {
    function Clock(h, m) {
        // 定义构造函数
    }
    return Clock;
}());
//# sourceMappingURL=out.js.map

如果配置成为es6即

{
    "compilerOptions": {
        "out": "built/out.js", 
        "sourceMap": true, 
        "target": "es6"
    }, 
    "files": [
        "greeter.ts"
    ]
}
class Clock {
    constructor(h, m) {
        // 定义构造函数
    }
}
//# sourceMappingURL=out.js.map

接口描述方法，类实现

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);    // 定义接口的方法
}

class Clock implements ClockInterface{
    currentTime: Date;    // 接口检查的
    setTime(d:Date){    // 接口检查的方法
        this.currentTime = d;
    }
    constructor(h:number, m:number){    // 接口不会检查静态的构造方法

    }
}
var Clock = /** @class */ (function () {
    function Clock(h, m) {
    }
    Clock.prototype.setTime = function (d) {
        this.currentTime = d;
    };
    return Clock;
}());
//# sourceMappingURL=out.js.map

关于构造函数的接口

构造函数属于静态的方法，当构造器定义了一个静态的方法的时候。构造器只检查动态的方法，并不会检查动态的方法，故，下方的写法编译器不通过

interface ClockConstructor {
    new (hour: number, minuter: number);    // 定义构造函数的接口
};

class clock implements ClockConstructor {
    currenTime: Date;
    constructor(h:number, m:number){    // 接口限制的是此构造函数

    }
}interface ClockConstructor {
    new (hour: number, minuter: number);    // 定义构造函数的接口
};

class clock implements ClockConstructor {
    currenTime: Date;
    constructor(h:number, m:number){    // 接口限制的是此构造函数

    }
}interface ClockConstructor {
    new (hour: number, minuter: number);    // 定义构造函数的接口
};

class clock implements ClockConstructor {
    currenTime: Date;
    constructor(h:number, m:number){    // 接口限制的是此构造函数

    }
}interface ClockConstructor {
    new (hour: number, minuter: number);    // 定义构造函数的接口
};

class clock implements ClockConstructor {
    currenTime: Date;
    constructor(h:number, m:number){    // 接口限制的是此构造函数

    }
}interface ClockConstructor {
    new (hour: number, minuter: number);    // 定义构造函数的接口
};

class clock implements ClockConstructor {
    currenTime: Date;
    constructor(h:number, m:number){    // 接口限制的是此构造函数

    }
}interface ClockConstructor {
    new (hour: number, minuter: number);    // 定义构造函数的接口
};

class clock implements ClockConstructor {
    currenTime: Date;
    constructor(h:number, m:number){    // 接口限制的是此构造函数

    }
}

编译

PS C:\Users\mingm\Desktop\ts> tsc
Active code page: 65001
greeter.ts:5:7 - error TS2420: Class 'clock' incorrectly implements interface 'ClockConstructor'.
  Type 'clock' provides no match for the signature 'new (hour: number, minuter: number): any'.

5 class clock implements ClockConstructor {

PS C:UsersmingmDesktopts>

出现错误

解决，既然不会对静态的构造方法进行检查，那就在创建一个接口，进行更进一步的静态方法的检查。
即，创建一个接口，返回一个接口，这样就会对该构造方法进行检查。
> 类似于类和父类的关系，子类，父类，超类，超类会返回一个类，会调用超类的构造方法，生成子类，此时在这个过程中会进行接口的检查。

// 定义一个用于检查构造函数的接口，该接口需要返回一个接口
interface ClockConstructor{

new (hour: number, minute: number): ClockInterface;

}
// 继续定义一个接口，该接口接收来自上一个接口返回的内容，进行验证
interface ClockInterface {

tick();

}
// 创建一个函数，返回一个函数（该函数再次执行）
function createClock(ctor: ClockConstructor, hour:number, minute:number):ClockInterface{

return new ctor(hour, minute);

}

// 定义一个类
class DigitalClock implements ClockInterface { // 下层接口

constructo(h: number, m: number) { };
tick(){
    console.log("！！！");
}

}

// 定义一个类
class AnalogClock implements ClockInterface {

constructor(h: number, m: number) { };
tick(){
    console.log("!!!!!!!!");
}

}

// 调用租函数，传入一个类，返回一个对象
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 2, 4);

上方的核心在于创建了两个接口，一个接口用于检查父的内容，一个接口用于进行创建对象进行验证。父的拥有一个函数，传入一个类，并对其进行检查。

// 创建一个函数，返回一个函数（该函数再次执行）
function createClock(ctor, hour, minute) {

return new ctor(hour, minute); //

}
// 定义一个类
var DigitalClock = /* @class / (function () {

function DigitalClock() {
}
DigitalClock.prototype.constructo = function (h, m) { };
;
DigitalClock.prototype.tick = function () {
    console.log("！！！");
};
return DigitalClock;

}());
// 定义一个类
var AnalogClock = /* @class / (function () {

function AnalogClock(h, m) {
}
;
AnalogClock.prototype.tick = function () {
    console.log("!!!!!!!!");
};
return AnalogClock;

}());
// 调用租函数，传入一个类，返回一个对象
var digital = createClock(DigitalClock, 12, 17);
var analog = createClock(AnalogClock, 2, 4);
//# sourceMappingURL=out.js.map

// 创建一个函数，返回一个函数（该函数再次执行）
function createClock(ctor, hour, minute) {

return new ctor(hour, minute); // 此处类似于js中的闭包问题

}
// 定义一个类
class DigitalClock {

constructo(h, m) { }
;
tick() {
    console.log("！！！");
}

}
// 定义一个类
class AnalogClock {

constructor(h, m) { }
;
tick() {
    console.log("!!!!!!!!");
}

}
// 调用租函数，传入一个类，返回一个对象
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 2, 4);
//# sourceMappingURL=out.js.map

# 继承接口
类能继承，那么接口也能继承

// 接口
interface Shape {

color: string;

}
// 一个继承接口
interface Square extends Shape {

sideLength: number;

}

let square = {} as Square; //类型断言
square.color = "blue";
square.sideLength = 10;

var square = {}; //类型断言
square.color = "blue";
square.sideLength = 10;
//# sourceMappingURL=out.js.map

也可以进行从多个接口继承，即创造出合成接口

interface Shape{

color: string;

}

interface penStroke{

penWidth: number;

}

// 从两个接口继承而来的接口
interface Square extends Shape, penStroke{

sideLength: number;

}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

var square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
//# sourceMappingURL=out.js.map

# 混合类型
对象既可为函数，又可为对象

interface Counter {

(start: number): string;    // 函数
interval: number;
reset(): void;

}

// 下面将会书写闭包
function getConter():Counter{ // 返回将会是一个接口类型的

let counter = <Counter>function (start: number){};    // 类型断言
counter.interval = 123;
counter.reset = () => { };
return counter;    // 返回一个函数

}

let c = getConter();
c(10);
c.reset();
c.interval = 5.0;

// 下面将会书写闭包
function getConter() {

var counter = function (start) { }; // 类型断言
counter.interval = 123;
counter.reset = function () { };
return counter; // 返回一个函数

}
var c = getConter();
c(10);
c.reset();
c.interval = 5.0;
//# sourceMappingURL=out.js.map

# 接口继承类
接口继承类时，会继承类成员，但不包含其实现。
即，接口声明了类中的成员，但并没有提供具体的实现。
接口同样会继承private（私有的），和protected（对于本包和子同样可见）
> 根据上述的说明，可以知道，当一个接口，继承自拥有protected的类的时候，此时该接口只能被子类，或者该类使用。

![](https://melovemingming-1253878077.cos.ap-chengdu.myqcloud.com/blog-image/2018/10/21/5.png)

class Control {

private state: any;    // 定义一个任何类型的私有属性

}

// 定义一个接口，该接口继承自Control
interface SelectableControl extends Control {

select(): void;

}

// 定义一个子类，该类继承自Control,并使用接口SelectableControl，由于是子类，可以使用SelectableControl接口
class Button extends Control implements SelectableControl {

select() { };

}

// 定义一个子类该类继承自Control
class TextBox extends Control {

select(){}

}

// 定义一个Image类，该类不能使用SelectableControl接口
//class Image implements SelectableControl{

//}

// 和其余类没有任何继承关系的类
class Liaction {

}

es5 js如下

var __extends = (this && this.__extends) || (function () {

var extendStatics = function (d, b) {
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return extendStatics(d, b);
}
return function (d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

})();
var Control = /* @class / (function () {

function Control() {
}
return Control;

}());
// 定义一个子类，该类继承自Control,并使用接口SelectableControl，由于是子类，可以使用SelectableControl接口
var Button = /* @class / (function (_super) {

__extends(Button, _super);
function Button() {
    return _super !== null && _super.apply(this, arguments) || this;
}
Button.prototype.select = function () { };
;
return Button;

}(Control));
// 定义一个子类该类继承自Control
var TextBox = /* @class / (function (_super) {

__extends(TextBox, _super);
function TextBox() {
    return _super !== null && _super.apply(this, arguments) || this;
}
TextBox.prototype.select = function () { };
return TextBox;

}(Control));
// 定义一个Image类，该类不能使用SelectableControl接口
//class Image implements SelectableControl{
//}
// 和其余类没有任何继承关系的类
var Liaction = /* @class / (function () {

function Liaction() {
}
return Liaction;

}());
//# sourceMappingURL=out.js.map

PS C:UsersmingmDesktopts> tsc
Active code page: 65001
PS C:UsersmingmDesktopts>

es6如下

class Control {
}
// 定义一个子类，该类继承自Control,并使用接口SelectableControl，由于是子类，可以使用SelectableControl接口
class Button extends Control {

select() { }
;

}
// 定义一个子类该类继承自Control
class TextBox extends Control {

select() { }

}
// 定义一个Image类，该类不能使用SelectableControl接口
//class Image implements SelectableControl{
//}
// 和其余类没有任何继承关系的类
class Liaction {
}
//# sourceMappingURL=out.js.map

typescript 赋值 接口

dz00

dz00

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

TypeScript（14）： 联合类型

联合类型可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

路一直都在在在 2020-06-26

TypeScript（15）： 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是

iconhot 2020-06-26

27 个提升开发幸福度的 VsCode 插件

Visual Studio Code是一种轻量级但功能强大的跨平台源代码编辑器, 借助对TypeScript 和Chrome调试器等开发工具的内置支持，越来越多的开发都都喜欢使用它。如果你正在寻找更多的好用的 VsCode 工具，那么这篇或许能够帮助你。

changcongying 2020-11-02

如何编写健壮的 TypeScript 库？

当你用 TypeScript 编写库时，你通常不知道这个库最终将如何被使用。即使你 警告潜在用户，你编写这个库只是针对 TypeScript 用户，你还是可能会在某个时刻拥有 JavaScript 用户——或者是因为他们不顾你的警告而使用这个库，或者是他们

changcongying 2020-10-30

Deno需要做什么才能取代Node.js？

本文转载自公众号“读芯术”。它拥有广泛功能，讨论度非常高，在Github上有将近68000个星星：。既然这么受欢迎，那么有人要问了：为什么Deno正式版本1.0发行时没能成功呢?本文就将深入探讨这个问题。Deno是由Ryan Dahl创建的安全的Java

苗疆三刀的随手记 2020-10-29

Vue3+TypeScript完整项目上手教程

TypeScript 是JS的一个超集，主要提供了类型系统和对ES6的支持，使用 TypeScript 可以增加代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看， V

zouph000 2020-10-25

TypeScript：请停止使用 any

当我们开发 TypeScript 代码时，很可能会遇到 any 关键字。我们看到的大多数用法都表明我们正在处理 TypeScript 中的基本类型。在文档中我们可能会找到：。)来不使用 TypeScript 或第3方库编写的代码的值。在这些情况下，我们可

Jruing 2020-10-23

React应用程序配置TypeScript

最近在学习TypeScript的一些知识用到了 react,记录一下 react 创建应用项目和支持 TypeScript。React 是一个用于构建用户界面 UI 的 JavaScript 库,它的创建默认是不支持 TypeScript 的,本文使用的是

ctg 2020-10-14

2020 10大薪资最高的IT编程语言排名

三百六十行，行行转IT。IT行业自2016年首次超过金融行业以后，一直到现在每年都是稳居高薪第1名的宝座。调查结果显示，在美国，掌握Java语言的开发人员平均工资相较于2019年的118,000美元增长了6%。Java在最流行编程语言中排名第5，根据Sta

PMJ0 2020-10-13

[Typescript] Function Overloads

Function overload doesn‘t compile to Javascript, it is just a way to tell typescript about type information

ChaITSimpleLove 2020-10-06

2020年，JavaScript开发人员必备的5项高薪技能

开发人员的一生可以用两句话概括：计算器，以及学习新技能。成为开发人员绝非易事，他们是解决问题的人，也是不断学习的人。科技世界每天都在快速变化，如果你不想在这条快速变化的道路上落后，就必须不断学习新技能。不断升级，绝不止步。人们对React开发商的需求并未出

小飞侠V 2020-09-25

聊聊技术选型 - Angular2 vs Vue2

目前没法确切的评估未来一段时间这两个框架的维护情况，但基本能确定的是，框架的生命周期不会比我们大部分业务的生命周期短。从国内的使用情况以及社区发展来看，Vue 更胜一筹。从学习曲线上看，Angular 要更陡峭，Vue 要相对平缓一些。从能够开发的应用的全

QiaoranC 2020-09-25

重新认识Typescript | Vue3源码系列

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.大致意思

changcongying 2020-09-17

你不知道的 TypeScript 高级类型

对于有 JavaScript 基础的同学来说，入门 TypeScript 其实很容易，只需要简单掌握其基础的类型系统就可以逐步将 JS 应用过渡到 TS 应用。然而，当应用越来越复杂，我们很容易把一些变量设置为 any 类型，TypeScript 写着写

taizuduojie 2020-09-15

2020年面向初学者的优秀TypeScript书籍

TypeScript是时下最流行的前端开发语言之一，由于TypeScript往往会和其他框架生态和概念混合在一起，因此TypeScript也是当下比较难以难掌握和学习的语言之一。学习TypeScript需要理论联系实际，在学习基本概念的同时，还要注重动手实

淼寒儿 2020-09-13

半天掌握TypeScript，感觉就像写Java

本文转载自微信公众号「小姐姐味道」，作者小姐姐养的狗 。但是，JavaScript是个拦路虎，尤其是熟悉了Java之类的强类型检查语言之后，每次看到js都感觉不爽。万幸现在有了更好的选择。意思就是在ts中可以直接书写js。不过，这也只是类比而已，ts中的很

lyjava 2020-09-11

细数这些年被困扰过的 TS 问题

本文转载自微信公众号「全栈修仙之路」，作者阿宝哥 。TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供最新的和不

彤庆的技术 2020-09-02

TypeScript 配置文件该怎么写？

今天我们就来看下， TypeScript 的配置文件 tsconfig.json 该如何写。package.json 是包描述文件，对应的 Commonjs 规范，而 tsconfig.json 是最终被 TypeScript Compiler 解析和使用

锅哥 2020-08-27

typescript配置alias的详细步骤

注意"baseUrl": "./",不能省去，否则ts报Option 'paths' cannot be used without specifying '--baseUrl' option.错误

ruanhongbiao 2020-08-16

深入 TypeScript 中的子类型、逆变、协变，进阶 Vue3 源码前必须搞懂的

TypeScript 中有很多地方涉及到子类型 subtype、父类型 supertype 的概念，如果搞不清这些概念，那么很可能被报错搞得无从下手，或者在写一些复杂类型的时候看到别人可以这么写，但是不知道为什么他可以生效。在这个例子中，Animal 是

zouph000 2020-08-03
dz00

dz00

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号