TypeScript Start: 基础类型

原文连接

前言

TypeSrcit Start 系列文章：

• TypeScript Start: 什么是 TypeScript
• TypeScript Start: 基础类型

---

上一节咱们说到 TypeScript 最重要的特性就是给 JavaScript 引入了静态类型声明，这一节就来看一下 TypeScript 里的基础类型和变量声明。

咱们知道在 JavaScript 中有 7 种数据类型，分别是：

• 布尔值(Boolean)
• 字符串(String)
• 数字(Number)
• Null
• undefined
• Object
• Symbol(ES6)

这里就很少做解释了，若是忽然忘记，就点开回忆回忆。

虽然有这么多的数据类型，可是声明的时候只能 var、let、const...

// bad code
var count = '0';
let isNumber = 1;
const name = true;
复制代码

What did you say？You'd better not do that again.

咱们应该优雅一点~

TypeScript 的基础类型

TypeScript 是 JavaScript 的超集，天然可以支持全部 JavaScript 的数据类型，除此以外，TypeScript 还提供了让人喜欢的枚举类型(enum)。

boolean 布尔值

function hello(isBetterCode: boolean) {
	//...
	return isBetterCode ? 'good' : 'bed';
}
const isBetterCode: boolean = true;
hello(isBetterCode); // good
复制代码

来个小插曲，下面这两行代码分别返回什么：

new Boolean('') == false
new Boolean(1) === true
复制代码

因此，若是这样声明了一个表示布尔值的变量，编译是不会经过的：

const isBetterCode: boolean = new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.
// 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.
复制代码

由于 new Boolean 返回的是一个 Boolean 对象，而不是一个 boolean 值。

若是你想这样写，也都是能够的：

const isBetterCode: Boolean = new Boolean(1);
const isBetterCode: boolean = Boolean(1);
复制代码

number 数字

TypeScript 和 JavaScript 同样，全部的数字都是浮点数，并无区分 int、flost、double 等类型，全部的数字都是 number。number 类型支持十进制、十六进制等，以及 NaN 和 Infinity 等。

const count: number = 1;
const binary: number = 0b1010; // 10
const hex: number = 0xf00d; // 61453
const octal: number = 0o744; // 484
const notNumber: number = NaN; // NaN
const infinityNumber: number = Infinity; // Infinity
复制代码

string 字符串

使用 string 定义字符串类型的变量，支持常规的单引号和双引号，也支持 ES6 的模板字符串：

const name: string = 'axuebin'; // axuebin
const desc: string = `My name is ${name}`; // My name is axuebin
复制代码

void 空

犹记得 C 中的 void main() 还有 Java 中的 public static void main(String args[]) 这两句闭着眼睛都能写出来的代码，在 JavaScript 中却很久都见不到一次 void 的身影，甚是想念。

其实，JavaScript 是有 void 的，只是不常使用而已。

void 0; // undefined
复制代码

在 TypeScript 中，你能多见见它了，咱们能够用 void 来表示任何返回值的函数：

function hello(): void {
	console.log('hello typescript');
}
复制代码

null 和 undefined 空

const u: undefined = undefined; // undefined
const n: null = null; // null
复制代码

须要注意的是：

undefined 类型的变量只能被赋值为 undefined，null 类型的变量只能被赋值为 null。

不过你能够把 undefined 和 null 类型的变量赋给 void 类型的变量...

any 任意值

AnyScript 大法好

有时候，咱们须要为那些在编程阶段没法肯定类型的变量指定一个类型时，咱们就须要 any 这个类型。any 类型的变量能够被赋予任意类型的值：

let number: any = 'one';
number = 1; // 1
const me: any = 'axuebin';
console.log(me.name); // undefined 不会报错
复制代码

这样是不会报错的。

固然，若是在编程阶段可以肯定类型的话，尽可能仍是可以明确地指定类型。

声明变量（没赋值）的时候，若是未指定类型，那么该变量会被识别为 any 类型，好比：

let number; // 至关于 let number: any;
number = 1; // 1
复制代码

须要注意的是，没赋值。若是声明变量的时候同时赋值了，就会进行类型推论。

类型推论

声明变量的时候，若是对变量进行赋值，若是该变量没有明确地指定类型，TypeScript 会推测出一个类型。

let number = 'one'; // 至关于 let number: string = 'one';
number = 1; // Type '1' is not assignable to type 'string'.
复制代码

若是只声明没有赋值，就是 any。

array 数组

在 TypeScript 中，数组是经过「类型 + 方括号」来定义：

const me: string[] = ['axuebin', '27']; // 定义一个都是 string 的数组
const counts: number[] = [1, 2, 3, 4]; // 定义一个都是 number 的数组
// error
const me: string[] = ['axuebin', 27]; // Type 'number' is not assignable to type 'string'.
counts.push('5'); // Argument of type '"5"' is not assignable to parameter of type 'number'.
复制代码

还有一种方式是使用泛型：

const counts: Array<number> = [1, 2, 3, 4]; // 使用泛型定义一个都是 number 的数组
复制代码

关于泛型，后面会仔细说明，如今就知道有这么个东西~

若是对数组中的类型不肯定，比较常见的作法就是使用 any：

const list: any[] = ['axuebin', 27, true];
复制代码

tuple 元组

还有一种特殊的状况，若是咱们须要定义一个已知元素和类型的数组，可是各个元素的类型不相同，可使用 tuple 元组 来定义：

const me: [string, number, boolean] = ['axuebin', 27, true];
复制代码

当咱们想要在这个数组 push 一个新元素时，会提示 (string | number | boolean)，这是表示元组额外增长的元素能够是以前定义的类型中的任意一种类型。(string | number | boolean) 称做联合类型，后续会说到它。

eunm 枚举

枚举是 TS 对 JS 标准数据类型的补充，Java/c 等语言都有枚举数据类型，在 TypeScript 里能够这样定义一个枚举：

enum Animal {
	Cat,
	Dog,
	Mouse,
}
const cat: Animal = Animal.Cat; // 0
const dog: Animal = Animal. Dog; // 1
复制代码

既然是 JavaScript 没有的，咱们就须要知道一个枚举最终会被编译成什么样的 JavaScript 代码：

"use strict";
var Animal;
(function (Animal) {
    Animal[Animal["Cat"] = 0] = "Cat";
    Animal[Animal["Dog"] = 1] = "Dog";
    Animal[Animal["Mouse"] = 2] = "Mouse";
})(Animal || (Animal = {}));
const cat = Animal.Cat; // 0
const dog = Animal.Dog; // 1
复制代码

很容易看出，Animal 在 JavaScript 中是变成了一个 object，而且执行了如下代码：

Animal["Cat"] = 0; // 赋值运算符会返回被赋予的值，因此返回 0
Animal[0] = "Cat";
// 省略 ...
// 最终的 Animal 是这样的
{
	0: "Cat",
	1: "Dog,
	2: "Mouse",
	Cat: 0,
	Dog: 1,
	Mouse: 2,
}
复制代码