TypeScript学习3-接口

jindong 发布于2019-08-26 18:37 / 1789人阅读

摘要：使用场景数据类型声明和约束声明数据类型使用数据类型面向对象编程这里和面向对象语言类似，用于定义对象接口，声明对象的结构，定义类时可以实现接口，满足这个接口定义的功能。

什么是接口

TypeScript的核心就是类型检查，接口就是用于声明类型，给内部或第三方使用者提供类型声明和约束。

使用场景

数据类型声明和约束

// 声明数据类型
interface CustomerInfo {
  customerCode: string;
  customerName: string;
}

// 使用数据类型
function helloCustomer(customerInfo: CustomerInfo) {
  console.log(`Hello, ${customerInfo.customerName}!`);
}

helloCustomer({customerCode: "1001", customerName: "Jee"}); // ok
helloCustomer({customerName: "Jee"}); // error, Property "customerCode" is missing

面向对象编程

这里和面向对象语言类似，用于定义对象接口，声明对象的结构，定义类时可以实现接口，满足这个接口定义的功能。

// 接口声明
interface Animal {
  name: string;
}

// 接口继承
interface Mammal extends Animal {
  legNum: number;
  sound(): string;
}

// 类实现
class Bull implements Mammal {
  name: string;
  legNum: number;
  
  constructor(name: string) {
    this.name = name;
    this.legNum = 4;
  }

  sound() {
    return "moo";
  }
}

// 实例
let bull1 = new Bull("bull1");
console.log(bull1.sound()); // moo

可变接口属性

有两种方式可以实现可变属性，属性明确时，推荐第一种。不明确时可以用第二种。

可选属性，定义可以选传的属性

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可选属性
}

索引类型，支持string，number索引属性

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可选属性
  [key: string]: any; // 其他任意名称，任意类型的属性
}

这里说明一下，因为JavaScript对象中，数字索引是会转换成string来取值的。如果一个接口里面，同时有number、string索引属性时，number索引属性的类型，必须时string索引属性的子类型。也就是，number索引的属性类型，必须能被string索引的属性类型覆盖；用number索引去取值，取到的值也是string索引属性的类型。

静态属性和只读属性

静态类型，即类属性，static修饰

只读属性，初始化后不能修改，readonly修饰

interface CustomerInfo {
  static greeting = "Hello"; // 静态属性
  static readonly standardGreeting = "Hello"; // 只读静态属性
  readonly customerCode: string; // 只读属性
  customerName: string; // 普通属性
}

const vs readonly，变量用const，属性用readonly

函数类型

接口除了能描述对象类型，还能描述函数类型（这个和面向对象语言有点不一样，需要理解一下）。

interface SearchFunc {
  (content: string, key: string): boolean;
}

// 这里参数名可以不一样，类型也可以省略
let mySearchFunc: SearchFunc = (c, k) => {
  return c.search(k) > -1;
}

后续

会再写一遍类的学习，一篇接口与类的结合使用。

GPU云服务器云服务器 TypeScript typescript javascript typescript-ionic2 第3方支付接口

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

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

从项目中由浅入深的学习typescript (3)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习前言为什么会有大家有没想过这个问题原因是是弱类型编程语言也就是申明变量类型可以任意变换。是的超集，也相当于预处理器本文通过一个项目来让你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章从项目中由浅入深的学习vue,微信小程序...

ninefive 2019-08-23 16:59 评论0 收藏0
如何从JavaScript跨越到TypeScript [基础进阶知识点]

摘要：接口前端程序员很难理解的点也是一门面向对象的语言，但是中它是基于原型实现的，中使用了类，这样会更清晰的体会到面向对象这一说法，但是实际在中的面向对象更加完整，它跟这些语言一样，通过接口和类去完整的面向对象编程。从入门到放弃的java 初中时自学过JAVA，学了大概一个多月吧，学了一个多月，看视频这些，后面放弃了编程。依稀记得，那段日子极度苦逼，我想如果当时是学javaScrip...

wangym 2019-08-23 16:10 评论0 收藏0
如何从JavaScript跨越到TypeScript [基础进阶知识点]

摘要：接口前端程序员很难理解的点也是一门面向对象的语言，但是中它是基于原型实现的，中使用了类，这样会更清晰的体会到面向对象这一说法，但是实际在中的面向对象更加完整，它跟这些语言一样，通过接口和类去完整的面向对象编程。从入门到放弃的java 初中时自学过JAVA，学了大概一个多月吧，学了一个多月，看视频这些，后面放弃了编程。依稀记得，那段日子极度苦逼，我想如果当时是学javaScrip...

zhunjiee 2019-08-02 14:34 评论0 收藏0
深入学习TypeScript

摘要：是的超级，遵循最新的规范相当于包含了的语法。表示方法没有返回任何类型类型表示的是那些永不存在的值的类型，例如异常错误写法错误三函数内容概述函数的定义可选参数默认参数剩余参数函数重载箭头函数。一、Typescript 介绍、环境搭建 1.1 Typescript 介绍 1.TypeScript 是由微软开发的一款开源的编程语言，像后端 java、C#这样的面向对象语言可以让 js 开发...

赵连江 2019-08-23 11:39 评论0 收藏0