摘要：聯(lián)合類型，指賦值的時候可以是聯(lián)合類型中的某一個。任意屬性允許創(chuàng)建對象的時候，定義接口中沒有的屬性。常見的類型推論，還提現(xiàn)在函數(shù)表達式中。

TypeScript 是 JavaScript 的一個超集，主要提供了類型系統(tǒng)和對 ES6 的支持

npm install -g typeScript

安裝完成查看版本：

tsc -v

typeScript文件的后綴不是js而是ts，如何將ts文件轉(zhuǎn)為js？

tsc test.ts

Visual Studio Code 內(nèi)置對typeScript的支持不需要在添加插件

Sublime Text 需要安裝TypeScript-Sublime-Plugin插件
按下Ctrl+Shift+P調(diào)出命令面板，輸入install 調(diào)出 Install Package 選項并回車，輸入TypeScript-Sublime-Plugin并選擇安裝。

WebStorm 高版本的貌似已經(jīng)內(nèi)置了typesCript插件，如果沒有可在settings——>plugins里搜索typeScript安裝。

其他編輯器省略...

function sayHello(person: string) {
    return "Hello, " + person;
}

let user = "Xcat Liu";
console.log(sayHello(user));

以上代碼與js不同之處在于params增加了類型的聲明。編譯成js時，params的類型聲明就會消失。這有沒有沒區(qū)別啊。其實不然，在將ts編譯成js的過程中，回去檢查代碼，如果代碼不符合要求就會報錯，但仍會生成js。
比如將上面的代碼改為：

function sayHello(person: string) {
    return "Hello, " + person;
}

let user = 123;
console.log(sayHello(user));

因為user是一個number類型而不是string類型，所以會報錯：

boolean 和js沒啥區(qū)別,值得注意的地方是使用new Boolean()創(chuàng)造的對象不是布爾值

string 沒區(qū)別

number 沒區(qū)別

null

let n: null = null

null類型的變量只能被賦值為null

undefined

let u: undefined = undefined

undefined類型的變量只能被賦值為undefined

viod

  let v:viod = unll || undefined; 

只能被賦值為null或者undefined,還可以用來聲明函數(shù)是沒有返回值的。

     function alertName(): void {
            alert("My name is xcatliu");
        }

any

可以賦值為任意類型，在聲明變量的時候如果沒有指定類型則默認為any.

let myFavoriteNumber: any = "seven";
myFavoriteNumber = 7;

值得注意的是在任意值上訪問任何屬性都是可以的，比如myFavoriteNumber.length,number類型是沒有l(wèi)ength屬性的，但是這時的myFavoriteNumber不是number類型而是any類型。

Union Types
聯(lián)合類型，指賦值的時候可以是聯(lián)合類型中的某一個。

let myFavoriteNumber: string | number;
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

但是當不確定變量是到底是哪個類型的時候，我們只能訪問聯(lián)合類型共有的方法。例如

function getLength(something: string | number): number {
  return something.length;//若改為something.toString();就不會報錯了，因為toString為共有方法
}

此時，會報錯

定義對象，要用interface了，這個interface可以看做是一個抽象類，將一些行為進行抽象，而具體如何行動需要由類去實現(xiàn)。
一個簡單的示例：

interface Person {
  name: string;
  age: number;
}

let xcatliu: Person = {
  name: "Xcat Liu",
  age: 25,
};

定義一個變量的類型為Person時，他的屬性必須遵循Perso接口的配置。接口屬性配置有如下幾種方式：

確定屬性
上面示例代碼接口屬性的定義方式就是確定屬性，在變量類型選擇為person時就必須聲明確定屬性并且類型相同

可選屬性

interface Person {
  name: string;
  age?: number;
}

在屬性后面增加一個？，表示此屬性為可選屬性，該屬性是可以不存在的，在聲明變量時，可省略。

let xcatliu: Person = {
  name: "Xcat Liu",
};

任意屬性
允許創(chuàng)建對象的時候，定義接口中沒有的屬性。但是值得注意的一點是確定屬性和可選屬性都必須是任意熟悉感的子屬性

