3

2 分钟知晓 typeScript 所有数据类型

 2 years ago
source link: https://blog.51cto.com/u_13953650/5018989
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Hi,我是前端人,今日与君共勉!本篇文章介绍 typeScript 中的数据类型有哪些?每种数据的详细介绍以及其具体的用法!


javaScript 中的数据类型有:

基础类型:number、string、boolean、null、undefined、bigint、Symbol

引用类型:object

typeScript 支持与 javaScript 几乎相同的数据类型,此外还提供了实用的 enum、any、void、Tuple 等类型方便我们使用。

2 分钟知晓 typeScript 所有数据类型_TS

本篇文章就详细介绍下typeScript 中的具体数据类型有哪些?它们都是怎么用的?

typeScript 中的数据类型总共有 16 种,它们分别为:

1、布尔值

最简单的数据类型,只有 true 和 false 两个值,JS 与 typeScript 都叫做 boolean。

使用语法:

let isDone: boolean = false

JS 与 typeScript 的写法上相差了一个类型修饰,写的时候稍微注意下,可以有多种写法:

let isDone : boolean = false
let isDone: boolean = false
let isDone:boolean = false

总共四种写法都是正确的,上边写的第一种是最常见的。这些写法适用于下面的任意一种数据类型。

注意点:在 typeScript 中指定类型之后,就不能赋值别的类型,否则就会报错!

2 分钟知晓 typeScript 所有数据类型_数据类型_02

与 JS 一样,typeScript 里的所有数字都是浮点数,支持 二、八、十、十六进制字面量。使用 number 表示数字类型。

使用如下:

let num1: number = 6;
let num2: number = 0xf00d;
let num3: number = 0b1010;
let num4: number = 0o744;

注意:typeScript 中的变量一开始是什么类型,后期赋值的时候只能是那个类型的数值,不允许其他类型的数据赋值,不然就会报错!

3、字符串

与 JS 的字符串一样,使用 string 表示类型。也可以使用模板字符串,定义多行文本或者将字符串与数字进行拼接。

let fullName: string = "前端程序员倩倩";
let age: number = 18;
console.log(`我是永远 ${age} 岁的 ${fullName}`);

注意:typeScript 中的变量一开始是什么类型,后期赋值的时候只能是那个类型的数值,不允许其他类型的数据赋值,不然就会报错!

4、undefined

undefined 是未初始化的值。

5、null

null 是不存在的值。

null 和 undefined

默认情况下,null 和 undefined 是所有类型的子类型,也就是可以把 null 和 undefined 赋值给其他任意类型的变量。

let fullName: string = undefined
let age: number = null;

它们本身类型用处不是很大。如果配置中开启 strictNullChecks 标记,null、undefined 只能赋值给它们各自类型,能够避免很多常见的问题。

与 JS 数组一样,可以操作数组元素,数组的定义方式有两种:

第一种可以在元素类型后面加 [],表示由此类型元素组成的一个数组:

let arr: number[] = [1,2,3]

第二种方式使用数组泛型, Array<type>:

let arr: Array<number> = [1,2,3]

注意:数组定义后,里面的元素数据类型必须为定义的数据类型,否则就会报错,编译不成功!如图所示:

2 分钟知晓 typeScript 所有数据类型_typescript_03

有的时候使用到的数组中元素,数据类型可能不止一种,此时在 typeScript 中就使用元组。

元组类型表示允许一个已知元素数量和类型的数组,各个元素的类型不必相同。

let arr:[number,number,number,string] = [1,2,3,'a']
console.log(arr);

当访问一个越界元素,会使用联合类型替代:

arr[5] = "Hi" //字符串可以是 number | string 任意类型

注意:使用时,数据类型位置和数据个数应该和定义的时候完全对应。

enum 关键字定义枚举,后边跟着的是枚举的名字。枚举类型是对 JS 数据类型的一种补充,使用枚举类型可以为一组数据赋予友好的名字。

enum Color {
red,
green,
blue
}
console.log(Color.red); // 0
console.log(Color.green); //1
console.log(Color.blue); //2

