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

TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類型系統(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 選項(xiàng)并回車，輸入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時(shí)，params的類型聲明就會消失。這有沒有沒區(qū)別啊。其實(shí)不然，在將ts編譯成js的過程中，回去檢查代碼，如果代碼不符合要求就會報(bào)錯，但仍會生成js。
比如將上面的代碼改為：

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

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

因?yàn)閡ser是一個(gè)number類型而不是string類型，所以會報(bào)錯：

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

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

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

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

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

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

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

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

此時(shí)，會報(bào)錯

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

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

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

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

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

可選屬性

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

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

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

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

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

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

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

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

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

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

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ù)和類的時(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就是一個(gè)類數(shù)組類型，常見的類數(shù)組都有自己的接口定義，如 IArguments, NodeList, HTMLCollection 等

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

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

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

上面用到了一個(gè)箭頭函數(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;
}

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

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

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

let  a = "flag";
a = 1;

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

類型斷言

是指手動去指定一個(gè)值的類型，讓編譯器不會因?yàn)轭愋蛦栴}報(bào)錯。比如：

function getLength(something: string | number): number {
  if (something.length) { // 此處編譯時(shí)會報(bào)錯，因?yàn)閘ength屬性不是string和number的共有屬性
    return something.length;
  } else {
    return something.toString().length;
  }
}

改為：

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

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