TypeScript基礎指南-基本類型聲明（1）

什麼是TypeScript

TypeScript並非一個徹底新的語言，它是JavaScript的超集，爲JavaScript的生態增長了類型機制，並將最終代碼編譯成純粹的JavaScript代碼。

爲何要用ts?

首先JavaScript代碼是一門弱類型語言，沒有很大的約束力，只有執行的時候才能肯定變量的類型，這中開發方式，很容易在後期編譯過程當中出現不可預知的某些問題，下降開發效率。因此TypeScrpit的類型機制能夠有效杜絕由變量類型引發的誤用問題，並且開發中能夠積極的控制對於類型的監控，嚴格限制變量仍是寬鬆變量。

數據類型

String類型

字符串類型：string

let username: string = "Kisn"

Boolean 類型

布爾型 ： true/false

let isBool : boolean = flase;

Number 類型

數字類型 ： 二進制、十進制、八進制、十六進制

let decLiteral: number = 6;
let hexLiteral: number = 0xff0d;
let binaryLiteral: number= 0b1010;
let octalLiteral: number = 0o744;

舉例

編譯前 TypeScript

guide0626.ts

let username: string = 'Kisn',
  age: Number = 24,
  isMan: boolean = true,
  descripts: String = `個人名字是${username}，年齡${age},性別爲${getSex(isMan)}`

function getSex(i: boolean) {
  let sexStr = '女'
  if (i) {
    sexStr = '男'
  }

  return sexStr
}

console.log(descripts)

進行編譯

tsc guide0626.ts

編譯後 JavaScript

guide0626.js

var username = 'Kisn', age = 24, isMan = true, descripts = "\u6211\u7684\u540D\u5B57\u662F" + username + "\uFF0C\u5E74\u9F84" + age + ",\u6027\u522B\u4E3A" + getSex(isMan);
function getSex(i) {
    var sexStr = '女';
    if (i) {
        sexStr = '男';
    }
    return sexStr;
}
console.log(descripts);

數組

ts像js同樣能夠操做數組元素。有兩種方式能夠使定義數組。功存在2中類型定義方法；

// 定義數組類型[]
let list: number[] = [1,2,3]

// 使用數組泛型，Array<元素類型>
let lsit:Array<number> = [1,2,3]

元組 Tuple

元組類型容許標示一個已知元素數量和類型的數組，各元素的類型沒必要相同。

// 聲明一個元組
let x: [string, number] 
// 實例化 
x = ['Kisn', 10] // OK
x = [10, 'Kisn'] // Error

當訪問一個已知索引的元素，會獲得正確的類型：

console.log(x[0].substr(1)) // 正確
console.log(x[1].subsrt(1)) // 錯誤，由於x[1]聲明的是number類型

當訪問一個越界的元素，會使用聯合類型替代：

x[3] = 'world' // 正確，字符串能夠賦值給(string | number) 類型

console.log(x[5].toString()) // 正確，string和number均可有toString的方法

x[6] = true // 錯誤，布爾不是（string | number）類型

枚舉 enum

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

enum Color {Red , Green , Blue}

let c: Color = Color.Green;

編譯後的JavaScript

var Color;

(function(Color) {
  Color[(Color['Red'] = 0)] = 'Red'
  Color[(Color['Green'] = 1)] = 'Green'
  Color[(Color['Blue'] = 2)] = 'Blue'
})(Color || (Color = {}))

var c = Color.Green

默認狀況下，enum的原元素編號從 0開始，你能夠手動指定成員的數值。

// Red的index爲2,後面以次爲3，4
enum Color {Red = 2, Green, Blue} 
let c: Color = Color.Green;

編譯後的JavaScript

var Color;

(function(Color) {
  Color[(Color['Red'] = 2)] = 'Red'
  Color[(Color['Green'] = 3)] = 'Green'
  Color[(Color['Blue'] = 4)] = 'Blue'
})(Color || (Color = {}))

var c = Color.Green

或者咱們能夠手動賦值

// Red的index爲2,後面以次爲5，9
enum Color {Red = 2, Green = 5, Blue = 9} 
let c: Color = Color.Green;

最後，枚舉類型提供的一個便利是你能夠由枚舉的值獲得它的名字。假如，咱們已知數值爲2，可是不能它映射到Colro裏的哪一個名字，咱們能夠經過如下代碼查找相依的名字：

enum Color {Red = 1, Green, Blue = 4}

let ColorName: string = Color[2];

console.log(colorName); // 顯示'Green'由於上面代碼它的值是2