【前端】你好，我叫TypeScript 01──数据类型

前言

TypeScript是前端强类型语言，所以相比于JavaScript而言有着更强的好叫语言规范约束能力，能够让我们的──代码可读性更高。同时可以在编译过程中进行错误校验，数据提升了我们代码的类型开发效率。

1.什么是前端Typescript?

TypeScript并不是一门新的编程语言，它是好叫Javscript的超集，即在JavaScript语言的──基础上添加了语言约束：可选的静态类型和基于类的面向对象编程。其实就是数据添加了静态类型检查，有了约束可以让我们在开发过程中减少错误代码的类型书写。

TypeScript和JavaScript的前端关系如下：

TypeScript和JavaScript的区别：

2.两分钟上手TS开发

“工欲行其事,必先利其器”，说的好叫就是在做事情之前，要做好所有的──准备。同样的数据，亿华云我们要学习TS开发，类型必须先安装语言环境和编辑器工具。

安装TypeScript

有两种方式可以获取TypeSscript工具:

通过NPM进行安装 安装VScode的TypeScript插件

(1)NPM安装:

npm install -g typescript 

(2)验证TS安装

tsc -v # Version 4.2.4 

(3)构建TS文件 在编辑器中构建一个TS文件test.ts：

function addNum(num1:num,num2:num){    return num1 + num2; } console.log(addNum(1,2)); //3 

(4)编译代码：

tsc test.ts 

编译得到JS代码：

"use strict"; function addNum(num1, num2) {      return num1 + num2; } console.log(addNum(1, 2)); 

3.基础类型

3.1 Boolean类型

只有两个值：true和false。

let isTrue: boolean = true; 

3.2 Number类型

所有的数字都是浮点型,支持二进制、八进制、十进制以及十六进制字面量。

// 数字类型，所有数字都是浮点型 let decLiteral: number = 10; let hexLiteral: number = 0xf00d; 

3.3 String类型

TS可以使用双引号( ")或单引号()表示字符串。

// 字符串，表示文本数据类型 let username: string = "yichuan"; let like: string = `${ yichuan} + FE`; 

3.4 Array类型

数组操作有两种方式可以声明：

可以在元素类型后面接上 []，表示由此类型元素组成的一个数组。 使用数组泛型，Array<元素类型>。 let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3]; 

3.5 Tuple类型

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

// 元组  let tuple: [string,number]; tuple = ["wenbo",1]; 

TS元组和数组其实大致一样，唯一的区别就是数组中的元素类型必须相同，而元组可以存储不同类型的元素。甚至可以说元组是any类型的数组。

3.6 Enum类型

enum类型是网站模板对JavaScript标准数据类型的一个补充。枚举类型提供的一个便利是你可以由枚举的值得到它的名字。

// 枚举  // 默认情况下，枚举的元素编号是从0开始，也可以进行手动编号。 enum Color { Red, Green, Blue}; let c:Color = Color.Red; 

3.7 Any类型

any表示任意类型。有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。

// Any  let notSure:any = 100.002; notSure.toFixed(); let list3:any[] = ["zhaoshun","male",12]; 

其实，any类型是类型系统的顶级类型，因为任何类型都归结于any类型，是不是很自由。自由过了火，一个不恰当的比喻，JS是any类型的TS，允许对any类型的值进行各种操作，而无需编译校验。云南idc服务商

3.8 Void类型

void类型它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void。

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

function showName():void {    console.log("your name is wenbo"); } // 声明一个void类型的变量 let unusable: void = undefined; 

3.9 Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。默认情况下null和undefined是所有类型的子类型，可以把 null和undefined赋值给number类型的变量。

let u: undefined = undefined; let n: null = null; 

但是，当指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。

3.10 Object

object表示非原始数据类型(除number，string，boolean，symbol，null或undefined之外的类型)。

declare function create(o: object | null): void; create({  prop: 0 }); // OK create(null); // OK create(42); // Error create("string"); // Error create(false); // Error create(undefined); // Error 

3.11 Never

never类型表示的是那些永不存在的值的类型。

never类型是任何类型的子类型，也可以赋值给任何类型;然而，没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。即使 any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点 function error(message: string): never {      throw new Error(message); } // 推断的返回值类型为never function fail() {      return error("Something failed"); } // 返回never的函数必须存在无法达到的终点 function infiniteLoop(): never {      while (true) {      } } 

3.12 Unknown 类型

任何类型都可以被归为unknow类型，因此unknow也是ts类型中的顶级类型。

let value: unknown; value = true;             // OK value = 18;               // OK value = "yichuan";    // OK value = [];               // OK value = { };               // OK value = Math.random;      // OK value = null;             // OK value = undefined;        // OK value = new TypeError();  // OK value = Symbol("type");   // OK 

我们看到对于value变量而言，所有的赋值都是正确的，就会感觉是不是发现和any好像没啥区别，真的是这样吗。当我们给赋值其他类型时，就会出现意想不到的问题，发现unknow类型只能被赋值给any类型和unknow类型本身，这就是跟any的区别。

let value: unknown; let value1: unknown = value;   // OK let value2: any = value;       // OK let value3: boolean = value;   // Error let value4: number = value;    // Error let value5: string = value;    // Error let value6: object = value;    // Error let value7: any[] = value;     // Error let value8: Function = value;  // Error 

所以得到：只有能够保存任意类型值的容器才能保存 unknown类型的值。

值得注意的是，TS不允许我们对unknow类型的值执行任何操作，必须得先执行类型校验后来确定使用值的范围。那么如何缩小unknow值的范围呢?

很简单，有请我们的老朋友typeof、instanceof运算符和自定义类型保护函数，通过使用缩小类型范围的技术都有助于 TypeScript 的基于控制流的类型分析。

例如，通过if语句分支

function stringifyForLogging(value: unknown): string {    if (typeof value === "function") {      const functionName = value.name || "(anonymous)";     return `[function ${ functionName}]`;   }   if (value instanceof Date) {      return value.toISOString();   }   return String(value); } 

通过使用自定义类型保护函数缩小 unknown 类型范围。

function isNumberArray(value: unknown): value is number[] {    return (     Array.isArray(value) &&     value.every(element => typeof element === "number")   ); } const unknownValue: unknown = [15, 23, 8, 4, 42, 16]; if (isNumberArray(unknownValue)) {    const max = Math.max(...unknownValue);   console.log(max); } 

尽管 unknownValue 已经被归为 unknown 类型，请注意它如何依然在 if分支下获取到 number[] 类型。

参考文章

阿宝哥的《重学TS》

《ts中文文档》

本文转载自微信公众号「前端万有引力」，可以通过以下二维码关注。转载本文请联系前端万有引力公众号。