TypeScript基础总结-接口

是什么?
TODO


用法
先看个简单的🌰

interface Student {
    name: string;
}

function getStudent(student: Student) {
    console.log(student.name);
}

getStudent({ name: 'meili'});
getStudent({ name: 'meili', sex: 'nv'}); 有额外的参数时,编译会报错。

在这个🌰中,定义了Student接口和getStudent方法,规定getStudent方法的参数符合student接口规范。

有额外的参数时编译会报错.png

类型
1.可选属性(?):当一些属性只有在某些条件下存在时,就会用到可选属性。

interface Student {
  name: string;
  sex?: string;
}
getStudent({ name: 'meili', sex: 'nv'}); // 此时编译不再报错

使用可选属性的好处:能预定义可能存在的属性;可以捕获引用了不存在的属性时的错误。
2.只读属性(readonly):只能在对象刚刚创建的时候修改其值。

interface Student {
    readonly name: string;
}

let stu: Student = { name: 'meili'};
stu.name = 'ltt';  // 会报错

可通过ReadonlyArray<T>创建不可修改的数组:

 let a: number[] = [1, 2, 3];
 let b: ReadonlyArray<number> = a;
 b[0] = 0; // 报错

修改不可变数组的元素报错.png

readonly与const的应用场景:不可变属性用readonly,不可变变量用const

3.额外的属性检查
在开头的🌰中,因为传了额外的参数,所以导致编译报错,所以怎么避开额外属性的检查呢?

  • 类型断言:
interface Student {
    name: string;
}

function getStudent(student: Student) {
    console.log(student.name);
}
getStudent({ name: 'meili', age: 0.5 } as Student) // 使用as类型断言避开额外属性检查
  • 字符串索引签名(推介):前提是我们确定这个对象具有作为特殊用途的额外属性。
interface Student {
    name: string;
    sex?:string;
    [propName: string] : any;
}

function getStudent(student: Student) {
    console.log(student.sex);
}

getStudent({ name: 'meili', age: 12 });  // age为额外属性
  • 将对象赋值给变量
interface Student {
    name: string;
}

let stu = {name: 'lily', age: 12};
getStudent(stu);

大多数额外类型检查的错误是bug,所以大多数时候我们是不需要绕开额外类型检查的。
思考避开额外类型检查和可选类型该怎么抉择?


4.函数类型:首先我们需要给接口定义一个调用签名

interface SearchFunc {
   (source: string, subString: string): boolean;
}

使用函数类型:

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string): boolean { // function(src, subStr) {
    let num = source.indexOf(subString);
    return num > -1;
}
mySearch('abcd', 'abc');

函数的参数名不必与接口中定义的参数名一致,只要对应位置上的类型能匹配的上即可;
函数参数类型和返回值类型不是必须指定的,ts系统会做类型推断。


5.可索引的类型:用来描述通过索引得倒的类型
索引签名:描述了对象索引的类型,和索引得到的返回值类型

interface StringArray {
  [index: number]: string;
}

ts支持两种索引签名:数字索引和字符串索引。也可同时使用两种索引。

  • 数字索引:
interface StringArray {
    [index: number]: string;
}

let strArr: StringArray = ['a', 'b'];
let str: string =  strArr[0];
  • 字符串索引:
interface StringArray2 {
    [x: string]: number;
}
...待补充

字符串索引签名能过很好的描述dictionary模式,会确保所有属性与返回值类型相匹配。

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以,length是number类型
  name: string       // 错误,`name`的类型与索引类型返回值的类型不匹配
}

6.类类型:接口描述了类的公共部分,不会帮你检查类是否具有某些私有成员。而类具有两个类型:静态部分的类型和实例的类型,当一个类去实现一个接口时(会报错),只对其实例部分进行检查,而constructor属于静态部分,不在检查的范围内。

interface ClockConstructor {
    new (hour: number, minute: number);
}

class BClock implements ClockConstructor {
    constructor(h: number, m: number) {};
}
报错.png

用类去实现类类型接口如⬇️:直接操作类的静态部分

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}

interface ClockInterface {
    tick();
}

function createClock(clock: ClockConstructor, h: number, m: number): ClockInterface {
    return new clock(h, m);
}

class AClock implements ClockInterface {
    constructor(h: number, m: number) {}
    tick() {
        console.log('tick');
    }
}

let clock = createClock(AClock, 12, 0);

思考:AClock类实现ClockInterface接口后,为什么符合ClockConstructor接口类型。


7.继承接口:接口可以继承接口,一个接口可继承多个接口。这就可以将一个接口中的成员赋值到另一个接口中。

interface Shape {
    width: number;
}

interface rectangle {
    color: string;
}

interface Square extends Shape, rectangle {
    area: number;
}

let square = <Square>{};
square.width = 10;
square.color = 'red';
square.area = 100;

8.混合类型:当你希望一个对象同时具有多种类型,就可以定义一个混合类型的接口。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number){ };
    counter.interval = 123;
    counter.reset = function (){ };
    return counter;
}

let countor = getCounter();
countor(10);
countor.reset();
countor.interval = 10;

9.接口继承类:当接口继承一个类类型时,它会继承类的成员但不包括实现,接口同样会继承到privateprotected成员,这意味着当你继承了一个包含privateprotected成员的类时,这个接口类型只能由该类或其子类实现。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容