TypeScript教程(二)接口与联合类型

来源:程序思维浏览:304次
TypeScript接口与联合类型

联合类型

联合类型表示取值可以为多种类型中的一种,可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
接下来看一下代码示例:

//联合类型 使用|支持多个类型
let muchtype:string|number="hello";
muchtype=1;
muchtype=true//报错

注意上面代码加粗的地方,muchtype变量定义了string或number类型,那么赋值可以是string或number类型,如果是其它类型会报错。

接口

接口可以理解为一种类型,一个规范,一个约束,可以对数组、对象、类进行约束,接口中可定义可选属性、只读属性、任意属性,这样在开发代码时便于调试。接下来看一下代码示例:

interface Istate{
    name:string;
    age:number;  
}
let user:Istate={name:"张三",age:10}

注意上面代码加粗的地方,使用interface关键词定义接口,Istate为接口的名称,接口名称的规范一般首字母大写,最好起名为“I”这样从名字上看就知道是接口,而不是类,因为类的名称首字母一般也为大写。接口中定义了name为string类型,age为number类型,在变量user中使用接口,那么在user变量中赋值对象的属性的个数,属性值的类型必须与接口一致,否则报错。
接口也支持可选属性,代码示例如下:

interface Istate2{
    name:string;
    age?:number;//加上问号表示存疑,可有可无
}
let user2:Istate2;
user2={name:"张三",age:20};
user2={name:"李四"}

注意上面代码加粗的地方,接口Istate2的属性age使用问号+冒号的方式定义类型,表示存疑,可有可无,在变量user2中使用接口,age属性可以有也可以没有。

接口也支持只读属性,代码示例如下:

interface Istate2{
    readonly name:string; //readonly只读,name不能更改
}
let user2:Istate2;
user2={name:"李四"}
user2.name="王五";//不能更改,否则报错

注意上面代码加粗的地方,使用readonly定义属性,该属性一旦赋值后就不能再更改,否则报错。

接口的属性也支持联合类型,代码示例如下:

interface Istate3{
          name:string|number;//可以是联合类型
}
let user3:Istate3={name:"张三"}
user3={name:18}

接口中的name支持string和number类型,在user3变量中可以赋值string或number类型。

如果对象属性个数不确定的情况下,可以这样定义,代码示例如下:

interface Istate3{
    name:string|number;//可以是联合类型
    age:number;
    [propName:string]:any; //动态添加属性 propName自定义
}
let user3:Istate3={name:"张三",age:10,gender:"男",money:2000000}

注意代码加粗的地方Istate3接口内部,name和age为必填类型,[propName:string]:any为动态添加属性,propName是自定义的名称,在变量user3赋值时name和age属性必须按照接口的约束类型赋值,而age属性后面的属性,是动态添加的属性,即gender和money属性为动态属性。

接口也可以约束数组,代码示例如下:

interface IArray{
    [index:number]:number;
}
let array:IArray=[1,2,3,1]

注意上面代码加粗的地方格式和动态添加属性很像,[index:number]:number中的index为自定义的名称类型必须是number,因为数组的索引就是number类型,冒号后面的number代表数组里面的值必须是number类型即数字,如果定义string类型[index:number]:string那么数组里面的值必须是string类型即字符串。
精品好课
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
收藏
扫一扫关注我们