🐱个人主页：不叫猫先生

🙋‍♂️作者简介：前端领域新星创作者    
    
    
    、华为云享专家 


     


     


     


、阿里云专家博主    
    
    
    ，专注于前端各领域技术 


     


     


     


，共同学习共同进步

 




 




 




，一起加油呀！

💫系列专栏：vue3从入门到精通

 




 




 




、TypeScript从入门到实践

📝个人签名：不破不立

专栏介绍

TypeScript从入门到实践专栏是博主在学习和工作过程中的总结   

   

   

   ，内容会不断进行精进  

     

     

     

，实用性非常强


  




  




  




，欢迎订阅哦  


  


  


  ，学会TS不迷路
    
    
    
。

TS系列 标题 基础篇 TS入门（一） 基础篇 TS类型声明（二） 基础篇 TS接口类型（三） 基础篇 TS交叉类型&联合类型（四） 基础篇 TS类型断言（五） 基础篇 TS类型守卫（六） 进阶篇 TS函数重载（七） 进阶篇 TS泛型（八） 进阶篇 TS装饰器（九）

前言

本文主要讲解TypeScript的基本数据结构   
     
     
     
，主要包括JS基本数据类型以及TS特有的数据类型     


     


     


    。

JS基本数据类型： string   

   

   

   、number  

     

     

     

、null


  




  




  




、undefined  


  


  


  、boolean   
     
     
     
、array TS特有的数据类型：tuple（元祖）



   




   




   




、enum（枚举） 



 



 



 、any                   、unknow




    




    




    




、never

注意： node 不能直接执行ts文件



   




   




   




，需要先将ts编译成js 



 



 



 ，然后再执行js

一














、 string                    、number



     



     



     



、null















、undefined    
    
    
    、boolean类型声明

JS普通写法如下： let myName = "zhangsan"; let count = 1; let a = null; let b = undefined; let visiable = false

; TS写法如下：

不能更改它们的变量类型                   ，否则会直接报错 let myName: String = "zhangsan"; let count: Number = 1; let a: null = null; let b: undefined = undefined; let visiable: boolean = false; 编译成JS后如下： var myName = "zhangsan"; var count = 1; var a = null; var b = undefined; var visiable = false

; 编译后为什么let会变成var呢？

es6是规范 但是还有很多浏览器不支持 所以编译完之后都是转义成es5




    




    




    




， es5没有let 




 




 




 


。并且需要在tsconfig.json中配置如下： { "compilerOptions": { "target": "ES5", } }

在这里插入代码片- 错误示范：

let myName: String = "zhangsan"; myName = true;//Error:Type true is not assignable to type String.

二 


     


     


     


、 array

 




 




 




、tuple（元组）

JS数组和TS数组之间的区别

JS中的数组可以是字符串   

   

   

   、数字等其他类型的数据














，而TS中的数组是纯数字类型(number)的集合                    ，如果在TS中定义包含多个类型的数组



     



     



     



，那就是元组

   

   

   

。

JS写法如下：

let arr = [语文,数学]

TS声明数组有多种方式















，具体如下：

（1）数组的数据类型一致

Array<>：声明一个数组    
    
    
    ，数组类型为<>中定义的类型 


     


     


     


，比如：Array<string> //声明一个数组

 




 




 




，并且数组中的数据类型都是字符串 let arr:Array<string> = [语文,数学] let arrA:string[] = [语文,数学] //注意：数组这样写会报错 let arr:Array= [语文,数学] //error string[]：声明一个数组   

   

   

   ，数组类型为[]前定义的类型  

     

     

     

，比如number[] let arr:string[] = [a]

（2）数组的数据类型不一致

联合数据声明：比如(string|number)[]


  




  




  




，声明一个数组  


  


  


  ，数组类型为字符串  

     

     

     

、数字     

     

     

   。数组中数据的类型可以不随定义的类型位置的限定  




  




  




  

。 let arr:(string|number)[] = [a,1] let arrB:(string|number)[] = [a,1   
     
     
     
，1



   




   




   




，b] let arrC:(string|number)[] = [1 



 



 



 ，1                   ，b,c] let arrC:(string|number)[] = [1




    




    




    




，1] //或者这样声明 let arrD: Array<string | number> = [1, 12, a]

（3）数组的数据类型任意

let arr:any[] = [a,1,true,null] //或者这样声明 let arrE:Array<any> = [a,1,true,null]

（4）限制类型和长度的元祖数组

tuple（元祖）：是固定数量的不同类型的元素的组合














，比如[number, string]


  


  


  


。数组中数据的位置


  




  




  




、类型以及个数必须要和声明的类型  


  


  


  、声明类型的位置   
     
     
     
、声明类型的个数保持一致                    ，否则就会报错     
     
     
  。

let tupleArr: [number, string] = [1, 数学] let tupleArrA: [number, string] = [1, 数学,1]//error let tupleArrA: [number, string] = [数学,1]//error

