网站建设销售销售流程图,5118关键词挖掘工具,银川网站开发制作,网站域名提交文章目录 前言可索引的类型类类型实现接口类静态部分与实例部分的区别扩展接口混合类型接口继承类后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Typescript #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握当前文章系列专栏Typescript 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 可索引的类型
与使用接口描述函数类型差不多我们也可以描述那些能够“通过索引得到”的类型比如a[10]或ageMap[“daniel”]。 可索引类型具有一个 索引签名它描述了对象索引的类型还有相应的索引返回值类型。 让我们看一个例子
interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray [Bob, Fred];let myStr: string myArray[0];上面例子里我们定义了StringArray接口它具有索引签名。 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。
共有支持两种索引签名字符串和数字。 可以同时使用两种类型的索引但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时JavaScript会将它转换成string然后再去索引对象。 也就是说用 100一个number去索引等同于使用100一个string去索引因此两者需要保持一致。
class Animal {name: string;
}
class Dog extends Animal {breed: string;
}// Error: indexing with a string will sometimes get you a Dog!
interface NotOkay {[x: number]: Animal;[x: string]: Dog;
}
字符串索引签名能够很好的描述dictionary模式并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property和obj[“property”]两种形式都可以。 下面的例子里 name的类型与字符串索引类型不匹配所以类型检查器给出一个错误提示
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!你不能设置myArray[2]因为索引签名是只读的。 类类型
实现接口
与C#或Java里接口的基本作用一样TypeScript也能够用它来明确的强制一个类去符合某种契约。
interface ClockInterface {currentTime: Date;
}class Clock implements ClockInterface {currentTime: Date;constructor(h: number, m: number) { }
}
你也可以在接口中描述一个方法在类里实现它如同下面的setTime方法一样
interface ClockInterface {currentTime: Date;setTime(d: Date);
}class Clock implements ClockInterface {currentTime: Date;setTime(d: Date) {this.currentTime d;}constructor(h: number, m: number) { }
}
接口描述了类的公共部分而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。 类静态部分与实例部分的区别
当你操作类和接口的时候你要知道类是具有两个类型的静态部分的类型和实例的类型。 你会注意到当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误
interface ClockConstructor {new (hour: number, minute: number);
}class Clock implements ClockConstructor {currentTime: Date;constructor(h: number, m: number) { }
}
这里因为当一个类实现了一个接口时只对其实例部分进行类型检查。 constructor存在于类的静态部分所以不在检查的范围内。
因此我们应该直接操作类的静态部分。 看下面的例子我们定义了两个接口 ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock它用传入的类型创建实例。
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 {constructor(h: number, m: number) { }tick() {console.log(beep beep);}
}
class AnalogClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log(tick tock);}
}let digital createClock(DigitalClock, 12, 17);
let analog createClock(AnalogClock, 7, 32);
因为createClock的第一个参数是ClockConstructor类型在createClock(AnalogClock, 7, 32)里会检查AnalogClock是否符合构造函数签名。 扩展接口
和类一样接口也可以相互扩展。 这让我们能够从一个接口里复制成员到另一个接口里可以更灵活地将接口分割到可重用的模块里。
interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}let square Square{};
square.color blue;
square.sideLength 10;一个接口可以继承多个接口创建出多个接口的合成接口。
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; 混合类型
先前我们提过接口能够描述JavaScript里丰富的类型。 因为JavaScript其动态灵活的特点有时你会希望一个对象可以同时具有上面提到的多种类型。
一个例子就是一个接口可以同时做为函数和对象使用并带有额外的属性。
interface Counter {(start: number): string;interval: number;reset(): void;
}function getCounter(): Counter {let counter Counterfunction (start: number) { };counter.interval 123;counter.reset function () { };return counter;
}let c getCounter();
c(10);
c.reset();
c.interval 5.0;
接口继承类
当接口继承了一个类类型时它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时这个接口类型只能被这个类或其子类所实现implement。
这是很有用的当你有一个很深层次的继承但是只想你的代码只是针对拥有特定属性的子类起作用的时候。子类除了继承自基类外与基类没有任何联系。 例
class Control {private state: any;
}interface SelectableControl extends Control {select(): void;
}pclass Button extends Control implements SelectableControl {
/pp select() { }
/pp}
/ppclass TextBox extends Control {
/pp select() { }
/pp}
/pp// 错误“Image”类型缺少“state”属性。
/ppclass Image implements SelectableControl {
/pp select() { }
/pp}
/ppclass Location {
/pp}/p在上面的例子里SelectableControl包含了Control的所有成员包括私有成员state。 因为 state是私有成员所以只能够是Control的子类们才能实现SelectableControl接口。 因为只有 Control的子类才能够拥有一个声明于Control的私有成员state这对私有成员的兼容性是必需的。
在Control类内部是允许通过SelectableControl的实例来访问私有成员state的。 实际上SelectableControl就像Control一样并拥有一个select方法。 Button和TextBox类是SelectableControl的子类因为它们都继承自Control并有select方法但Image和Location类并不是这样的。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
