从C#到TypeScript - 接口

从C#到TypeScript - 接口

为了更好的抽象出行为和属性,TypeScript在ES6的基础上增加了接口interface
C#也有interface,不过TypeScript的接口还不大一样,C#里的接口一般是为类服务,让类实现接口中定义的方法或属性。
TypeScript在C#基础上更进一步,由于JavaScript是门非常灵活的语言,TypeScript作为JavaScript的超集需要保持灵活性,所以接口在TypeScript里可以脱离具体的类,单独作为类似契约的存在,接口里的属性也并非一定需要实现。

类的接口

这和C#的差不多,描述了公共的成员;不过实现接口语法有点类似于Java,用的是implements。

interface Selectable {
    isSelected: boolean;
}

class Control implements Selectable {
    isSelected : boolean;
}

同C#一样,接口可以多重继承其他接口,用的是extends。

interface Editable {}
interface Deleteable {}

interface Changeable extends Editable, Deleteable {}

接口的属性

接口的属性可以定义为readonly,这个和C#里只有get没有set的属性有点像,同样,实现接口的类也不一定需要readonly

interface Selectable{
    readonly isSelected: boolean;
}

class Control implements Selectable{
    isSelected: boolean;
}

let s: Selectable = { isSelected : true };
s.isSelected = false; // 编译出错, readonly

let c: Control = { isSelected : true };
c.isSelected= false; // 没问题

另外,接口还支持可选属性,同C#的可空属性一样,用?表示,实现接口的类可以不用实现可选属性。

interface RequestConfig {
    url: string;
    body?: any;
}

class Request implements RequestConfig {
    url: string;
}

接口不需要类的支持

在C#里面,接口如果没有类来实现的话是没有什么意义的,但在TypeScript里不一样,接口可以单独使用。

interface RequestConfig {
    url: string;
    body?: any;
}

let config: RequestConfig = {url: ‘www.google.com‘};

这种经常用在函数的参数上面,用来描述具体的参数,把具体的参数放到接口里,方便操作,也方便重构。

function Request(config: RequestConfig){

}

接口除了描述属性外,还可以用来描述函数,不过一个接口只能描述一个函数,描述时定义好参数和返回值即可。
从实现上看有点类似于C#的delegate

interface CheckLogin {
    (name: string, pwd: string): boolean;
}

let check: CheckLogin = function(name: string, pwd: string): boolean {
    return false;
}

另外,接口还可以用来描述可索引类型,就有点类似C#的Dictionary
索引支持两种:numberstring

//定义一个Dict,key是string,value也是string
interface Dict {
    [key: string] : string;
}

let dict: Dict = { ‘key1‘: ‘value1‘, ‘key2‘: ‘value2‘};
console.info(dict[‘key1‘]); // value1
console.info(dict[‘key‘]); // undefined

接口继承类

这在C#中很不可思议,接口居然还可以反过来继承类,不过对于JavaScript里来说,灵活方便很重要,所以TypeScript实现了这个功能来快速生成一个接口。
虽说在比较复杂的继承关系时可能会有用,不过个人认为这个功能还是有点鸡肋,因为复杂的继承通常会引入一些问题如紧耦合,牵一发而动全身,再加上这个,可能更让人摸不着头脑,不如用组合来得好。
接口继承类时会继承类中所有的成员,不管是private,protected还是public,只是不包括其实现。
不过继承了一个类不公开成员的接口只能被该类或该类的子类实现。

class User{
    name: string;
    protected pwd: string = "123";
}

class Admin extends User{
    constructor(n: string, p: string){
        super();
        this.name = n;
        this.pwd = p;
    }
}

interface UserConfig extends User{ //这里包含了name和private的pwd
}

let config: UserConfig = new Admin(‘brook‘, ‘123‘);

泛型

TypeScript是同C#一样支持泛型的,而且在使用方面也差不多,在接口名后面加上<T>即可。

interface Testable<T> {
    field: T;
    (arg: T): T;
}

也支持泛型约束,关键字是extends

interface Testable<T extends Object> {
    field: T;
    (arg: T): T;
}

TypeScript的接口对于C#程序员来说是有点奇怪了,不过用过之后还是发现非常符合JavaScript语言灵活的特性。

时间: 2024-10-25 06:53:28

从C#到TypeScript - 接口的相关文章

02.TypeScript 接口

02.TypeScript 接口 TypeScript核心设计原则之一就是类型检查,而接口实际是为了这种类型检查而产生的,实际他并不会在生成的JavaScript里有半点体现. 一个简单的示例 // 定义IUser接口 interface IUser { name: string; // 姓名:字符串类型 age: number; // 年龄:数值类型 } function getUser(user: IUser) : string { return user.name + ':' + user

五、TypeScript 接口

转自:http://www.hubwiz.com/ 接口声明 在TypeScript中,接口是用作约束作用的,在编译成JavaScript的时候,所有的接口都会被擦除掉,因为 JavaScript中并没有接口这一概念.TypeScript中接口是用关键字interface进行声明,例如: interface LabelledValue { //定义接口 label: string;          //定义属性 } interface LabelledValue {  //定义接口 label

TypeScript接口

介绍 TypeScript的核心原则之一是对值所具有的结构进行类型检查. 它有时被称做“鸭式辨型法”或“结构性子类型化”. 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 接口初探 下面通过一个简单示例来观察接口是如何工作的: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } let myObj = { size: 10, lab

TypeScript 接口

TS的接口好像C#/Java中的接口 , 但是TS的interface是不能继承(implement)其他的interface , 但是TS的interface可以规范自己的结构Object.无论如何TS比起JS来说,在OOP上面进步了不少. 注 : 下面的代码都是TS代码 /**  * Created by CV-PC153 on 2017/8/7.  */ interface User{     id:number;     name:string; } function greeter(u

TYpeScript接口的使用

1.接口中的属性值的使用: 1 // 作用是强制类型检查 2 interface Iperson { 3 name: string; 4 age: string; 5 } 6 7 class Person { 8 constructor(public config:Iperson) { 9 10 } 11 } 12 13 let p1: Person = new Person({ 14 name: 'swe', 15 age:'12' 16 }); 2.接口中的方法的使用 没有多态.使用效果与J

typescript 接口的新认识

interface 用于接收服务器的数据. eg: interface mmmmm { x: string, y: number, z: number, select: KnockoutObservable<boolean>} $.post(url + '/app.ashx', ko.utils.stringifyJson( {x: '12', y: 1, z: 10 }), function (response) { var result = $.parseJSON(response); a

TypeScript接口学习心得之一

import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { MyObj } from 'src/app/pojo/myObj'; @Component({ selector: 'app-work', templateUrl: './work.component.html', styleUrls: ['./work.component.cs

TypeScript——接口

接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约(规范对象的属性 属性的类型 属性值的类型) 可选属性 通过 ? 来设置 只读属性 通过 readonly 来设置 对象类型接口 interface List { readonly id: number; // 只读属性 name: string; age?: number; // 可选属性 } interface Result { data: List[] } function render(result: Result) { res

TypeScript入门五:TypeScript的接口

TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的基本使用 1.1定义TypeScript接口的指令(interface) 接口让我们想到的第一个短语就是(API).比如日常我们所说的调用某某程序的API一般都是跨应用的接口,如别的网站的或者APP的接口:还有我们每天都是用的编程语言的指令和内置的方法及属性,这些可以叫做编程语言的接口:还有令我们既