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,
}
複製代碼