TypeScript笔记（二）

背景

上一篇文章我们介绍了TypeScript的一些特性，主要是其与JavaScript的比较，接下来我们将会开始学习Type的语法，这篇文章将会介绍TypeScript的数据类型。

原始数据类型

TypeScript是JavaScript的超集，TypeScript的数据类型就是JavaScript的数据类型，大致可以分为基本数据类型和对象类型，基本类型包括boolean、number、string、undefine以及在ES6中的新类型Symbol和ES10中的新类型BigInt。

boolean类型

boolean类型是最基本的数据类型，只有false和true两个值，在TypeScript可以通过以下代码来声明boolean类型

let isDone: boolean = false;

其中需要注意的是使用构造函数Boolean构造的对象并不死boolean值，而是一个对象：

let createByNewBoolean: Boolean = new Boolean(1);

number类型

let decLiteral: number = 6;
//16进制数
let hexLiteral: number = 0xf00d;
//二进制数
let binaryLiteral: number = 0b1010;
//八进制数
let octalLiteral: number = 0O744;
let notNumber: number = NaN;
let infinityNumber: number = Infinity;

其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。

var decLiteral = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;

字符串string

TypeScript中使用string定义字符串类型：

let myName: string = "Tom";
let myAge: number = 26;

//字符串模版
let sentence: string = \`Hello, my name is ${myName}. I am ${myAge} years old.\`;
console.log(sentence);

编译结果为

var myName = "Tom";
var myAge = 26;
//字符串模版
var sentence = "Hello, my name is ".concat(myName, ". I am ").concat(myAge, " years old.");
console.log(sentence);

其中 ` 用来定义 ES6 中的模板字符串，${expr} 用来在模板字符串中嵌入表达式。

void

在JavaScript中没有void的概念，在TypeScript中void表示不是任何类型，常用于函数没有返回值：

function alertName(): void {
    alert('My name is Tom');
}

一般不会声明一个void类型的变量，如果声明了也只能赋值为undefine。

null和undefine

在TypeScript中null类型和undefine类型是所有类型的子类型，也就是说undeine和null可以赋值给任何类型。

// 这样不会报错
let num: number = undefined;

let num_null: number = null;

上述内容IDE可能会报红，但是可以编译通过。

Any类型

如果变量是一个普通的类型，在赋值的过程中是不可以改变类型的，例如一下如果声明为string类型如果渎职number则会报错：

ley myNumber: string = "six";
myNumber = 6;

但是如果是any类型，则可以赋值为任意类型：

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

如果一个变量被声明为any，可以访问任何属性，也可以挑用任何方法，对于它的任何操作返回的都是any类型。

let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);

let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let something;
something = 'seven';
something = 7;

something.setName('Tom');

等价于

let something: any;
something = 'seven';
something = 7;

something.setName('Tom');

联合类型

联合类型（Union Types）表示取值可以为多个类型中的一种，联合类型使用|分隔每一个类型，例子如下：

let myFavoriteNumber: string | number;
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

这里表示myFavoriteNumber可以是string类型难过也可以是number类型，但是不能是其他类型。

访问联合类型的属性或方法

当TypeScript不确定一个联合类型的变量到底是哪一个类型时只能访问此联合类型的所有类型共有的属性和方法：

function getLength(something: string | number): number {
    return something.length;
}

在上述例子中会报错，因为number是没有length属性的，如果访问共有属性则没有问题，例子如下：

function getString(something: string | number): string {
    return something.toString();
}

在联合类型的变量被赋值的时候，会根据类型推断的规则推断出一个类型：

let myFavoriteNumber: string | number;
myFavoriteNumber = "seven";
console.log(myFavoriteNumber.length);
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length)
//此时会报错，因为在赋值时类型推断已经知道myFavoriteNumber是number，而number没有length属性

最后

这篇文章主要介绍了TypeScript的基本类型如boolean、number、string、void、null和undefine，还介绍了任意类型Any和联合类型。更多内容可以关注公众号QStack。