TypeScript學習筆記--數據類型

開頭

---

ts的基本類型學習

一 string 字符串

和js的聲明方式一樣，只不過在聲明變量之前定義數據類型而已
聲明方式是小寫，不是大寫

let name :string = 'peter'
let str :string = \`my name is ${name}\`

二 number 數字

TypeScript裏的所有數字都是浮點數。這些浮點數的類型是 number。 除了支持十進制和十六進制字面量，TypeScript還支持ECMAScript 2015中引入的二進制和八進制字面量，它會把二進制，八進制自動轉化爲十進制
以0b開頭的數是二進制，以數字0或者0o開頭，由0~7組成的數是八進制。以0X或0x開頭，由0~9，A~F或a~f 組成是十六進制
聲明方式是小寫，不是大寫

let num:number = 10;
let num_1:number = 0b0001;// 二進制轉十進制爲1；
let num_2:number = 0o744;// 八進制轉十進制爲284；
let num_3:number = 0xf00d; // 十六進制還是十六進制爲0xf00d；

三 boolean 布爾值

只有兩種值，false/true
聲明方式是小寫，不是大寫

let bool_1:boolean = false;
let bool_2:boolean = true;

注意點

很多 TypeScript 的原始類型比如 boolean、number、string等等，在JavaScript中都有類似的關鍵字 Boolean、Number、String，後者是 JavaScript 的構造函數，比如我們用 Number 用於數字類型轉化或者構造 Number 對象用的，而 TypeScript 中的 number 類型僅僅是表示類型，兩者完全不同。

四 void 空值

JavaScript 沒有空值（Void）的概念，在 TypeScript 中，可以用 void 表示沒有任何返回值的函數。
void它表示沒有任何類型。 當一個函數沒有返回值時，你通常會見到其返回值類型是 void。聲明一個void類型的變量沒有什麼大用，因爲你只能爲它賦予undefined和null，但是不推薦設置，可以使用聯合類型(let a :number | undefined | null = 2)

function foo():void{
	console.log('今天天氣不錯')
}
let a :void = undefined;
let b :void = null;// 記得將tsconfig的strictNullChecks設置爲false

五 null / undefined

在 TypeScript 中，可以使用 null 和 undefined 來定義這兩個原始數據類型，我覺得不怎麼常用

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

與 void 的區別是，undefined 和 null 是所有類型的子類型。意思就是任何原始類型的變量可以用undefined和null。但是void不行，會報錯

let a:number = undefined;
let b:string = null;
let c:boolean = undefined;
let e:void;
let d:string = e; // 報錯

六 any 任意值

任意值（Any）用來表示允許賦值爲任意類型。
如果是一個普通類型，在賦值過程中改變類型是不被允許的，但是any可以改變類型，但是違反了嚴謹的說法。

let a:any;
a = 4;
a = '4'
a = [4]

• 在任意值上訪問任何屬性都是允許的,也允許調用任何方法,可以認爲，聲明一個變量爲任意值之後，對它的任何操作，返回的內容的類型都是任意值。雖然有可能編譯成js時會報錯

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

• 變量如果在聲明的時候，未指定其類型，那麼它會被識別爲任意值類型

  let a; // 等價於let a:any
  a = 4;
  a='4';
  

七 unknown

unknown 是 TypeScript 3.0 引入了新類型,是 any 類型對應的安全類型。
unknown 和 any 的主要區別是 unknown 類型會更加嚴格:在對unknown類型的值執行大多數操作之前,我們必須進行某種形式的檢查,而在對 any 類型的值執行操作之前,我們不必進行任何檢查。
普通的聲明可以參考第六any的例子，最大的區別如下：

let unkonwn_1:unknown;
console.log(unkonwn_1.myName); // 標紅報錯Property 'myName' does not exist on type 'unknown'
let anyThing: any = 'hello';
console.log(anyThing.myName); // 不報錯

就是 unknown 與 any 的不同之處,雖然它們都可以是任何類型,但是當 unknown 類型被確定是某個類型之前,它不能被進行任何操作比如實例化、getter、函數執行等等。

八 never

never類型表示的是那些永不存在的值的類型。
例如，never類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型；
變量也可能是never類型，當它們被永不爲真的類型保護所約束時

// 返回never的函數必須存在無法達到的終點
function error(message: string): never {
	throw new Error(message);
}
// 返回值爲 never 的函數可以是無限循環這種無法被執行到的終止點的情況
function loop(): never {
	while (true) {}
}

never類型是任何類型的子類型，也可以賦值給任何類型；然而，沒有類型是never的子類型或可以賦值給never類型（除了never本身之外）。 即使any也不可以賦值給never。(編譯後js可能會報錯)

let x: never;
let y: number;

// 運行錯誤，數字類型不能轉爲 never 類型
x = 123;

// 運行正確，never 類型可以賦值給 never類型
x = (()=>{ throw new Error('exception')})();

// 運行正確，never 類型可以賦值給 數字類型
y = (()=>{ throw new Error('exception')})();

九 數組

TypeScript像JavaScript一樣可以操作數組元素。 有兩種方式可以定義數組。

let arr_1:number[] = [1,2,3];
let arr_2:Array<number> = [1,2,3]

數組一旦聲明瞭數據類型，就只能填寫對應類型的數據，比如是number類型，那麼就只填number。

十 Tuple 元組

元組類型與數組類型非常相似，表示一個已知元素數量和類型的數組，各元素的類型不必相同，元組的類型如果多出或者少於規定的類型是會報錯的，必須嚴格跟事先聲明的類型一致纔不會報錯，同時也要保證順序一致

let x: [string, number];
x = ['hello', 10, false] // Error
x = ['hello'] // Error
x = ['peter',2];
x.push(3);
console.log(x) //不報錯， ['peter',2,3]
console.log(x[3])// 報錯，Tuple type '[string, number]' of length '2' has no element at index '2'.

十一 對象

object 表示非原始類型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的類型。如果聲明瞭原始類型的數據，則報錯

let obj_1:object;
obj_1 = {
	name:'peter'
};
obj_1 = [1,2,3];
obj_1 = '1'; // Type '"1"' is not assignable to type 'object'

十二 枚舉 enum

enum類型是對JavaScript標準數據類型的一個補充。 像C#等其它語言一樣，使用枚舉類型可以爲一組數值賦予友好的名字。

enum Direction {
	Up,
	Down,
	Left,
	Right
}
console.log(Direction['Down']) // 1
console.log(Direction[1]) // Down

以把枚舉類型看成一個JavaScript對象，而由於其特殊的構造，導致其擁有正反向同時映射的特性。通俗的說：可以通過下角標獲取值，也可以通過值獲取下角標,如果設置字符串的話，沒法獲取下角標。
可以手動賦值，數字，字符串

enum Direction {
	Up = 1,
	Down = 3,
	Left = 5,
	Right = 6
}
console.log(Direction['Down']) // 3
console.log(Direction[3]) // Down

enum Direction {
	Up = 'a',
	Down = 'b',
	Left = 'c',
	Right = 'd'
}
console.log(Direction['Down']) // b

總結

ts作爲js的超集，爲前端提供了一種規範，避免了後期類型不對導致的錯誤，ts的基本知識不多，重在練習。
我把筆記和例子放到GitHub裏了，如需要可以去看看，有什麼不對的地方，歡迎指正，大家一起進步加油。

參考文獻

TypeScript 入門教程
TypeScript 中文手冊