中文網(wǎng):https://www.tslang.cn/
官網(wǎng):http://www.typescriptlang.org/
目錄:
- Typescript 學(xué)習(xí)筆記一:介紹娘摔、安裝凳寺、編譯
- Typescript 學(xué)習(xí)筆記二:數(shù)據(jù)類型
- Typescript 學(xué)習(xí)筆記三:函數(shù)
- Typescript 學(xué)習(xí)筆記四:回憶Es5 中的類
- Typescript 學(xué)習(xí)筆記五:類
- Typescript 學(xué)習(xí)筆記六:接口
- Typescript 學(xué)習(xí)筆記七:泛型
前言
typescript中為了使編寫的代碼更規(guī)范肠缨,更有利于維護盏阶,增加了類型校驗名斟,寫 ts 代碼必須指定類型。
在typescript中主要給我們提供了以下數(shù)據(jù)類型:
- boolean(布爾類型)
- number(數(shù)字類型)
- string(字符串類型)
- array(數(shù)組類型)
- tuple(元組類型)
- enum(枚舉類型)
- any(任意類型)
- null 和 undefined 類型
- void 類型
- never 類型
- object 對象類型
boolean(布爾類型)
- ES5 的寫法:
var flag = true;
flag = 456;
- ts 寫法:以上的 ES5 寫法到了 ts 中就變成了錯誤的寫法闷袒,因為將一個 number 類型值賦給了一個 Boolean 的變量。
let flag:boolean = true;
// flag = 123; // 錯誤
flag = false; //正確
number(數(shù)字類型)
- ES5 的寫法:
var num = 123;
num = 456;
- ts 寫法:
let num:number = 123;
// num = '456'; // 錯誤
num = 456; //正確
string(字符串類型)
- ES5 的寫法:
var str = 'this is ts';
str = 'test';
- ts 寫法:
let str:string = 'this is ts';
str = 'test';
array(數(shù)組類型)
- ES5 的寫法:
var arr = ['12', '23'];
arr = [34, 45];
- ts 寫法1:
let arr:string[] = ['12', '23'];
arr = ['45', '56'];
- ts 寫法2:
let arr:Array<number> = [1, 2];
arr = ['45', '56'];
tuple(元組類型):屬于數(shù)組的一種
let tupleArr:[number, string, boolean] = [12, '34', true];
賦值的類型淘捡、位置焦除、個數(shù)需要和定義(生明)的類型作彤、位置膘魄、個數(shù)一致创葡。
enum(枚舉類型)
隨著計算機的不斷普及灿渴,程序不僅只用于數(shù)值計算,還更廣泛地用于處理非數(shù)值的數(shù)據(jù)骚露。
例如:性別缚窿、月份、星期幾误续、顏色扫茅、單位名诞帐、學(xué)歷、職業(yè)等愕鼓,都不是數(shù)值數(shù)據(jù)慧起。在其它程序設(shè)計語言中蚓挤,一般用一個數(shù)值來代表某一狀態(tài),這種處理方法不直觀估灿,易讀性差。
如果能在程序中用自然語言中有相應(yīng)含義的單詞來代表某一狀態(tài)域慷,則程序就很容易閱讀和理解犹褒。
也就是說弛针,事先考慮到某一變量可能取的值,盡量用自然語言中含義清楚的單詞來表示它的每一個值座云,
這種方法稱為枚舉方法朦拖,用這種方法定義的類型稱枚舉類型璧帝。
定義:
enum 枚舉名 {
標識符[=整型常數(shù)],
標識符[=整型常數(shù)],
...
標識符[=整型常數(shù)]
};
舉例:
enum statusCode {
success,
fail,
pending
};
let res:statusCode = statusCode.success;
console.log(res); // 0富寿,如果標識符沒有賦值页徐,它的值就是下標,默認從 0 開始
enum statusCode {
success = 2,
fail,
pending
};
let res1:statusCode = statusCode.success;
console.log(res1) // 2恤左,指定的值
let res3:statusCode = statusCode.fail;
console.log(res1) // 3飞袋,若沒指定链患,從指定的往后開始
enum statusCode {
success = 2,
fail = 1,
pending = 3
};
let res1:statusCode = statusCode.success;
console.log(res1) // 2,指定的值
let res3:statusCode = statusCode.fail;
console.log(res1) // 1纲仍,指定的值郑叠,可隨意指定
any(任意類型)
表示可以指定任何類型的值锻拘。一般用于聲明 dom 節(jié)點署拟。
let num:any = 123;
num = 'str';
num = true;
let boxEl:object = document.getElementById('box'); // 錯誤歌豺,dom 節(jié)點不是真正的對象
let boxEl:any = document.getElementById('box'); // 正確
boxEl.style.color = 'pink';
null 和 undefined 類型
默認情況下null和undefined是所有類型的子類型馒铃。 就是說你可以把 null 和 undefined 賦值給 number 類型的變量。
一般用于可能為 undefined 或 null 的變量区宇。
- undefined: 定義沒有賦值就是 undefined
let num:number;
console.log(num); // 輸出:undefined 報錯
let num:undefined;
console.log(num); // 輸出:undefined 正確
let num:number | undefined; // | 表示或者
console.log(num); // 正確
num = 123;
console.log(num); // 正確
- null
let num:null;
num = null;
- 一個變量可能是 number 類型议谷,可能是 null卧晓,可能是 undefined
let num:number | null | undefined;
num = 1234;
void 類型
typescript 中的 void 表示沒有任何類型逼裆,一般用于定義方法的時候方法沒有返回值胜宇。
- ES5 的寫法:
function fn () {
console.log('fn');
}
fn();
- ts 的寫法:
無返回值
function fn ():void { // 正確的寫法
console.log('fn);
}
fn();
function fn ():undefined { // 錯誤的寫法
console.log('fn);
}
fn();
函數(shù)沒有返回值的時候掸屡,只能為 void仅财,不能為 undefined。
有返回值
function fn ():number {
return 123;
}
console.log(fn());
never 類型
typescript 中的 never 是其他類型 (包括 null 和 undefined)的子類型碗淌,可以賦值給任何類型盏求,代表從不會出現(xiàn)的值抖锥。但是沒有類型是 never 的子類型,這意味著聲明 never 的變量只能被 never 類型所賦值碎罚。
never 類型一般用來指定那些總是會拋出異嘲醴希或根本就不會有返回值的函數(shù)表達式或箭頭函數(shù)表達式的返回值類型。
let a:never;
a = 123; // 錯誤的寫法
a = (() => { // 正確的寫法
throw new Error('錯誤');
})()
object 對象類型
let obj:object;
obj = {name: 'Wang', age: 25};