typescript中新增的基本数据类型
javascript中有7种数据类型,分别是:boolean,number,string,null,undefined和object,以及在es6中新增的一种类型 symbol。而typescript又在此基础上增加了一些类型,接下来一个个来看。
元组
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同,例如:
let a: [string, number] a = ['hello', 1] a=[1,'hello'] //Error Type 'number' is not assignable to type 'string'... a=['hello'] //Error Property '1' is missing in type '[string]' but required in type '[string, number]'. a=['hello',1,1] //Error Type '[string, number, number]' is not assignable to type '[string, number]'.
上面定义了一个长度为2的元组,且每个元素的类型是固定的,当赋值时,各个位置上的元素类型都要对应,元素个数也要一致,不然会报编译错误。
关于赋值时超出所定义的长度的问题,这在2.6版本之前是被允许的,即上面 a=['hello,1,1] 这样在2.6版本之前是可行的,此时 [string, number,number]会被当作 [string,number]的子类型处理,如果想在2.6之后的版本也达到这样的效果,可以定义接口:
interface StrNumTuple extends Array<string | number> {
0: string;
1: number;
length: 2; // using the numeric literal type '2'
}
参考:https://www.tslang.cn/docs/release-notes/typescript-2.7.html
我们也可以对元组上的单个元素赋值:
let a: [string, number] a = ['hello', 1] a[1] = 3
因为位置 1 上的类型是数字,所以可以重赋值为3
当我们访问元组中元素时,会对我们在元素上做的操作进行检查:
let a: [string, number]
a = ['hello', 1]
a[0].split('')
a[1].split('') //Error Property 'split' does not exist on type 'number'.
1位置上是数字类型,所以不可以使用split方法。
枚举
enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。例如我们要定义一组角色,每个角色用一个数字代表,就可以用枚举类型来定义:
enum Roles {
ADMIN,
EDITOR,
USER
}
let role: Roles = Roles.USER
console.log(role) //
枚举里的每个值都有编号,默认从0开始,依次排列,所以上面例子里打印了2。你也可以修改编号,比如你希望编号从3开始,就可以定义为:
enum Roles {
ADMIN = 3,
EDITOR,
USER
}
let role: Roles = Roles.USER
console.log(role) //
当然你也可以为每个值都赋予不同的,不按顺序排列的值:
enum Roles {
ADMIN = 3,
EDITOR = 7,
USER = 1
}
let role: Roles = Roles.USER
console.log(role) //
我们除了可以通过名字得到值,也可以通过值得到名字:
enum Roles {
ADMIN = 3,
EDITOR = 7,
USER = 1
}
// 注意这里指定为string类型,名字是string类型
let role: string = Roles[3]
console.log(role) // ADMIN
Any
顾名思义,使用这个类型定义后,变量可以是任意值,这跟直接使用原生javascript开发是一样的。当我们不清楚某一变量会是什么类型时,可以使用any类型来通过编译
let a: any = 'hello' a = 1
a = false
a = [1, 2]
如上代码,使用any定义类型后,可以任意类型赋值。
有时候用在数组定义上可能是很有用的
let arr: any[] = [1, 'hello', false] arr[0] = 'hi'
可以看到使用any类型时会让编码变得很灵活,但是这就失去了使用typescript的意义,毕竟我们就是要摆脱这种灵活才选择用typescript的。所以尽量能不用any就不用any吧。
Void
某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void:
function fn(): void {
console.log('hello world')
}
声明一个void类型的变量没有什么大用,因为你只能为它赋予 undefined 和 null(这里是中文官网文档说的)
let a: void = undefined let b: void = null // Type 'null' is not assignable to type 'void'.
确实可以赋值为 undefined,但是赋值为 null 时报错了,我以为是文档写错了,但去看了英文文档后发现是这样的:

要想赋值为 null 时不报错,在tsconfig.json文件里找到 strictNullChecks 选项,去掉注释,值改为false,保存后重编译就没问题了。
Never
never表示的是哪些用不存在的值的类型。它可以是那些总会抛出异常或者根本不会有返回值的函数表达式的返回值类型,也可以是变量的类型,此时变量被永不为真的类型保护所约束。
function error():never{
throw new Error('异常')
}
上面函数总是抛出异常,所以它的返回值类型是never,表示永远不会有返回值
function func():never{
while(true){}
}
这段代码里的函数也是永远没有返回值,返回值类型也是never。它与void类型不一样,函数若是不想返回值需要指定void类型,未指定的都必须有返回值。
typescript中新增的基本数据类型的更多相关文章
- 关于typescript之定义变量和数据类型那点事
变量和数据类型 JavaScript虽说深受万千程序员喜爱,却有着对于企业大规模开发很难管理的缺陷.这时候,TypeScript的优势便体现出来.接下来,我们会先接触在TypeScript中定义变量相 ...
- typeScript中的数据类型
/* typeScript中的数据类型 typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型 布尔类型(boolean) 数 ...
- javascript中的真假值、数据类型判断以及+的特殊用法
一.javascript中的假值 jQuery中拥有一组数量奇大的假值,包括 0,NaN(非数),''(空字符串),false,null,undefined 这些值在if判断中全部等于假,但这些值彼此 ...
- TypeScript 中的方法重载
方法重载(overload)在传统的静态类型语言中是很常见的.JavaScript 作为动态语言, 是没有重载这一说的.一是它的参数没有类型的区分,二是对参数个数也没有检查.虽然语言层面无法自动进行重 ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- javascript中五种基本数据类型
前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...
- TypeScript入门二:基本数据类型
浅析基本数据类型 TypeScript类型解析 一.浅析基本数据类型 首先有一个问题TypeScript是一门编译型语言?还是解释性语言?显然已经不能被这两个分类来区分,TypeScript的并不是为 ...
- JavaScript 、TypeScript 中的 Boolean
boolean 是 JavaScript 中一种有趣的原始数据类型.在TypeScript中,非严格模式下("strictNullChecks": false),它总共允许4个值 ...
- typescript 中的 infer 关键字的理解
infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...
随机推荐
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- Jmeter(十二)常用插件
一.下载及安装 下载地址:https://jmeter-plugins.org/install/Install/ 下载后文件为一个jar包,将其放入jmeter安装目录下的lib/ext目录,然后重启 ...
- MessageListenerAdapter--消息监听适配器
我们把之前的消息监听代码注释,可以不用直接加消息监听,而是采用MessageListenerAdapter的方式,我们来学习下如何使用默认的handleMessage,自定义方法名,自定义转换器. 适 ...
- Oracle-sql*plus
连接命令 (1)conn[ect] 用法: conn 用户名/密码@网络服务名 [as sysdba/sysoper] 当用特权用户身份连接时,必须带上 as sysdba 或是 as sysoper ...
- 基于XML的AOP配置(2)-环绕通知
配置方式: <aop:config> <aop:pointcut expression="execution(* com.itheima.service.impl.*.*( ...
- 忘记Linux 3.X/4.x/5.x 宝塔面板密码的解决方案
进入ssh 输入以下命令重置密码(把命令最后面的 “testpasswd” 替换成你要改的新密码)注:若是debian/ubuntu用户,请使用有root权限的账户去执行这条命令 cd /www ...
- ssh不输入密码
要通过跳转机器远程其他的机器 不方便使用秘钥 每次都要输入密码也很烦 使用sshpass可以复制一行命令就直接登录了 我的跳板机是Centos7安装sshpass很简单 直接如下搞定 yum inst ...
- 【Azure】用“Azure Storage Exlporer”进行磁盘拷贝
zure Storage Explorer工具的下载 Azure 存储客户端工具 https://docs.azure.cn/zh-cn/storage/storage-explorers Azure ...
- NDK的环境配置
http://www.androiddevtools.cn/ 下载NDK, 最新版本. 解压压缩包,如解压后文件夹名为如android-ndk-r13,放在指定的位置 配置环境变量: 系统环境path ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...