枚举内的每个数据值都可以叫做元素,每个元素都有自己的编号,编号默认从 0 开始,依次递增 1。

也可以手动指定成员的数值。

enum Color {
red,
green=3,
blue
}
console.log(Color.red); // 0
console.log(Color.green); //3
console.log(Color.blue); //4

枚举类型提供的一个便利是可以由枚举的值得到它的名字,如:

enum Color {
red,
green,
blue
}
let colorName: string = Color[2]
console.log(colorName); // blue

9、any

为不清楚类型的变量指定一个类型,使用 any 类型来标记这些变量。比如来自用户输入内容或第三方代码库,我们不确定数据类型,又不希望类型检查器对这些值进行检查,此时就使用 any 类型来标记这些变量。

let notSure: any = "还不知道啥类型"
notSure = 520
notSure = true

惊喜地发现上边的代码竟然没有报错,any 对现代代码进行改写的时候是十分有用的,允许你在编译时可选择的包含或移除类型检查,

优点:数组存储的类型和个数不确定的时候,可以 any 类型。

let arr4: any[] = [1,2,3,'4']

10、void

void 是空,与 any 类型恰好相反,表示没有任何类型,当一个函数没有返回值时,你通常会见到其返回值类型是 void 。

function showName( str: string ): void{
console.log(str);
}
showName("热爱学习")

声明一个 void 类型的变量没有什么大用,因为它只能赋予 undefined 和 null 。

let unsable: void = undefined

11、object

object 表示非原始类型,除 number、string、boolean 之外的类型。带有 任何属性的 JS 值,都可以看做是对象。

function getObj(name:string, age: number):object{
return {
name:name,
age:age
}
}
console.log(getObj('帅气的前端程序员',18));

函数的形参也可以是对象,对象中的元素也可设置为可选参数,这样即使不传参数也不会报错。

function getFullName(obj:{first: string, last?: string}) {
console.log(obj.first + obj.last);
}
getFullName({first:'美丽迷人'}) //美丽迷人undefined
getFullName({first:'美丽迷人',last:'倩倩'}) //美丽迷人倩倩

表示参数可选。

12、联合类型

联合类型是由两个或多个其他类型组成的类型,表示可能是这些类型中的任何一种的值,将这些类型中的每一种都称之为联合类型的成员。

联合类型又称 union 类型,表示取值可以是多种类型中的任意一种。

我们数据请求中经常使用的 id ,可以是字符类型,也可以是数值。分别进行处理如:

function printId( id:string | number ){
if( typeof id === 'string' ){
console.log(id.toUpperCase());
}else{
console.log(id);
}
}
printId('ab')
printId('12')

13、never

never 类型表示那些永远不可能存在的值的类型。是任何类型的子类型,也可以赋值给任何类型。

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}

14、类型断言

类型断言,通过类型断言这种方式告诉编译器,相信我,我知道自己在干什么,好比其他语言内的类型转化,但不进行特殊的数据检查和解构。

通过类型断言来指定更具体的类型,使用语法有两种:

第一种:通过使用尖括号和类型,如:

var myCanvas = <HTMLCanvasElement>document.getElementById("mycanvas")

第二种:使用 as 语法。

var myCanvas = document.getElementById("mycanvas") as HTMLCanvasElement

类型断言与类型注释是一样的,编译的时候被删除,由编译器来删除,不会影响代码的运行时行为。

15、bigint

bigint 数据类型用来表示已经超出 number 类型最大值的整数值,JS 中 number 可以表示最大整数位 2^53-1 ,如果超出这个界限,就可以使用 bigint 表示非常大的整数。

const oneHundred:bigint = BigInt(98709878909090909888)

16、Symbol

Symbol 表示是全局唯一引用的数据类型。使用 Symbol 创建两个值相同的变量,它们也是不等的,因为 Symbol 创建的都是全局唯一的。

const str = Symbol('name')
const nm = Symbol('name')
console.log( str==nm )//false

bigint 和 symbol 是不太常用的两个类型,是在 ES6 中新增的。typeScript 版本过低时,不支持这两种类型。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK