02.TypeScript 接口

02.TypeScript 接口

TypeScript核心设计原则之一就是类型检查,而接口实际是为了这种类型检查而产生的,实际他并不会在生成的JavaScript里有半点体现。

一个简单的示例

// 定义IUser接口
interface IUser {
    name: string; // 姓名:字符串类型
    age: number; // 年龄:数值类型
}

function getUser(user: IUser) : string {
    return user.name + ‘:‘ + user.age;
}

var userInfo: string = getUser({ age: 25, name: ‘Kase‘ });
alert(userInfo);

getUser 接收的参数是一个 IUser 接口,所以在传参时ts会要求里必须要出现 age 和 name。

IUser 目的单纯只是为了编写TypeScript时更有效的开发,而且这种接口并不会在生成后的JavaScript有任何体现,我们来看看生成后的JavaScript:

function getUser(user) {
    return user.name + ‘:‘ + user.age;
}

var userInfo = getUser({ age: 25, name: ‘Kase‘ });
alert(userInfo);

可选参数

如上文的示例,必须是 age 和 name 存在,这样ts才会检查通过。但有时我们又不希望接口所定义的属性都是必须的,我们可以在属性名加上 ?,来表示一个属性是可选项。

interface IUser {
    name: string; // 姓名:字符串类型
    age: number; // 年龄:数值类型
    sex?: boolean // 性别:布尔型,但是可选项
}

function getUser(user: IUser) : string {
    return user.name + ‘:‘ + user.age + ‘:‘ + (user.sex ? ‘m‘ : ‘f‘);
}

var userInfo: string = getUser({ age: 25, name: ‘Kase‘ });
alert(userInfo);

函数类型

有时我们需要明确规定一个函数的参数和返回值时,也可以定义一个接口来实现约定。这种接口对于把某个函数做为一个第三方库被使用时,非常有用,因为他可以明确在IDE中告诉你参数类型。虽然有点遗憾ts在vs下在智能提醒时并不会包括强力的注释。

// 健康状态
interface Healthy {
    (height: number, weight: number): boolean
}

var myHealthy: Healthy;
myHealthy = function (height: number, weight: number) {
    return true;
}

console.log(myHealthy(170, 120));

对于调用者而言 myHealthy 必须传递两个数值类型的数据。

Class 类型

1、实现Interface

在TypeScript中也能实现类似C#中interface,用来强制实现类的结构。

interface IClock {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements IClock {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }

    constructor(h: number, m: number) { }
}

Clock 是 IClock 的实现类,明确约定必须要实现 currentTime 属性和 setTime 函数。

2、类static和instance区别

当使用类和接口时,类有两种类型:static(静态)部分和instance(实例)部分;由于ts只会对instance部分进行类型检查,而构造函数是属于静态部分,所以当我们使用一个带有构造签名的接口时,就会出错。

interface IClock {
    new (h: number, m: number);
}

class Clock implements IClock {
    constructor(h: number, m: number) { }
}

当然我们需要明确规定某个类在调用构造函数时参数时,我们可以这样子。。。但我不想说,因为我自己使用下来完全在违背ts的设计原则。在c#的接口中是无法约定接口的构造方法的,所以这种想法就需要提及。

3、interface继承

interface也能被继承,还可以组合继承多个接口。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

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

console.log(square);
时间: 2024-12-14 06:13:56

02.TypeScript 接口的相关文章

lua参考手册02—程序接口

3 - 程序接口(API) 这个部分描述了 Lua 的 C API , 也就是宿主程序跟 Lua 通讯用的一组 C 函数. 所有的 API 函数按相关的类型以及常量都声明在头文件 lua.h 中. 虽然我们说的是“函数”,但一部分简单的 API 是以宏的形式提供的. 所有的这些宏都只使用它们的参数一次 (除了第一个参数,也就是 lua 状态机), 因此你不需担心这些宏的展开会引起一些副作用. 在所有的 C 库中,Lua API 函数都不去检查参数的有效性和坚固性. 然而,你可以在编译 Lua 时

从C#到TypeScript - 接口

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

五、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