interface Person {
  name: string;
  age?: number;
  [propName: string]: any; // 屬性名只能是string或number類型
}

此示例中，任意屬性的類型是any，string和number都是any的子屬性，所以不會報錯。

只讀屬性
只讀屬性是指只有在對象創(chuàng)建的時候?qū)ζ涞馁x值有效，之后對只讀屬性的賦值都不會生效并且會報錯。

interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

只要在需要聲明的只讀屬性前面加上readonly就可以了，這個readonly和ES6的const很像，const是在聲明變量的時候用，而readonly是在聲明屬性的時候用。

let xcatliu: Person = {
  id: 89757,
  name: "Xcat Liu",
  website: "http://xcatliu.com",
};
xcatliu.id = 9527; // 此處會報錯，提示不能修改一個只讀的屬性

let arr: number[] = [1,2,1,2];

聯(lián)合類型與數(shù)組結(jié)合：

let arr: (number|string)[] = [1,2,3,"4"];

any數(shù)組：

let arr: any[] = [1,"2",{a: "b"}];

泛型數(shù)組

泛型就是指在定義接口、函數(shù)和類的時候，先不指定具體的類型，而是在使用他的時候指定類型的一種特性。

class GenericNumber {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

在接口中使用數(shù)組：

interface NumberArray {
  [index: number]: boolean;
}
let fibonacci: NumberArray = [true,false];

類數(shù)組：

例如arguments就是一個類數(shù)組類型，常見的類數(shù)組都有自己的接口定義，如 IArguments, NodeList, HTMLCollection 等

function sum() {
    let args: number[] = arguments;
}
function sum() {
    let args: IArguments = arguments;
}

函數(shù)分為函數(shù)聲明和函數(shù)表達式，兩種方式如下：

// 函數(shù)聲明
function add(a:number,b:number):number{
    return a+b;
}
sum(1,2);
//如果沒有返回值
function logSum(a:number,b:number){
    console.log(a+b);
}
// 函數(shù)表達式
let sum = function(a:number,b:number):number{
    return a+b;
}
sum(1,2);
/*函數(shù)表達式的聲明其實只是對右側(cè)的匿名函數(shù)進行了類型定義，
而等號右邊的sum是通過**類型推論**（下面有講到）推斷出來的。也可以如下去寫:*/
let sum: (x: number, y: number) => number = function (x: number, y: number): number {
     return x + y;
};
//用第二種寫法去書寫函數(shù)表達式，可讀性很差，而且感覺沒有這樣寫的必要，不建議這樣來書寫。

上面用到了一個箭頭函數(shù)，是es6的語法。

let sum = (a,b) => a+b;  
let sum = function(a,b) {
    return a+b;
}

在接口中定義函數(shù)：

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  return source.search(subString) !== -1;
}

像上面這樣感覺有點多余。
函數(shù)參數(shù)：

function push(
    arg1:string, // 確定參數(shù)
    arg2？: string,//可選參數(shù)
    lastName: string = "Liu",//參數(shù)默認值
    ...items: any[]//剩余參數(shù)
) {
  items.forEach(function(item) {
    array.push(item);
  });
}

類型推論
是指沒有指定類型時，會依照類型推論的規(guī)則去推斷出類型。

let  a = "flag";
a = 1;

比如上面的代碼，沒有給a指定類型，在賦值為‘flag’的時候，類推了它的類型為string，在進行a=1的賦值操作的時候，就會報錯。
常見的類型推論，還提現(xiàn)在函數(shù)表達式中。

類型斷言

是指手動去指定一個值的類型，讓編譯器不會因為類型問題報錯。比如：

function getLength(something: string | number): number {
  if (something.length) { // 此處編譯時會報錯，因為length屬性不是string和number的共有屬性
    return something.length;
  } else {
    return something.toString().length;
  }
}

改為：

function getLength(something: string | number): number {
  if ((something).length) { // 此時編譯器將把這里的something當作string類型來處理
    return (something).length;
  } else {
    return something.toString().length;
  }
}

注意： 斷言只能是斷言為聯(lián)合類型中的類型。比如此處只能斷言為string或者number.