typescript——基础数据类型详解

NK
384 阅读5分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

TypeScript支持与JavaScript数据类型几乎相同，此外还提供了实用的枚举类型方便我们使用。

js的数据类型

image.png

ts的数据类型

拓展学习可以看：TS系列篇｜高级数据类型

绘图3.png

布尔类型

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做 boolean 。

var flag:boolean = true
console.log(flag);
flag = false
console.log(flag);
console.log("布尔类型-------------");

image.png

数字类型

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let num:number = 1.2
console.log(num);
num = 5
console.log(num);

image.png

问题1：let numRes:number = 52181999n;这么写可以吗？（大整形在数后面加n即可，let n = 521n;此时的521是大整形）

回答：不可以！不能将类型“bigint”分配给类型“number”。

注：

let n = 521n;
console.log(n, typeof (n));

image.png

问题2：let numRes = 52181999n;这么写可以吗？

回答：开始时，报错信息目标低于 ES2020 时，bigInt 文本不可用。修改tsconfig.json文件，将es20xx修改成es2020，此时不会报错。

image.png

代码：

let numRes = 52181999n
console.log(typeof(numRes));

运行结果： image.png

问题3：let numBigint:bigint = 52199n;这么写可以吗？ 回答：回答如上问题2

代码：

let numBigint:bigint = 52199n
console.log(numBigint,typeof(numBigint));

image.png

字符串类型

使用string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（'）表示字符串。也可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以${ expr }这种形式嵌入表达式

var str:string = "字符串"
console.log(str);
console.log("字符串类型-------------");

image.png

枚举类型

enum类型是对JavaScript标准数据类型的一个补充。 默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。

默认从0开始为元素编号

enum sportEnum {running,jump,basketball,tennis}
console.log(sportEnum);
console.log(`从0开始为元素编号${sportEnum.jump}`);

image.png

手动指定所有成员的数值

enum flagEnum {success = 100,error = -100}
var flagRes:flagEnum = flagEnum.success
console.log(flagRes);
console.log(`手动的指定成员的数值:${flagEnum.error}`);

image.png

手动指定特定成员的数值

有个好奇点，如果我指定中间数值会有什么结果。下面我们来看：

enum colorEnum {red,blue = 5,orange}
var colorRes:colorEnum=colorEnum.orange;
console.log(colorEnum);
console.log(colorRes);

image.png 在上一章里面写了布尔类型、数字类型、字符串类型、枚举类型。对不同的数据类型进行了自己猜想的验证。这一章我们继续讲讲。

Any类型

有时候，我们会想要为那些在编程时不知道类型的变量指定一个类型就可以使用 any类型来标记这些变量。

let anyRes:any = 123
console.log(anyRes);
anyRes = "str"
console.log(anyRes);

image.png

我们来看看他的一个使用场景：

HTML：

 <div id="oBox">
    box
</div>

JavaScript：

// 源代码不用any
let oBox = document.getElementById('oBox');
oBox.style.color = 'red';

报错信息：

image.png

这里获取的dom节点如果不用any类型进行标注，那么会报错，因此我们可以用any类型标注获取dom节点的数据类型。

let oBox:any = document.getElementById('oBox');
oBox.style.color = 'red';

数组类型

TypeScript像JavaScript一样可以操作数组元素。

元素类型后加[]

第一种方式可以在元素类型后面接上 []，表示由此类型元素组成的一个数组;

元素数据类型可以是string、number等常见类型也可以是any这种类型的。这里我觉得可以把这种数组情况分为同一元素类型数组与不同一元素类型数组。

同一数据类型数组

// 1.第一种定义数组的方式:在元素类型后面接上 []
let arrFirst:number[] = [1,2,3,4]
console.log(arrFirst);

image.png

非同一数据类型数组

// 2.第二种定义数组的方式
let arrthird:any[] = ["php",true,123]
console.log(arrthird);
console.log("数组类型-------------");

image.png

第二种方式是使用数组泛型，Array<元素类型>：

let arrSecond:Array<string> = ["php","js","golang"]
console.log(arrSecond);

image.png

元组 Tuple类型

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。当访问一个已知索引的元素，会得到正确的类型，当访问一个越界的元素，会使用联合类型替代。个人感觉把这个元组和数组any类型放在一起理解可能会更好理解。

let arrtuple:[string,number,boolean] = ["ts",3.18,true]
console.log(arrtuple);

image.png

Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大：

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。 然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免 很多常见的问题。 也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。

null 和 undefined 是其他（never类型）数据类型的子类型

如果只是：let nullRes;console打印不会报错，在变量后跟上类型会报错。
报错信息：赋值前使用：dataType.ts:138:13 - error TS2454: Variable 'nullRes' is used before being assigned.

let nullRes1:number;
// console.log(nullRes1);

image.png

输出结果：undefined

let nullRes2:undefined;
console.log(nullRes2);

除了number和undefined其他类型报错


let nullRes3:number | undefined;
console.log(nullRes3);//undefined
nullRes3 = 666
console.log(nullRes3);//666

image.png

在赋值前定义null不能直接打印

let nullRes:null
// console.log(nullRes);//报错
nullRes = null
console.log(nullRes);//null

image.png

一个元素可能是number类型，可能是null，也可能是undefined

let thing:number | null | undefined;
console.log(thing);//undefined

Never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。 never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

never类型:是其他类型（包括 null 和 undefined）的子类型，代表从不会出现的值。 这意味着声明never的变量只能被never类型所赋值其他类型的值会报错。

let neverNudefined:undefined;
// neverNudefined = 5;//其他类型报错
// neverNudefined = null;//其他类型报错
neverNudefined = undefined;//只能被never类型所赋值

let neverNull:null;
// neverNull = 5;//其他类型报错
// neverNull = undefined;//其他类型报错
neverNull = null;//只能被never类型所赋值

image.png

avatar
文章
阅读
粉丝