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 条件类型的字句中 ...
随机推荐
- head命令:显示文件开头内容
head 命令可以显示指定文件前若干行的文件内容,其基本格式如下:head [选项] 文件名 选项: 选项 含义 -n K 这里的 K 表示行数,该选项用来显示文件前 K 行的内容:如果使用 &quo ...
- AtCoder AGC038F Two Permutations (网络流、最小割)
题目链接 https://atcoder.jp/contests/agc038/tasks/agc038_f 题解 好题. 首先观察到一个性质,对于排列\(P\), 其所形成的每个轮换中的点\(A_i ...
- Linux top常用操作
是否显示task和cpu行:t 是否显示内存信息行:m 切换信息区域单位:E 切换任务区域单位:e 显示各个CPU单独的数据: 按某列排序: M(内存) P(CPU) N(PID) T(TIME+) ...
- lcx用法
lcx使用方 本机IP:192.168.125.11 目标机IP:192.168.125.101 本机运行: lcx -listen 3333 2222 目标机运行:lcx -slave ...
- 「CTSC 2008」祭祀
题目链接 戳我 \(Solution\) 第一问 这道题要知道一个叫做\(Dilworth\)的定理 最长反链\(=\)最小链覆盖 证明(\(from\ r\_64\)): 所以我们只要求一个最小链覆 ...
- JavaWeb页面静态化之使用freemarker模板生成一个html静态页面
题外话: 页面静态化(展示数据从JSP页面变成HTML页面)实现方式-->模板技术 从本质上来讲,模板技术是一个占位符动态替换技术.一个完整的模板技术需要四个元素:①模板语言(使 ...
- JSON 转含有泛型属性的对象
在将 json 字符串转为对象时,如果对象含有泛型,在进行转换时需要指明泛型类型. 1. 对象只含有一个泛型属性时 1.1 代码 /** * @Describe: * @Author: chenfa ...
- SRS之RTMP的TCP线程(即监听线程)
本文分析的是 SRS 针对 rtmp 的端口建立的 tcp 线程.具体建立过程: SRS之监听端口的管理:RTMP RTMP 的 TCP 线程中各个类之间 handler 的关系图 1. RTMP之T ...
- Mac Vmware NAT模式
1.NAT模式原理 2.MAC上关于Vmware的配置 1)/Library/Preferences/VMware Fusion/networking MacBookPro:~ zhangxm$ vi ...
- ANTLR4将JSON翻译成XML
实现功能:构建一个JSON到XML的翻译器. antlr4文件: grammar JSON; json : object | array ; object : '{' pair (',' pair)* ...