TS-接口
接口
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-接口的更多相关文章
- Typescript基础(4)——接口
前言 今天继续typescript的学习,开始ts接口部分的学习. 接口 接口的理解 首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...
- 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- 用Vue3构建企业级前端应用,TS能让你更轻松点
摘要:Vue 3已经发布有一段时间了,到底有哪些新特性值得关注,如何用它构建企业级前端项目,怎样快速上手Vue 3?本篇文章将对此进行详细讲解. 前言 工欲善其事,必先利其器 --<论语> ...
- Angular2 Service实践——实现简单音乐播放服务
引言: 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了.组件间通信的其中一种优等选择就是使用服务,在ng1里就有 ...
- Angular2 Service实践
引言: 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了.组件间通信的其中一种优等选择就是使用服务,在ng1里就有 ...
- angualr4 路由 总结笔记
使用cli命令创建根路由模块 ng g cl app.router 或自己建一个路由配置文件 如:app/app.router.ts // app/app.router.ts // 将文件修改为 im ...
- vscode 搭建react-native
vscode 搭建react-native 选择:vscode + typings + eslint * vscode: 宇宙最强IDE家族的最新产品 * typings: 基于typescirpt的 ...
- typscript 语法1
let isDone: boolean = false; let decLiteral: number = 0xf00d; let names: string = 'boob'; /** 使用模版字符 ...
- 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述
定场诗 八月中秋白露,路上行人凄凉: 小桥流水桂花香,日夜千思万想. 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广. 前言 洛伊安妮·格罗纳女士所著的<学习JavaScript数据 ...
- 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践
前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm i ...
随机推荐
- 解决code first Migration 增加外键时出现错误的问题
先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...
- 使用postman请求响应Invalid CORS request
响应结果 解决方法: 下载之后解压,在Chrome浏览器,打开扩展 chrome://extensions/ 点击“加载已解压的扩展程序”添加我们解压的包,或者直接拖拽.之后我们就可以看到Postma ...
- python smtp发邮件报错“[Errno -2] Name or service not known”的解决
最近给ss-py-mu写了个检查用户是否到期,并在到期前的第2天邮件提醒的功能. 配置存储在ini文件中,通过configparser模块获取,但尝试发送邮件的时候发现报错[Errno -2] Nam ...
- 文件上传绕过WAF
文件上传 文件上传实质上还是客户端的POST请求,消息主体是一些上传信息.前端上传页面需要指定 enctype为multipart/from-data才能正常上传文件. 此处不讲各种中间件解析漏洞只列 ...
- python制作坦克对战
创建子弹类 import pygame class Bullet(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__i ...
- vscode gp 安装第三方包
由于code.google.com被墙,导致一些托管在code.google.com上面的包go get不下来,此功能就是用于解决这个问题. http://www.golangtc.com/downl ...
- Ubuntu下设置静态网址
百度上找的图形界面下设置方式: 因为我这里的ubuntu版本是14.10版本 所以我先点击[系统设置],它位置在桌面左侧的菜单栏后面位置. 在系统设置页面,找到[硬件]选项里面的[网络]一项 然后再使 ...
- django 重写用户模型 AbstractBaseUser
https://blog.csdn.net/weixin_40744265/article/details/80745652
- 屏幕左侧鼠标常驻,隐藏部分显示,文章鼠标常驻,隐藏部分隐藏(我的hexo next博客)
文章目录 如图 功能 代码 博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu?tab=repositories 如图 功能 最左侧添加透明 ...
- 为了避免hexo博客换了电脑应该提前做的准备。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 本文转自:https://www.jiansh ...