Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架并且 Angular 本身就是用 TypeScript 写成的。所以学习一些TypeScript相关的知识是非常重要的。先说说TypeScript的主要特征免费开源基于 ECMAScript 标准进行扩展新增了可选静态类型类模块经过编译以后成为可读的符合 ECMAScript 规范的JavaScript跨平台可以和 JavaScript 代码一起运行TypeScript的基本类型boolean(布尔)类型constisShow:booleanfalse;number(数字)类型consta:number1;constb:number1_000;// 1000string(字符串)类型在这里可以使用双引号()或者单引号(’)标示字符串leta:stringMr a.;letb:stringMr b.;还可以使用模版字符串可以定义多行文本和内嵌表达式是由反引号表示并使用$进行插值表达leta:stringMr a.;letb:stringMr b.;letmessage1:stringThis is${a}and${b};letmessage2:stringThis is a and b;注意上述代码中message1 和 message2 的值是一样的。null(一个表明是null值的特殊关键字)注意:大小写敏感不能写成NULL 或者 Null。undefined(变量未定义时的属性)symbol (ES6新添加的一种类型,类型的实例唯一且不可以改变)constsymbol1Symbol(Hello World);constsymbol2Symbol(Hello World);console.log(symbol1symbol2);// false因为 symbol 是唯一的所以symbol1symbol2无论如何都不会相等在项目开发中常量使用 symbol 值最大的好处是在其他的任何值都不可能有项目的值可以保证在特定的变量或者特定的switch 语句按照预想的方式工作。object(对象存放值的命名容器)Array(数组)定义数组的两种方式在元素类型后面跟上[]并且由此表示此类型的元素组成的数组letlist:number[][1,2,3];使用数组泛型Array元素类型letlist:Arraynumber[1,2,3];类型断言泛型在项目中大部分时候设计的某一个功能可能需要支持多种数据类型而不是局限于某一种类型泛型用于提高代码的重用性。泛型函数创建一个泛型函数sayHello 函数这是一个简单的函数直接将参数值作为返回值。当需要传入一个数字类型的时候函数为publicfunctionsayHello(arg:number):number{returnarg;}但是突然需求改成需要传入一个字符串就会变成publicfunctionsayHello(arg:string):string{returnarg;}也可以使用 any 类型来表示这种混乱publicfunctionsayHello(arg:any):any{returnarg;}但是any类型并不能准确的表达出函数的返回值与参数值相同、类型相同。此时就可以使用泛型变量 T, T 代表用户传入的类型类型既可以是number也可以是string也可以使用 T 作为函数的返回类型。这样就达到了返回值与参数值的类型相同的目的保持函数表达的准确性。publicfunctionsayHelloT(arg:T):T{returnarg;}使用泛型函数使用泛型函数有两种方式使用尖括号进行类型表达letworldsayHellostring(hello World);使用类型推断什么都不做TypeScript的编译器会根据传入的参数类型自动判断 T 的数据类型letworldsayHello(hello World);这个时候编译器会知道函数的参数类型就是 string 类型的同样返回的类型也就是string了。枚举类型在项目开发中有时候会和后端开发约定某个业务的状态值 代办状态是0申请开发状态是1 完成状态是2这样的纯数字会使代码缺乏可读性此时就可以使用枚举类型从而提高代码的可读性。TypeScript 支持基于数字枚举和字符串的枚举数字枚举enumtaskStatus{backLog,applyDev,done,}实际开发中就可以使用taskStatus.backLog 代表原来的数字 0 了。小技巧当在使用数字枚举时如果第一个枚举的变量没有赋值那么第一个变量的值就是0后面的变量依次递增。如果第一个枚举的变量的2或者其他数字其他的变量没有赋值那么第一个以后的变量就为第一个变量值依次递增。例如对backLog赋值为4那其他的值为56enumtaskStatus{backLog4,applyDev,// 5done,// 6}字符串枚举在一个字符串枚举中为了可读性所有成员必须是字符串字面量。enumtaskStatus{backLogbackLog,applyDevapplyDev,donedone,}反向映射反向映射仅限于 数字类型的枚举例如设定一个枚举exportenumTaskStatus{a,// 0b,// 1c,// 2}此时输出console.log(TaskStatus.a);// 0console.log(TaskStatus[0]);// a注意 字符串枚举没有反向映射在Angular中创建一个枚举类型的数据使用 cli 命令创建执行命令ng g enum taskStatus或者ng generate enum taskStatus结果wujiayudeMacBook-Pro:demo-test wjy$ ng generate enum taskStatus CREATE src/app/task-status.enum.ts(27 bytes)打开文件以后如下exportenumTaskStatus{}此时就可以在这个文件中添加成员变量了。