接口

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

接口初探

function printLabel(labelledObj: { label: string }) {
console.log(labelledObj.label);
} let myObj = { size: , 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: }
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)

只读属性

  readonly x: number

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

  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: }
if (config.color) {
mySquare.color = config.color
}
if (config.width) {
mySquare.area = config.width * config.width
}
return mySquare
} createSquare({colur: 'black', width: })

函数类型

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

可索引的类型

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

类类型

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

继承接口

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

混合类型

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

TS-接口的更多相关文章

  1. Typescript基础(4)——接口

    前言 今天继续typescript的学习,开始ts接口部分的学习. 接口 接口的理解 首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...

  2. 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

    1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择  ...

  3. 用Vue3构建企业级前端应用,TS能让你更轻松点

    摘要:Vue 3已经发布有一段时间了,到底有哪些新特性值得关注,如何用它构建企业级前端项目,怎样快速上手Vue 3?本篇文章将对此进行详细讲解. 前言 工欲善其事,必先利其器 --<论语> ...

  4. Angular2 Service实践——实现简单音乐播放服务

    引言: 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了.组件间通信的其中一种优等选择就是使用服务,在ng1里就有 ...

  5. Angular2 Service实践

    引言: 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了.组件间通信的其中一种优等选择就是使用服务,在ng1里就有 ...

  6. angualr4 路由 总结笔记

    使用cli命令创建根路由模块 ng g cl app.router 或自己建一个路由配置文件 如:app/app.router.ts // app/app.router.ts // 将文件修改为 im ...

  7. vscode 搭建react-native

    vscode 搭建react-native 选择:vscode + typings + eslint * vscode: 宇宙最强IDE家族的最新产品 * typings: 基于typescirpt的 ...

  8. typscript 语法1

    let isDone: boolean = false; let decLiteral: number = 0xf00d; let names: string = 'boob'; /** 使用模版字符 ...

  9. 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    定场诗 八月中秋白露,路上行人凄凉: 小桥流水桂花香,日夜千思万想. 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广. 前言 洛伊安妮·格罗纳女士所著的<学习JavaScript数据 ...

  10. 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm i ...

随机推荐

  1. 解决code first Migration 增加外键时出现错误的问题

    先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...

  2. 使用postman请求响应Invalid CORS request

    响应结果 解决方法: 下载之后解压,在Chrome浏览器,打开扩展 chrome://extensions/ 点击“加载已解压的扩展程序”添加我们解压的包,或者直接拖拽.之后我们就可以看到Postma ...

  3. python smtp发邮件报错“[Errno -2] Name or service not known”的解决

    最近给ss-py-mu写了个检查用户是否到期,并在到期前的第2天邮件提醒的功能. 配置存储在ini文件中,通过configparser模块获取,但尝试发送邮件的时候发现报错[Errno -2] Nam ...

  4. 文件上传绕过WAF

    文件上传 文件上传实质上还是客户端的POST请求,消息主体是一些上传信息.前端上传页面需要指定 enctype为multipart/from-data才能正常上传文件. 此处不讲各种中间件解析漏洞只列 ...

  5. python制作坦克对战

    创建子弹类 import pygame class Bullet(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__i ...

  6. vscode gp 安装第三方包

    由于code.google.com被墙,导致一些托管在code.google.com上面的包go get不下来,此功能就是用于解决这个问题. http://www.golangtc.com/downl ...

  7. Ubuntu下设置静态网址

    百度上找的图形界面下设置方式: 因为我这里的ubuntu版本是14.10版本 所以我先点击[系统设置],它位置在桌面左侧的菜单栏后面位置. 在系统设置页面,找到[硬件]选项里面的[网络]一项 然后再使 ...

  8. django 重写用户模型 AbstractBaseUser

    https://blog.csdn.net/weixin_40744265/article/details/80745652

  9. 屏幕左侧鼠标常驻,隐藏部分显示,文章鼠标常驻,隐藏部分隐藏(我的hexo next博客)

    文章目录 如图 功能 代码 博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu?tab=repositories 如图 功能 最左侧添加透明 ...

  10. 为了避免hexo博客换了电脑应该提前做的准备。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 本文转自:https://www.jiansh ...