三



   




   




   




、enum（枚举）

枚举主要分为数字类型枚举 



 



 



 、字符串类型枚举                   、异构   




   




   




   
。

语法

：enum + 变量名



     



     



     



，意思是定义了一个叫做“变量名
    
    
    
”的枚举类型

优点：定义一些常量















，可以清晰地表达意图或创建一组有区别的用例



 



 



 



。

（1）数字型枚举

含义：枚举成员都是number类型    
    
    
    ，如果没有对枚举对象中的枚举成员赋值 


     


     


     


，那么会默认从枚举对象中的第一个枚举成员的值是0

 




 




 




，并依次递增                。 具有以下特点： 反向映射 枚举成员的值可以不用初始化 enum Value { A, B, C, D, E, F } let value: Value = Value[A] let valueName = Value[0] console.log(value)//0 console.log(valueName)//A

以上可知   

   

   

   ，我们既可以取到枚举成员的属性名  

     

     

     

，也能取到枚举成员的属性值


  




  




  




，它们之间是相互映射的    




    




    




    。

修改枚举成员的默认值 enum Value { A, B, C=8, D, E, F } let value: Value = Value[E] let valueNameA = Value[8] let valueNameB = Value[9] console.log(value)//10 console.log(valueNameA)//C console.log(valueNameB)//D

我们可以看到我们改变枚举成员的默认值的时候  


  


  


  ，后面枚举成员的默认值也随着前面的改变而改变



















。我们来看一下上面编译成JS后的样子   
     
     
     
，具体如下所示：

var Valuedemo; (function (Valuedemo) { Valuedemo[Valuedemo["A"] = 0] = "A"; Valuedemo[Valuedemo["B"] = 1] = "B"; Valuedemo[Valuedemo["C"] = 8] = "C"; Valuedemo[Valuedemo["D"] = 9] = "D"; Valuedemo[Valuedemo["E"] = 10] = "E"; Valuedemo[Valuedemo["F"] = 11] = "F"; })(Valuedemo || (Valuedemo = {})); var valueA = Valuedemo[A]; var valueNameA = Valuedemo[8]; console.log(valueA); console.log(valueNameA);

（2）字符串类型枚举

含义：枚举成员类型都是字符串

需要注意以下几个方面： 字符串枚举没有反向映射



   




   




   




，如果进行反向映射的话 



 



 



 ，取得的值时undefined； 字符串枚举没有递增                   ，需要对每一个字符串枚举类型成员进行赋值




    




    




    




，即必须具有初始化表达式 enum StringValue { A = A, B = B, C = C, D = D, E = E, F = f } let stringValueVal = StringValue[A] console.log(stringValueVal)//A

以下是错误示范














，不能对字符串类型枚举进行反向映射

let stringValueNameA = StringValue[f] let stringValueNameB = StringValue[0] console.log(stringValueNameA)//undefined console.log(stringValueNameB)//undefined

（3）异构

含义：枚举类型包括字符串类型和数字类型

注意：含有字符串值成员的枚举中不允许使用计算值                    ，具体意思就是当枚举对象中存在有value是字符串的枚举成员的时候



     



     



     



，不能将其他枚举成员的value设置为计算值               。 enum Enum { A, B, C = C, D = d, E = 9, F } console.log(Enum[10])//F console.log(Enum[C])//C console.log(Enum[A])//o console.log(Enum[d])//undefined console.log(Enum[D])//d console.log(Enum[9])//E console.log(Enum[0])//A

上面的TS编译成JS后的样子如下所示：

var Enum; (function (Enum) { Enum[Enum["A"] = 0] = "A"; Enum[Enum["B"] = 1] = "B"; Enum["C"] = "C"; Enum["D"] = "d"; Enum[Enum["E"] = 9] = "E"; Enum[Enum["F"] = 10] = "F"; })(Enum || (Enum = {}));

我们用普通方法来实现异构枚举















，demo如下所示：

enum Enum { A, B, C = C, D = D, E = 9, F }

怎么实现以上的枚举呢？具体如下：

let Enum; (function (Enum) { Enum[0] = A; Enum[1] = B; Enum[9] = E; Enum[10] = F; Enum[A] = 0; Enum[B] = 1; Enum[C] = C; Enum[D] = D; Enum[E] = 9; Enum[F] = 10; })(Enum || (Enum = {}))

以上我们看出依然是数字类型的枚举成员可以进行反向映射    
    
    
    ，字符串类型的枚举成员不能反向映射     



     



     



     。

注意以下是错误用法 


     


     


     


，因为含有字符串值成员的枚举中不允许使用计算值

enum Enum { A, B = 3*6, C = C, D = d, E = 9, F }

（4）枚举成员的值的两种形式-计算值和常量

枚举对象中成员的value有两种形式

 




 




 




