本文介绍TypeScript的基本类型,您将了解到TypeScript内置的新类型,比如any, Array, Tuple, Enum, Function, Object等。
内置类型
JavaScript已有的类型有:
number、string、boolean、null、undefined、object。
TypeScript在此基础上增加了:
any、unknown、never、enum、tuple。
首先,我们先看一下原始类型在TypeScript上的使用。
let sales: number = 123_456_789;
let course: string = 'TypeScript';
let is_published: boolean = true;
跟前面说过的一样在,我们明确了变量的类型。在TypeScript中,如果数字很大,可以通过下划线 _ 分隔增加可读性。
有初始赋值的变量,编译器能推断出它的类型,可以省略类型的标注。
sales, course, is_publicshed 不标识类型,编译器也能推出类型,但level由于没有初始赋值,它的类型就是 any。
any 类型
any 类型是假设变量可以为任意类型。
如果使用any类型,相当于丢掉了TypeScript的优点,一般尽量避免使用 any 类型。
上图中, 编译器判断出level是 any 类型,所以可以赋为 1 或 “a”;
render函数里的 document因不明确类型,编译器提示出错,有两个选择:一是 明确 document为 any类型 (document:any); 另一个是修改tsconfig.json配置,将noImplicitAny设为 false,当然这是极不建议的。
数组
JavaScript的数组元素可以是不同的元素:
let numbers = [1,2,’3′]
这在运行使用时可能会出现问题。
TypeScript 可以明确指定数组元素的类型
let numbers :number[]= [1,2,3]
这样一来,如果数组元素不是指定的number类型的话就会提示错误,实际上还可以省略掉指定的类型,TypeScript编译器会自动推断。
let numbers = [1,2,3]
但如果初始赋了空数组,那么数组元素就是 any , 也就像JavaScript一样可以有不同类型的元素了,当然是不建议的。
let numbers = []
numbers[0] = 1;
numbers[1] = ‘a’;
TypeScript明确数组元素类型的特性,可以在编码中带来很酷的体验,代码编辑器根据数据元素的类型直接给出对应类型的提示信息,极大地提升工作效率,这在JavaScript中是不可能有的。
元组
元组是TypeScript中新增的类型,固定长度且每个元素都是特定类型的数组就是元组,元组一般用于键值对。比如:
let user: [number, string] = [1, ‘Kelemi’]
同样的,在现代代码编辑器中,能感知元组元素的类型,user[0]、 user[1]能感知到不同的类型而给出操作提示。
当我们将元组编译成JavaScript代码时,就会变成一个常规的数组。
元组有一个问题,就是push操作。比如向一个元组进行和数组一样的添加元素操作,它不会发现错误。
user.push(1);
作为最佳实践做法,我们要限制元组的元素为2个,超过2个元素的元组会让人很难理解。
元组一般就用于键值对使用。
枚举
枚举是各个有关联的常数的列表,Java, C#等语言中都有该类型。在TypeScript中,枚举用Pascal命名法,也就是首字母大写的方式。
比如我们要定义T恤的尺寸,可以如下设置。
const small = 1;
const medium = 2;
const large =3;
更好的方法则是用枚举。
enum Size{Small, Medium, Large}
默认情况,第一个常数Small值为0,第二个Medium为1 ,以此类推。可以设置开始值,比如我们想设置为1,可以明确赋值。
enum Size{Small=1, Medium, Large}
这样的话,Small值为1,Medium则为2,Large就是3了。
枚举值也可设置为string, 这样就需要为每一个成员设置明确的值。
enum Size { Small = ‘s’, Medium = ‘m’, Large = ‘l’ }
定义了枚举,就可以使用这个枚举。
let mySize: Size = Size.Medium
我们生成JavaScript代码并运行下。
tsc
node dist/index.js
能看到,mySize的值就是枚举Size的Medium的值,同时可以看出,enum转译成的JavaScript代码还是有点复杂的。
如果我们将将enum设置为常数const,生成的JavaScript代码将大大优化。
函数Function
来看看TypeScript如何使函数避免错误。
TypeScript能自动感知函数的类型。
内部有条件语句的函数体未必所有分支都有返回值,为避免错误,tsconfig.json配置加上
“noImplicitReturns”: true,
作为最佳实践,应明确定义函数体返回的类型。
函数传递的参数,如果未使用,可以对其进行告警。配置加上
“noUnusedParameters”: true,
在函数体里,有时会添加本地变量,如果未使用过,我们也希望能得到警告,添加配置:
“noUnusedLocals”: true,
以上是函数避免错误的基本配置。
我们再添加参数taxYear:number,在调用calculateTax时,也就必须提供该参数的值,否则就会报错。TypeScript函数不像JavaScript可以随便传几个参数,要严格根据参数的个数和类型传值。
有时要给函数的某个参数传值,有时又不需要,有两种选择。
一种是定义参数时加上 ?,表示可选,相应地要在函数体里处理未传值的情况。
另一种是TypeScript的标准处理方法。在参数里设置默认值即可。
总之,函数的最佳做法就是开启上面提到的三个配置参数,且明确给参数和返回值定义类型。
对象
我们有个对象employee,定义了属性 id,后续再添加属性name,这在JavaScript中是允许的,但TypeScript就会提示 name属性不存在,需要明确定义的属性才可以使用。
对象中的属性有时需要可选,像前一节函数里的参数一样,加上 ?表示可选。
有些属性不希望被改变,比如 id,可以加上readonly,表示只读。
对象中也可以定义函数。
我们看到,这里的对象有些乱。后面篇章会介绍更好的方法。
小结
本文介绍TypeScript的基本内置类型,包括any, Array, Tuple, Enum, Function, Object等。
下一篇介绍TypeScript的高级类型。