ts編譯成js的工具
npm install -g typescript
使用命令: tsc example.ts
只執行ts代碼,但不編譯的工具
1、nodemon , 只要保存代碼就會執行,比較推薦
安裝:``` npm intall -g nodemon ```
使用: ``` nodemon example.ts ```
2、ts-node ,每次需要執行ts-node命令
安裝:``` npm install -g ts-node ```
使用: ``` ts-node example.ts ```
TypeScript基本類型有哪些
any 類型、number 類型 、boolean 類型 、 數組類型、元組類型、enum 枚舉類型、void 類型、null 類型、 undefine 類型、 never 類型
/* any 類型 ,任意類型,表示可以賦予任何類型值*/
let any:any // 等同於let any
/*number 類型 */
let num:number = 1;
/* string 類型 */
let str:string = 'string'
/* boolean */
let boolean:boolean = true;
/* 數組類型 ,表示元素的類型都是一樣的*/
let arr: number[] = []; // 一般寫法
let arr1: Array<number> = [1, 2]; // 使用泛型,規定數組內容為number類型
let arr2: Array<string> = ['1', '2']; // 使用泛型,規定數組內容為string類型
let arr3: Array<boolean> = [true, false]; //使用泛型,規定數組內容為boolean類型
/* 元組類型, 表示每個元素對應位置的類型要相同 */
let tuple: [number, string, boolean]; // 正確寫法,元素位置類型一一對應
tuple = [1, 'str', true];
// tuple = [1,2,'str']; // 錯誤寫法
/* enum 枚舉類型 , 用於定義數值集合 */
enum Color { Red, Green, Blue };
let c: Color = Color.Red; // 取Red在枚舉類型的枚舉值0
console.log(c); // 輸出0
c = 1.1 //其實可以賦number類型, 但賦值其他類型值是不允許的,Color.Red的值就是number
/* void 類型 , 用於表示函數/方法沒有返回值*/
function func():void {
// return 1 // 有返回值是錯誤的
return //正確寫法,可以不寫
}
/* null 類型, 表示不屬於任何類型 */
let nu:null
nu = null //正確賦值
/* undefine 類型 */
let und1:any = undefined //這是一般用法,初始化變量為一個未定義的值
let und2: undefined = undefined //正確賦值
/* never 類型,表示不是以上的所有類型,只能是異常類型*/
let x: never;
let y: number;
// x = 123; // 運行錯誤,數字類型不能轉為 never 類型
x = (() => { throw new Error('exception') })(); // never 類型可以賦值給 never類型
y = (() => { throw new Error('exception') })(); // never 類型可以賦值給 數字類型
function error(message: string): never {
throw new Error(message);// 返回值為 never 的函數可以是拋出異常的情況
}
function loop(): never {
while (true) { } // 返回值為 never 的函數可以是無法被執行到的終止點的情況
}
可能你想為啥沒有對象(Object)、數組(Array)、函數(Function)類型,還有兩個特殊的對象:正則(RegExp)和日期(Date)
其實這些都是有的,因為ts保留了js的所有特性
TypeScript還可以聲明為Object類型,它能被賦予的除了null 類型、 undefine 類型、 never 類型,其他類型都可以 (要理解萬物皆對象,嘿嘿)
let obj: Object
obj = function () {}
console.log(typeof obj);//function
obj = {}
console.log(typeof obj);//object
obj = []
console.log(typeof obj);//object
obj = 1
console.log(typeof obj);//number
obj = 'str'
console.log(typeof obj);//string
obj = undefined //報錯
obj = null //報錯
可能你對枚舉類型還有很多疑惑,接下來我們一起深入理解枚舉
枚舉是組織收集有關聯變量的一種方式,許多程序語言(如:c / c# / Java)都有枚舉數據類型
枚舉可以分為數字枚舉、字符串枚舉、常量枚舉、開放式枚舉、有靜態方法的枚舉
數字枚舉
enum Color {
Red, // 0
Green, // 1
Blue // 2
}
console.log(Color.Red); // 輸出0
console.log(Color.Green); // 輸出1
以上ts代碼被編譯成js代碼是這樣的,就是
var Tristate;
(function(Tristate) {
Tristate[(Tristate['False'] = 0)] = 'False';
Tristate[(Tristate['True'] = 1)] = 'True';
Tristate[(Tristate['Unknown'] = 2)] = 'Unknown';
})(Tristate || (Tristate = {}))
console.log(Tristate);
//Tristate輸出結果如下
/* {
'0': 'False',
'1': 'True',
'2': 'Unknown',
False: 0,
True: 1,
Unknown: 2
} */
}
你可以通過特定的賦值來改變給任何枚舉成員關聯的數字,如下例子,我們從 3 開始依次遞增
遞增規則是:如果不給當前位置的值不給特定值,就會根據上個位置的值+1
enum Color {
Red = 3,
Green,
Blue
}
console.log(Color.Red); // 輸出3
console.log(Color.Green); // 輸出4
其實還能這麼玩,對其它值進行一定的計算
enum AnimalFlags {
None = 0,
HasClaws = 1 << 0,
CanFly = 1 << 1,
EatsFish = 1 << 2,
Endangered = 1 << 3,
//對以上值進行一定的計算
composition = HasClaws | CanFly | EatsFish | Endangered
}
字符串枚舉
export enum EvidenceTypeEnum {
UNKNOWN = '',
PASSPORT_VISA = 'passport_visa',
PASSPORT = 'passport',
SIGHTED_STUDENT_CARD = 'sighted_tertiary_edu_id',
SIGHTED_KEYPASS_CARD = 'sighted_keypass_card',
SIGHTED_PROOF_OF_AGE_CARD = 'sighted_proof_of_age_card'
}
這些可以更容易被處理和調試,因為它們提供有意義/可調試的字符串。
你可以使用它們用於簡單的字符串比較:
// Where `someStringFromBackend` will be '' | 'passport_visa' | 'passport' ... etc.
const value = someStringFromBackend as EvidenceTypeEnum;
// Sample use in code
if (value === EvidenceTypeEnum.PASSPORT) {
console.log('You provided a passport');
console.log(value); // `passport`
}
常量枚舉
枚舉類型加const關鍵字,有助於性能的提升,以下代碼將會被編譯成 var lie = 0;這裏編譯是因為
不會為枚舉類型編譯成任何 JavaScript(在這個例子中,運行時沒有 Tristate 變量),因為它使用了內聯語法。
const enum Tristate {
False,
True,
Unknown
}
const lie = Tristate.False;
如果沒有const關鍵字,編譯結果是這樣的,因此提高了性能
var Tristate;
(function (Tristate) {
Tristate[Tristate["False"] = 0] = "False";
Tristate[Tristate["True"] = 1] = "True";
Tristate[Tristate["Unknown"] = 2] = "Unknown";
})(Tristate || (Tristate = {}));
var lie = Tristate.False;
常量枚舉 preserveConstEnums 選項
使用內聯語法對性能有明顯的提升作用。運行時沒有 Tristate 變量的事實,是因為編譯器幫助你把一些在運行時沒有用到的不編譯成 JavaScript。然而,你可能想讓編譯器仍然把枚舉類型編譯成 JavaScript,用於如上例子中從字符串到數字,或者是從數字到字符串的查找。在這種情景下,你可以使用編譯選項 --preserveConstEnums,它會編譯出 var Tristate 的定義,因此你在運行時,手動使用 Tristate['False'] 和 Tristate[0]。並且這不會以任何方式影響內聯。
有靜態方法的枚舉有靜態方法的枚舉
你可以使用 enum + namespace 的聲明的方式向枚舉類型添加靜態方法。如下例所示,我們將靜態成員 isBusinessDay 添加到枚舉上:
enum Weekday {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}
namespace Weekday {
export function isBusinessDay(day: Weekday) {
switch (day) {
case Weekday.Saturday:
case Weekday.Sunday:
return false;
default:
return true;
}
}
}
const mon = Weekday.Monday;
const sun = Weekday.Sunday;
console.log(Weekday.isBusinessDay(mon)); // true
console.log(Weekday.isBusinessDay(sun));
開放式枚舉
以下同名的枚舉,可以進行合併,不過要注意的是:在有多個聲明的enum中,只有一個聲明可以省略其第一個enum元素的初始化式,否則會報錯
enum Color {
Red,
Green,
Blue
}
enum Color {
DarkRed = 1,
DarkGreen,
DarkBlue
}
編譯js結果如下:
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
(function (Color) {
Color[Color["DarkRed"] = 0] = "DarkRed";
Color[Color["DarkGreen"] = 1] = "DarkGreen";
Color[Color["DarkBlue"] = 2] = "DarkBlue";
})(Color || (Color = {}));
console.log(Color);
//輸出結果
/*
{
'0': 'DarkRed',
'1': 'DarkGreen',
'2': 'DarkBlue',
Red: 0,
Green: 1,
Blue: 2,
DarkRed: 0,
DarkGreen: 1,
DarkBlue: 2
}
*/