TypeScript入门-接口

sewerganger 发布于2019-08-21 15:32 / 3482人阅读

摘要：接口类型检查不会去检查属性顺序，但是属性的必须存在且类型匹配。函数的返回值函数的返回值类型必须与接口定义的返回值保持一致。示例代码如下张三李四张三输出张三输出张三索引签名支持字符串和数字两种数据类型。

学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语音将更有利于高效地开发 Angular 应用。

接口

接口在面向对象设计中具有极其重要的作用，TypeScript 接口的使用方式类似于 Java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等类型。

属性类型接口

在 TypeScript 中，使用 interface 关键字来定义接口。示例代码如下：

interface FullName {
    firstName: string;
    secondName: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {age: 10, firstName: "Wu", secondName: "Weisen"};
printLabel(myObj);

上例中接口 FullName 包含两个属性：firstName 和 secondName,且都是字符串类型，这里有两点需要注意：

传给 printLabel() 方法的对象只要“形式上”满足接口的要求即可，例如上例中对象 myObj 必须包含 firstName 和 secondName 属性，且类型都是 string，即使有多出的属性也不会报错。

接口类型检查不会去检查属性顺序，但是属性的必须存在且类型匹配。

TypeScript 还提供了可选属性，可选属性的接口定义与普通接口的定义方式差不多，我们只需在可选属性变量名后面加一个?符号，示例代码如下：

interface FullName {
    firstName: string;
    secondName?: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {firstName: "Wu"};    // secondName 是可选属性，可以不传
printLabel(myObj);

函数类型接口

接口除了描述带有属性的普通对象外，也能描述函数类型。定义函数类型接口时，需要明确定义函数的 参数列表 和 返回值类型，且参数列表的每个参数都要有 参数名 和类型。示例代码如下：

interface encrypt {
    (val: string, salt: string): string
}

上边已经定义好了一个函数类型接口 encrypt，现在，我们来看看如何使用函数类型接口。

let md5: encrypt;
md5 = function(val: string, salt: string){
    console.log("orgin value:" + val);
    let encryptValue = /** 代码略 **/;
    console.log("encryptvalue:" + encryptValue);
    return encryptValue;
}
let pwd = md5("password", "Angular");

对于函数类型的接口要注意以下两点：

函数的参数名：使用时参数个数与对应位置变量的数据类型都必须保持一致，参数名可以不一样。

函数的返回值：函数的返回值类型必须与接口定义的返回值保持一致。

可索引类型接口

可索引类型接口用来描述那些可以通过索引得到的类型，例如 userArray[1]、user、Object["name"]等。它包含一个索引签名，即通过特定的索引来得到指定类型的返回值。示例代码如下：

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

interface UserObject {
    [index: string]: string;
}

let userArray: UserArray;
let userObject: UserObject;

userArray = ["张三", "李四"];
userObject = {"name": "张三"};

console.log(userArray[0]);    // 输出：张三
console.log(userObject["name"]);    // 输出：张三

索引签名支持字符串和数字两种数据类型。而当使用数字类型来索引时，JavaScript 最终也会将它装换成 字符串类型 后再去索引对象，如上例中，以下写法都是一样的：

console.log(userArray[0]);    // 输出：张三
console.log(userArray["0"]);    // 输出：张三

类类型接口

类类型接口用来规范一个类的内容，示例代码如下：

interface Animal {
    name: string;
}

class Dog implements Animal {
    name: string;
    constructor(n: string) {}
}

我们可以在接口中描述一个方法，并在类里去具体实现它的功能，示例代码如下：

interface Animal {
    name: string;
    setName(n: string): void;
}

class Dog implements Animal {
    name: string;
    setName(n: string) {
        this.name = n;
    }
    constructor(n: string) {}
}

接口扩展

和类一样，接口也可以实现相互扩展，即能将成员从一个接口复制到另一个里面，这样可以更灵活地将拆分到可复用的模块里面，示例代码如下:

interface Animal {
    eat(): void;
}

interface Person extends Animal {
    talk(): void;
}

class Programmer {
    coding(): void {
        console.log("wow~")
    }
}

class ITGirl extends Programmer implements Person {
    eat(){
        console.log("animal eat");
    }
    
    talk() {
        console.log("person talk");
    }
    
    coding(): void {
        console.log("I like coding");
    }
}

let itGirl = new ITGirl();    // 通过组合集成类来实现接口扩展，可以更灵活复用模块

itGirl.coding();

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88217.html

为vue3学点typescript, 基础类型和入门高级类型

摘要：导航第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型很重要这一节很重要可以说是的最核心部分这一节学完其实就可以开始用写代码了想想中的再看看标题中的类型字所以请大家务必认真什么是入门高级类型因为高级类型的内容比较多但是有些基导航第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型很重要这一节很重要, 可以说...

Songlcy 2019-08-23 18:27 评论0 收藏0
TypeScript入门教程

摘要：现在，出现了更多本身支持或者通过插件支持语法智能提示纠错甚至是内置编译器的文本编辑器和。 TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行（语法糖） TypeScript提供了类型系统，规范类似Java TypeScript提供了ES6的支持，也可以支持部分ES7草案的特性，不用担心TypeS...

Dr_Noooo 2019-08-26 11:52 评论0 收藏0
TypeScript快速入门

摘要：添加了可选的静态类型注意并不是强类型和基于类的面向对象编程。类类型接口示例接口更注重功能的设计，抽象类更注重结构内容的体现模块中引入了模块的概念，在中也支持模块的使用。一：Typescript简介维基百科： TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delp...

moven_j 2019-08-22 11:11 评论0 收藏0
TypeScript入门-模块

摘要：模块模块是自声明的，两个模块之间的关系是通过在文件级别上使用和来建立的。类似地，我们必须通过导入其他模块导出的变量函数类等。模块使用模块加载器去导入它的依赖，模块加载器在代码运行时会查找并加载模块间的所有依赖。学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语...

econi 2019-08-20 15:35 评论0 收藏0
TypeScript基本知识点整理（看完绝对入门---真的！！）

摘要：因为中，如果函数没有返回值，则会默认返回。抽象类在运行时是可见的，可以通过判断。接口只能描述类的公共部分，不会检查私有成员，而抽象类没有这样的限制。本片文章主要讲述了TypeScript的基础知识点，这些是我个人的理解，如有不正确的地方请评论斧正！文章以下面的顺序讲解：变量类型函数类接口泛型命名空间在开始之前我们先装环境： npm i typescript -g //全局...

Yi_Zhi_Yu 2019-05-21 19:23 评论0 收藏0