TypeScript教程(二)– 基本类型

本文介绍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的高级类型。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注