ToB企服应用市场:ToB评测及商务社交产业平台

标题: typescript-- interface [打印本页]
作者: 熊熊出没    时间: 2024-6-24 04:52
标题: typescript-- interface
接口

类似于对象类型字面量，接口类型也能够表示恣意的对象类型，但是接口类型能够给对象类型定名以及定义类型参数。接口类型无法表示原始类型。
接口声明只存在于编译阶段，在编译以后的JavaScript中不包含任何接口。
接口声明

示例
  1. interface InterfaceName {
  2.     TypeMember;
  3.     TypeMember;
  4.     ...
  5. }
复制代码
属性签名

示例
  1. PropertyName: Type;
复制代码
  1. interface Point {
  2.     x:number;
  3.     y:number;
  4. }
复制代码
调用签名

示例
  1. (ParameterList): Type
复制代码
  1. interface ErrorConstructor {
  2.     (message?: string):Error;
  3. }
复制代码
构造签名

示例
  1. new (ParameterList): Type
复制代码
  1. interface ErrorConstructor {
  2.     new (message?: string): Error;
  3. }   
复制代码
方法签名

示例
  1. PropertyName(ParameterList):Type
  2. PropertyName: {(ParamterList): Type}
  3. PropertyName: (ParameterList) => Type
复制代码
  1. interface Document {
  2.     getElementById(elementId: string): HTMLElement | null;
  3. }
  4. interface A {
  5.     f(x: string):string // 方法签名
  6. }
  7. interface B {
  8.     f: {(x:boolean):string} // 属性签名和对象类型字面量
  9. }
  10. interface C {
  11.     f: (x: boolean) => string; // 属性签名和函数类型字面量
  12. }
  13. const f = 'f'
  14. interface D {
  15.     [f](x:boolean):string // 方法签名中的属性名可以为可计算属性名
  16. }
复制代码
索引签名

字符串索引签名的语法

  1. [IndexName: string]:Type // IndexName必须为属性值
复制代码
  1. interface A {
  2.     [prop: string]: number
  3. }
复制代码
一个接口中最多可以定义一个字符串索引签名，字符串索引签名会约束对象类型种种那个所有属性的类型
  1. interface A {
  2.     [prop:string]: number;
  3.     a:number;
  4.     b:0;
  5.     c:1 | 2
  6. }
复制代码
数值索引签名

  1. [IndexName: number]: Type; //IndexName必须为数值
复制代码
  1. interface A {
  2.     [prop:number]: string
  3. }
  4. const obj: A = ['a','b','c']
  5. obj[0]// string
复制代码
若接口中同时存在字符串索引和数值索引签名，数值索引签名必须能够赋值给字符串索引签名的类型，在JavaScript中，对象的属性名只能是字符串(Symbol)，虽然JavaScript也会允许数字等其他值为对象的索引，但是终极会转换为字符串类型。
  1. interface A {
  2.     [prop:string]: number;
  3.     [prop: number]: 0 | 1;
  4. }
  5. //交换字符串索引签名和数值索引签名的类型，则会产生编译错误
  6. interface B {
  7.     [prop: string]: 0 | 1;
  8.     [prop:number]: number //编译错误
  9. }
复制代码
可选属性与方法

默认环境下，接口中属性签名和方法签名定义的对象属性都是必选的。
  1. interface Foo{
  2.     x: string
  3.     y(): number
  4. }
  5. const a: Foo = {x: 'hi'} // 缺少属性y
  6. const b: Foo = {y(){return 0}} // 缺少属性x
  7. const c: Foo = {
  8.     x: 'hi',
  9.     y() {return 0}   
  10. }
复制代码
  1. interface Foo{
  2.     x?: string;
  3.     y?: number;
  4. }
复制代码
假如接口中定义了重在方法，所有重载的方法签名必须同时为必选或者是可选的。
  1. interface Foo{
  2.     a(): void;
  3.     a(x:boolean):boolean;
  4.     b?():void;
  5.     b?(x:boolean):boolean;
  6. }
  7. interface Bar {
  8.     a(): void;
  9.     a?(x:boolean):boolean
  10.     // 编译错误，重载签名必须为全部为必选的或者可选的。
  11. }
复制代码
只读属性与方法

  1. interface A {
  2.     readonly a: string;
  3.     readonly [prop: string]: string;
  4.     readonly [prop: string]: string;
  5. }
复制代码
若接口中定义了只读的索引签名，那么接口类型中的所有属性都是只读属性。
  1. interface A {
  2.     readonly [prop: string] : number;
  3. }
  4. const a: A = {x: 0}
复制代码
假如接口中及定义了只读索引签名，又定义了非只读的属性签名，那么非制度的属性签名定义的属性依然是非制度的，除此之外，所有的属性都是只读的
接口的继承

接口可以继承其他的对象类型。
  1. interface Shape {
  2.     name: string
  3. }
  4. interface Circle extends Shape {
  5.     radius: number
  6. }
复制代码
一个接口可以同时继承多个接口，父接口名之间使用逗号分隔
  1. interface Style {
  2.     color: string
  3. }
  4. interface Shape {
  5.     name： string
  6. }
  7. interface Circle extends Style, Shape {
  8.     radius: number
  9. }
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4