网站首页 » 前端开发 » 前端工具 » TypeScript 基本类型
上一篇:
下一篇:

TypeScript 基本类型

前言

TypeScript 基本类型也不少,下面我们就来看看都有哪些。

在 TypeScript 中声明变量时我们一般需要同时确定变量的类型,而这个类型的确定有两种方法,一种是显示的,一种是隐式的。在看这些之前,我们必需先得知道 在 TypeScript 中都有些什么类型的变量。

Null,Undefined,Never,Boolean,String,Number,Object,Array,Tuple,Any,Void,Enum

显式类型声明

Null,Undefined ,Never 类型

let u: undefined = undefined;
let n: null = null;

如果定义完后,试图修改它们比如:

u = null;
n = undefined;

对于 never 一般可以下面的场景下用到(无法达到的终点):

function a (): never{
    throw new Error('message');
}

function b(): never {
    while (true) {
        ......
    }
}

或者赋了其它任务类型的值,那么编译时就会报错,因为:Null,Undefined ,Never类型它们都是任何类型的子类型,没有类型是 Null、undefined 或者 never 的子类型或可以赋值给Null、Undefined 或者 never类型(除了它们自己本身之外)

Boolean,String,Number Object 类型

这几个就比喻容易理解,只要定义规定类型的值就行。

let isMonth: boolean = true
let str: string = 'abc'
let num: number = 123
let obj: object = {}

Array,Tuple 类型

let arr1: number[] = [1,2,3]
let arr2: string[] = ['abc','efg','hij']

number[] 前面的 number 表示元素的类型(所有的元素都必需为数字类型)

Tuple 类型可以说是前面 Array 定义的增加版,因为你可以指定元素的类型

let arr3: [string, number];

只不过你定义完后,这个数据的长度就确定了。比如上面的 arr3 长度为 2,并且第一个元素类型是字符串,第二个元素类型为数字。如果有一个不满足编译就会报错。

Any 类型

Any 为任意类型,所以使用它定义的变量可以是任意类型。

let x:any = 0;
x = 'Hellow'
x = true
let arr4: any[] = [1,'Hellow'];
arr4 = [1,true];
arr4.push.push('Hellow')

这个 any 其实就相当于回到解放前,JavaScript 中的随意。

Void 类型

Void 类型一般情况下用于表示函数没有返回值,比如:

function say (): void {
  console.log('Hellow');
}

这样写的一个原因就是显式的告诉别人,这人函数没有返回值,让人一目了然。但我们还可以用它来声明变量

let x: viod;

声明了类型为 viod 的变量,是不可以给它赋值的。相当于这个变量没什么意义。

Enum 类型

这个还算挺好用的

enum Week {Mon, Tues, Wed, Thur, Fri, Sat, Sun}

声明这这个枚举 Week,它是一个对象。这个对象是这样子的

{
  0:"Mon",
  1:"Tues",
  2:"Wed",
  3:"Thur",
  4:"Fri",
  5:"Sat",
  6:"Sun",
  Fri:4,
  Mon:0,
  Sat:5,
  Sun:6,
  Thur:3,
  Tues:1,
  Wed:2,
}

一看可能你就明白了,我们还可以看看它生成的 ES5 代码:

var Week;
(function (Week) {
    Week[Week["Mon"] = 0] = "Mon";
    Week[Week["Tues"] = 1] = "Tues";
    Week[Week["Wed"] = 2] = "Wed";
    Week[Week["Thur"] = 3] = "Thur";
    Week[Week["Fri"] = 4] = "Fri";
    Week[Week["Sat"] = 5] = "Sat";
    Week[Week["Sun"] = 6] = "Sun";
})(Week || (Week = {}));

这个枚举类,所做的事就是自动帮我们生成所需的键值对。

隐式类型声明

这里我们再说点别的

类型推理

这个其它也很好理解,即我们在声明变量时不添加类型并且初始化变量时,那么 TypeScript 就会把初始化的这个值的类型作为变量的类型。

let x = 12;
x = 'abc';

此时 TypeScript 编译就会报错。基为不可以给数字类型的变量赋值一个字符串。

但是下面这种类型的声明却又有所不同:

let x;
x = 12
x = 'abc';

也就只声明,后面再赋值,此时 TypeScript 编译通过。上面的代码就相当于下面的代码

let x:any;
x = 12
x = 'abc';

所以在声明时要注意了,这里建议我们尽量使用显式声明变量的类型,以免产生不必要的问题。

其它

还有一种比较常见的情况,引入第三方库,通常我们都会通过库给我们提供的变量来调用。比如 jQuery

declare const $;
$(function(){
    ......
})

我们需要在开头通过 declare 关键字来告诉编译器这个变量其它地方会提供。

我们可以给一个变量同时声明多个类型,像下面这样:

let x:number|string;
x = 6;
x = 'string';

如果你给x 赋其它值的话,编译器就会报错。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/typescipt-basic-types/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END