动态

详情 返回 返回

TypeScript基本類型有哪些 - 动态 详情

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
}
*/

Add a new 评论

Some HTML is okay.