博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
TS-接口
阅读量:4881 次
发布时间:2019-06-11

本文共 2271 字,大约阅读时间需要 7 分钟。

接口

TS的核心原则之一是对值所具有的结构进行类型检测

接口初探

function printLabel(labelledObj: { label: string }) {  console.log(labelledObj.label);}let myObj = { size: 10, label: "Size 10 Object" };printLabel(myObj);

可选属性

  width?: number

interface SquareConfig {  color?: string  width?: number}function createSquare(config: SquareConfig): { color: string, area: number } {  let newSquare = { color: 'white', area: 100 }  if (config.color) { newSquare.color = config.color }  if (config.width) { newSquare.area = config.width * config.width }  return newSquare}let mySquare = createSquare({ color: 'red' })console.log(mySquare)
View Code

只读属性

  readonly x: number

interface Point {  readonly x: number  readonly y: number}let p1: Point = { x: 10, y: 20 }p1.x =  20 // error
View Code

  readonly  vs  const

    如果是变量那么使用const , 如果是属性那么使用readonly

额外的属性检测

  [propName: string]: any

interface Square {  color?: string  width?: number  [propName: string]: any}function createSquare(config: Square): {color: string, area: number} {  let mySquare = {color: 'white', area: 100}  if (config.color) {    mySquare.color = config.color  }  if (config.width) {    mySquare.area = config.width * config.width  }  return mySquare}createSquare({colur: 'black', width: 20})
View Code

函数类型

interface SearchFunc {  (source: string, subString: string) : boolean}let mySearch: SearchFuncmySearch = function(src: string, str: string) {  let result = src.search(str)  return result > -1}
View Code

可索引的类型

interface StringArray {  [index: number]: string}let myArray: StringArraymyArray = ['Bob', "Fred"]let myStr: string = myArray[0]
View Code

类类型

interface ClockInterface {  currentTime: Date}class Clock implements ClockInterface {  currentTime: Date  constructor(h:number, m: number) {}}
View Code

继承接口

interface Shape {  color: string}interface Square extends Shape {  sideLen: number}let square = {} as Squaresquare.color = 'red'square.sideLen = 10
View Code

混合类型

interface Counter {  (start: number): string  interval: number  reset(): void}function getCounter(): Counter {  let counter = (function (start: number) { }) as Counter  counter.interval = 123  counter.reset = function () { }  return counter}let c = getCounter()c(10)c.reset()c.interval = 4.9
View Code

 

转载于:https://www.cnblogs.com/sonwrain/p/11001478.html

你可能感兴趣的文章
高级java面试宝典
查看>>
声明,本博客文章均为转载,只为学习,不为其他用途。感谢技术大牛的技术分享,让我少走弯路。...
查看>>
centos7.1下 Docker环境搭建
查看>>
c# 导出Excel
查看>>
Status: Checked in and viewable by authorized users 出现在sharepoint 2013 home 页面
查看>>
python数据预处理
查看>>
Python之路,Day21 - 常用算法学习
查看>>
Android安全-代码安全1-ProGuard混淆处理
查看>>
部署core
查看>>
mysql 时间设置
查看>>
如何在 Xcode 中修改应用的名字
查看>>
有关交换机——熟悉原理是必须的【转载】
查看>>
ACM(数学问题)——UVa202:输入整数a和b(0≤a≤3000,1≤b≤3000),输出a/b的循环小数表示以及循环节长度。...
查看>>
【转】Android 读取doc文件
查看>>
js 数据绑定
查看>>
jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字
查看>>
H5 简介
查看>>
window.frameElement的使用
查看>>
nl命令
查看>>
如何使用jQuery $.post() 方法实现前后台数据传递
查看>>