，计算值或者常量   

   

   

   ，怎么区分是计算值和常量呢？我们可以通过枚举成员表达式来判断  

     

     

     

，只要是枚举成员是表达式则为常量


















。枚举成员表达式的判断条件如下：

枚举表达式字面量（主要是字符串字面量或数字字面量） 对之前定义的常量枚举成员的引用 带括号的常量枚举表达式 一元运算符 ++




    




    




    




、 – 常量枚举表达式是二元运算符 + 














、-                    、*



     



     



     



、/















、%    
    
    
    、<< 


     


     


     


、>>

 




 




 




、&   

   

   

   、｜  

     

     

     

、^的操作对象
    
    
    
。注意：如果求值后值为NaN或Infinity


  




  




  




，那么会在编译阶段报错     


     


     


    。

常量demo如下：

enum constantEnum{ num, //枚举表达式字面量 age = num, //引用常量枚举成员 count = 2 << 1, //枚举表达式字面量参与二元运算符 numB = 30 | 2, numA = 10 + 29 }

计算值demo如下所示：

let name = zhsngasn enum calculationEnum{ nameLen = name.length, num = Math.random() * 10 }

四


  




  




  




、any（任意类型）

声明变量类型为any时

编译时会绕过所有类型的检测  


  


  


  ，直接通过编译阶段的检查 可以任意访问属性的方法和属性 any类型可以赋值给任意类型 如果变量初始没有定义类型   
     
     
     
，默认为any；经过赋值后



   




   




   




，TS会根据赋值类型来标识变量的类型 let anyValue: any = 1; //修改变量类型 anyValue = true; //赋值给任意类型 



 



 



 ，比如boolean let booleanValue: boolean = anyValue; console.log(booleanValue)//true

any在使用过程中就像一个潘多拉魔盒                   ，即使使用了断言




    




    




    




，也丧失了在静态类型检查阶段发现错误的可能性 




 




 




 


。

五  


  


  


  、unknow（未知类型）

声明变量类型为unknow时

安全性更高 它用于描述类型不确定的变量,这与any类型相似














，但更安全                    ，因为对未知值做任何事情都是不合法的 unknown类型只能赋值给any和unknown类型



     



     



     



，any类型可以赋值给任意类型 unknown















，never 都不允许执行变量的方法以及访问内部属性 在unknown没有被断言或细化到一个确切类型之前    
    
    
    ，unknown不可以赋值给其它类型 


     


     


     


，除了它自己和any外

 




 




 




，当然也都是不允许在其上进行任何操作的

   

   

   

。 let unknownValue: unknown; //对变量进行任意赋值 unknownValue = true; unknownValue = sss; unknownValue = 1; //赋值给unknown类型的变量 let testValue1: unknown = unknownValue; //赋值给any类型的变量 let testValue2: any = unknownValue;

错误示范：

//赋值给boolean类型的变量   

   

   

   ，报错  

     

     

     

，因为unknown类型只能赋值给unknown   
     
     
     
、any let testValue3: boolean = unknownValue;//报错

虽然可以对unknown类型的变量进行任意赋值


  




  




  




，但是却不能执行任何操作  


  


  


  ，如何解决这个问题呢？可以缩小unknown类型     

     

     

   。具体如下所示：

type func = ()=> unknow let test = func(); if(test instanceof func){ //执行逻辑 }

我们可以用断言缩小未知范围或者可以用instanceof来缩小变量的类型   
     
     
     
，强制让ts编译器相信我们在做什么操作

六



   




   




   




、void（空类型）

声明对象类型为void时

返回为空值 function func(): void { }

声明一个变量为void 时

只能将它赋值为 undefined 和 null



   




   




   




，因此在定义函数的返回值为void时 



 



 



 ，也可return undefined/null let voidValue1: void = undefined; let voidValue2: void = null;

七 



 



 



 、never（不存在的值类型）

never类型表示永不存在的值的类型  




  




  




  

。具有以下特点：

never类型是所有类型的子类型                   ，即never类型可以赋值给任何类型


  


  


  


。 其他任何类型均不是never类型的子类型




    




    




    




，即其他类型均不可赋值给never类型














，除了never本身     
     
     
  。即使any类型也不可以赋值给never类型   




   




   




   
。 返回类型为never的函数中                    ，其终点必须是不可执行的



     



     



     



，例如函数过程中抛出了错误或者存在死循环



 



 



 



。 变量也可以声明为never类型















，但其不能被赋值

设置变量类型为never    
    
    
    ，表示永远不能执行完或者永远Error 


     


     


     


，具体示例如下：

函数中出现了死循环

 




 




 




，永远不能执行完   

   

   

   ，因此其函数类型为：() => never function infiniteLoop(): never { while (true) { } return over } 函数中出现报错  

     

     

     

，不会执行到return over


  




  




  




，因此其函数类型为：() => never function errFunc(): never { throw new Error() return over }