前言TypeScript是一种强类型语言，所以它比JavaScript有更强的语言规范约束，可以让我们的代码更具可读性。同时可以在编译过程中进行错误检查，提高了我们代码的开发效率。1.什么是打字稿？TypeScript并不是一种新的编程语言，它是Javscript的超集，它在JavaScript语言的基础上增加了语言约束：可选的静态类型和基于类的面向对象编程。其实就是增加了静态类型检查。有了约束，我们就可以减少开发过程中错误代码的编写。TypeScript和JavaScript的关系如下：TypeScript和JavaScript的区别：2.两分钟上手TS开发“工欲善其事，必先利其器”，意思是必须做好一切准备在做事之前。同样，我们想要学习TS开发，首先要安装语言环境和编辑器工具。安装TypeScript获取TypeSscript工具有两种方式：通过NPM安装安装VScode的TypeScript插件(1)NPM安装：npminstall-gtypescript(2)验证TS安装tsc-v#Version4.2.4(3)Build编辑中的ts文件在控制台建立一个ts文件test.ts：functionaddNum(num1:num,num2:num){returnnum1+num2;}console.log(addNum(1,2));//3(4)编译代码：tsctest.ts编译得到JS代码："usestrict";functionaddNum(num1,num2){returnnum1+num2;}console.log(addNum(1,2));3.基本类型3.1布尔类型只有两个值：true和false。letisTrue：布尔值=真；3.2数字类型所有数字都是浮点数，支持二进制、八进制、十进制和十六进制字面量。//数字类型，所有数字都是浮点型letdecLiteral:number=10;lethexLiteral:number=0xf00d;3.3字符串类型TS可以用双引号（"）或者单引号（'）来表示字符串。//String,表示文本数据类型letusername:string="yichuan";letlike:string=`${yichuan}+FE`;3.4Array类型的数组操作有两种声明方式：可以在元素类型后面加[]表示that类型元素的数组。使用数组泛型，Array.letlist:number[]=[1,2,3];letlist:Array=[1,2,3];3.5元组类型的元组类型允许表示一个已知元素数量和类型的数组，每个元素的类型不必相同。//Tuplelettuple:[string,number];tuple=["wenbo",1];TS元组和数组其实大致相同，唯一的区别就是数组中的元素类型必须相同，而元组可以存储不同类型的元素，甚至可以说元组是任意类型的数组。3.6枚举类型T枚举类型是对JavaScript标准数据类型的补充。枚举类型提供的一个便利是你可以从枚举的值中获取它的名字。//枚举//默认情况下，枚举的元素的编号开始从0开始，也可以手动编号。enumColor{Red,Green,Blue};letc:Color=Color.Red;3.7任何类型any表示任何类型。有时，我们希望为在编程阶段不清楚类型的变量指定一个类型。//anyletnotSure:any=100.002;notSure.toFixed();letlist3:any[]=["赵顺","男",12];其实any类型是类型系统的顶级类型，因为any类型归于any类型，不是很自由吗？自由太多了，一个不恰当的比喻，JS是任意类型的TS，允许对任意类型的值进行各种操作，无需编译验证。3.8空类型voidtype表示没有类型。当一个函数没有返回值时，你通常会看到它的返回类型是void。声明一个void类型的变量是没有用的，因为你只能给它赋值null和undefined。functionshowName():void{console.log("yournameiswenbo");}//声明一个void类型的变量letunusable:void=undefined;3.9Null和Undefined在TypeScript中，undefined和null有自己的类型，分别称为undefined和nullnull。默认情况下，null和undefined是所有类型的子类型，null和undefined可以赋值给number类型的变量。letu:undefined=undefined;letn:null=null;但是，当指定--strictNullChecks标志时，null和undefined只能分配给void及其各自的值。3.10Objectobject表示非原始数据类型（数字、字符串、布尔值、符号、空值或未定义以外的类型）。declarefunctioncreate(o:object|null):void;create({prop:0});//OKcreate(null);//OKcreate(42);//Errorcreate("string");//Errorcreate(false);//Errorcreate(undefined);//Error3.11Nevernever类型代表的是永不存在的值类型。never类型是任何类型的子类型，并且可以分配给任何类型；但是，没有类型是never类型的子类型或可分配给never类型（除了never本身）。甚至any也不能分配给never。//返回never的函数一定有一个不可达的端点functionerror(message:string):never{thrownewError(message);}//推断的返回值类型是neverfunctionfail(){returnerror("Somethingfailed");}//returnnever的函数一定有一个不可达的终端函数infiniteLoop():never{while(true){}}3.12未知类型任何类型都可以归为未知类型，所以未知也是ts类型中的顶级类型。letvalue:unknown;value=true;//OKvalue=18;//OKvalue="yichuan";//OKvalue=[];//OKvalue={};//OKvalue=Math.random;//OKvalue=null;//OKvalue=undefined;//OKvalue=newTypeError();//OKvalue=Symbol("type");//OK我们看到对于value变量，所有的赋值都是正确的，你会觉得好像discovery和any没有区别，真的是这样吗？当我们分配其他类型时，会出现意想不到的问题。我们发现未知类型只能赋值给any类型和未知类型本身。这是与任何一个的区别。letvalue:unknown;letvalue1:unknown=value;//OKletvalue2:any=value;//OKletvalue3:boolean=value;//Errorletvalue4:number=value;//Errorletvalue5:string=value;//Errorletvalue6:object=value;//Errorletvalue7:any[]=value;//Errorletvalue8:Function=value;//错误所以得到：只有可以存储任意类型值的容器才能存储未知类型的值。值得注意的是，TS不允许我们对未知类型的值进行任何操作。我们必须先进行类型验证，然后确定所使用的值的范围。那么如何缩小未知值的范围呢？很简单，我们的老朋友typeof、instanceof运算符和自定义类型保护函数都通过使用缩小类型范围的技术为TypeScript基于控制流的类型分析做出了贡献。比如通过if语句分支functionstringifyForLogging(value:unknown):string{if(typeofvalue==="function"){constfunctionName=value.name||"(anonymous)";return`[function${functionName}]`;}if(valueinstanceofDate){returnvalue.toISOString();}returnString(value);}通过使用自定义类型保护函数缩小未知类型的范围。functionisNumberArray(value:unknown):valueisnumber[]{return(Array.isArray(value)&&value.every(element=>typeofelement==="number"));}constunknownValue:unknown=[15,23,8,4,42,16];if(isNumberArray(unknownValue)){constmax=Math.max(...unknownValue);console.log(max);}尽管unknownValue已被归类为未知，请注意它仍然在if分支中获取number[]类型。参考文章阿宝哥的《重学TS》《ts中文文档》本文转载自微信公众号“前端引力”，可通过以下二维码关注。转载本文请联系前端Gravity公众号。
