最近一些出去面试的学生,被问及最多的,除了那些常用的框架,比如Angular.js,Vue.js等等,除此之外,还有一个总会被提及,就是TypeScript.
TypeScript是微软2013年推出的一个基于JS的编程语言,其本质是JS的超集,这个语言添加了可选的静态类型和基于类的面向对象编程,对于有C,OC,Java编程经历的人来讲,学习成本不高,很贴近.现在最新版本是TypeScript 2.1
1.安装和使用
对于Windows的使用者来说,直接下载微软自己的编译器Visual Studio2015,在Visual Studio里安装对应的插件,就能进行使用,如果是Mac来讲,我查了很多的博客文档,让安这个安那个的,实际对Mac来讲,首先没有Mac版的Visual Studio,其次也不需要这么麻烦,只要安装了WebStorm,就能使用TypeScript,新版本的WebStorm已经增加了对TypeScript的编译和解析,可以直接使用
TypeScript使用的是.ts的文件后缀,然后会在相同的目录下生成一个同名的.js文件,在.html页面里,引入.js文件,就可以正常的使用了.
2.动态类型语言
一般来讲编程语言分为两类,一类是静态类型语言,另外一类是动态类型语言.
静态类型语言在编译的时候就已经明确了变量的类型,优点在于编译的时候能发现不匹配的错误,提前避免一些运行可能发生的错误,其次还能程序的执行速度
动态类型语言要到程序运行的时候,变量被赋予某个值之后,才会有具体的类型,动态类型语言优点在于代码量减少,可以把经历多放在逻辑上,但是无法保证变量的类型,所以无法保证一些跟类型相关的错误.
而JS就是就是一门典型的动态类型的语言,但是TypeScript则颠覆了这种写法,需要提前设定变量的类型
3.基本类型
JS里数据类型倒是很多,有基本类型和引用类型等,但是变量都使用var 来修饰,到了ES6之后,有推出了let和const.这些ES6的特性,在新版本得TypeScript中也是被支持.
// boolean 类型
var isTrue: boolean = false;
// 整型
var num: number = 6;
// 浮点型
var pi : number = 3.14;
// 16进制
var hexLiteral: number = 0xf00d;
// 2进制
var binaryLiteral: number = 0b1010;
// 8进制
var octalLiteral: number = 0o744;
// 字符串
var name: string = "张三";
// 模板字符串,如果不知道什么事模板字符串,参考ES6
var str: string = \`你好${name}`;
// 数组,指定元素是数字类型,如果其中的元素有其他类型,.ts文件会报错,类型要固定
var list: number[] = [1, 2, 3];
// 数组泛型
var list: Array = [1, 2, 3];
这些就是TypeScript常见的数据类型,使用方式也比较类型,都是 var 变量名 : 类型 = 初始值.像数组这些变量使用,还是使用JS数组的方法,比如push等,当然了,也有一些TypeScript自己独有的类型
4.元组Tuple
之前的数组在使用的时候,只能是固定一种数据格式,要么都是数字,要么都是字符串,元组就是用来解决这中数据格式问题的,元组类型允许一个已知元素数量和类型的数据,个元素的类型可以不相同
var tuple:[string, number];
tuple = ['test', 10];
在定义一个元组类型的变量的时候,首先指定元组元素的数据类型,只要数组中的元素是指定两种类型即可,不需要指定初始值,顺序可以不一样,不会报错,这是TypeScript照比之前一个新的内容
5.二维数组
顺便说一下二维数组,写法跟之前的数组类型,就是多一个维度,多一个容器而已
// 二维
var arr : number[][] = [[1, 2, 3],[4, 5, 6]];
// 三维
var arr : number[][][] = [[[1,2]],[[3,4]]];
通过上面的例子可以看出,多一个维度,就多一个方括号,在冒号后面指定了多维数组的数据类型,而且在写的时候,只里的数组,可以写数字,如果二维数组写成[[1, 2, 3],[4, 5, 6],7],有一个单独的7存在,这么写会报错,其他多维度的也是如此
6.枚举enum
在C语言,JAVA,OC等语言里,枚举是一个非常常用的内容.枚举本身上没什么,就是把给一些有含义的常量,起一个标示性的名,目的是把所有的情况都用枚举写出来,这样根据对应不同情况对应不同枚举值,提高了代码的可读性
enum Color {Red, Green, Blue};
var c: Color = Color.Green;
这里,用enum声明了枚举变量,默认情况下,Red是0,接下来的值依次递增,Green是1,Blue是2依次,这种枚举的用法跟C语言里完全一样,当然也可以对成员进行手动赋值
enum Color {Red = 1, Green, Blue};
var c: Color = Color.Green;
这样这个枚举就是从1开始,到3结束,当然也能每个值都手动.枚举类型还提供了一个便利,就是能获取到对应枚举值的名
enum Color {Red = 1, Green, Blue};
var colorName: string = Color[2];
在查看了一下编译之后的.js文件,可以看见枚举的对应实现
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
枚举的名对应是一个变量,然后判断是否有值,如果没有赋值json,然后在自调用函数里,对对象进行赋值,可以在函数最后进行打印,此时json里的值
所以可以通过值和名进行值的相互获取
7.任意值
之前也看了很多的变量的创建,都需要在创建时候指定对应的类型,如果在不明确类型的时候,需要获取动态元素的时候,可以使用any类型对这类数据进行标记
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
在数组中不明确的时候也能使用
var list: any[] = [1, true, "free"];
list[1] = 100;
这样这个变量就能动态的去承载对应类型的数据了
7.NULL,Undefined,空值,never
NULL和Undefined也都是JS的基本数据类型,官方的文档对这三个类型的介绍很清楚:用处不大.所以就看看就行了
// void 空值
var unusable: void = undefined;
let u: undefined = undefined;
let n: null = null;
never类型表示的是那些永不存在的值的类型,一般都用在函数里,想了解就看看官方文档吧
8.变量声明
在整个文档里变量声明都是使用的let,而不是var.let和const是ES6推出的,但是TypeScript把这两个修饰词给具体实现了出来,具体什么含义参看ES6的let,或者看官方文档,就不赘述了.
let采用的是块作用域,能帮助我们检测重定义,如果有的话,会报错,这样用法更贴近JAVA.
虽然有时候在TypeScript里,写完会有报错,但是不代表编译出来的.js文件也会有问题,比如在.ts文件里用let修饰的变量,编译到.js文件,统一都是var,并没有let的影子,虽然不影响使用,但是还是希望去参照.ts的标准语法去实现对应的业务逻辑吧