TypeScript是什么
- TypeScript 是一種由微軟開發(fā)的自由開源的編程語言，他是JavaScript的一個(gè)超集，擴(kuò)展了JavaScript的語法，主要提供了類型系統(tǒng)和對 ES6 的支持。
- TypeScript 設(shè)計(jì)目標(biāo)是開發(fā)大型應(yīng)用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運(yùn)行在任何瀏覽器上。
JavaScript 與 TypeScript 的區(qū)別
- TypeScript 是 JavaScript 的超集，擴(kuò)展了 JavaScript 的語法，因此現(xiàn)有的 JavaScript 代碼可與TypeScript 一起工作無需任何修改，TypeScript 通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。
- TypeScript 可處理已有的 JavaScript 代碼，并只對其中的 TypeScript 代碼進(jìn)行編譯。
TypeScript 的優(yōu)勢
- 強(qiáng)大的IDE支持：體現(xiàn)在三個(gè)特性上，1.類型檢查，在TS中允許你為變量指定類型。2.語法提示。3.重構(gòu)。
- Angular2、vue3的開發(fā)語言
TypeScript 的缺點(diǎn)
- 有一定的學(xué)習(xí)成本，需要理解接口（Interfaces）、泛型（Generics）、類（Classes）、枚舉類型（Enums）等前端開發(fā)可能不是很熟悉的知識點(diǎn)
TypeScript安裝
TypeScript 的命令行工具安裝方法如下：
$ npm install -g typescript
以上命令會在全局環(huán)境下安裝 tsc 命令，安裝完成之后，我們就可以在任何地方執(zhí)行 tsc 命令了。
查看版本
$ tsc -v
編譯一個(gè) TypeScript 文件
編譯一個(gè) TypeScript 文件很簡單，
tsc hello.ts
使用 TypeScript 編寫的文件以 .ts 為后綴
TypeScript 用法
使用 : 指定變量的類型，: 的前后有沒有空格都可以
let num:number = 15;
num(變量名）:number(類型） = 15（具體值）
表示定義一個(gè)變量num，指定類型為number;
let str:string = 'abc';
表示定義一個(gè)變量str，指定類型為string;
為什么要用到TS
定義一個(gè)函數(shù)計(jì)算二個(gè)數(shù)據(jù)的合計(jì)
function sum(x,y){
if(typeof x != 'number') { //對于形參的類型要添加轉(zhuǎn)換
x = parseInt(x);
}
return x+y
};
sum('1',2);
TS的方式，直接約束了類型
function sum2(x:number,y:number){
return x+y
};
各類型定義
1、類型定義
let flag:boolean = false; //布爾類型
let num:number = 15; //數(shù)值類型
let str:string = 'abc'; //字符串類型
let str2:string=`hello,${str}`;
let msg:string = `hello,${str},${num}`;
let u: undefined = undefined;
let n: null = null;
任意值
如果是一個(gè)普通類型，在賦值過程中改變類型是不被允許的，任意值（Any）用來表示允許賦值為任意
類型。
let a1: string = 'seven';
a1 = 7;//error
但如果是 any 類型，則允許被賦值為任意類型。
let a2: any = 'seven';
a2 = 7;
變量如果在聲明的時(shí)候，未指定其類型，那么它會被識別為任意值類型
let a3;
a3 = 'seven';
a3 = 7;
相當(dāng)于
let a3:any;
a3 = 'seven';
a3 = 7;
聯(lián)合類型
表示取值可以為多種類型中的一種
let a4: string | number;
a4 = 'seven';
a4 = 7;
a4 = true; 不行
2、數(shù)組類型的定義
在 TypeScript 中，數(shù)組類型有多種定義方式，比較靈活。
最簡單的方法是使用「類型 + 方括號」來表示數(shù)組：
let arr: number[] = [1, 2, 3, 4, 5];
數(shù)組的項(xiàng)中不允許出現(xiàn)其他的類型
let arr: number[] = [1, '2', 3, 4, 'a']; //不行
泛型（Generics）是指在定義函數(shù)、接口或類的時(shí)候，不預(yù)先指定具體的類型，而在使用的時(shí)候再指定類型的一種特性。
泛型變量<T> ，<T>表示任何類型
泛型 和 任意參數(shù)的區(qū)別可參考
TypeScript里的類型為any和泛型的區(qū)別 - 簡書 (jianshu.com)
let arr:Array<number> =[1,2,3];
定義多個(gè)類型
let arr:Array<number|string> =['1',2,3];
3、對象的類型—接口
在面向?qū)ο笳Z言中，接口（Interfaces）是一個(gè)很重要的概念，它是對行為的抽象
接口（Interfaces）可以用于對「對象的形狀（Shape）」進(jìn)行描述。
接口的定義
接口首字母大寫
interface IPerson {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 18
};
定義的變量比接口少了一些屬性是不允許的
接口能否更靈活？
可選屬性：
interface Person2 {
name: string;
age?: number;
}
let tom: Person = {
name: 'Tom',
age: 18 //可用可不用
};
任意屬性 ：一個(gè)接口允許有任意的屬性
interface Person3 {
name: string;
age?: number;
[propName: string]: any;
};
需要注意的是，一旦定義了任意屬性，那么確定屬性和可選屬性都必須是它的子屬性
4、函數(shù)的類型定義
一個(gè)函數(shù)有輸入和輸出，要在 TypeScript 中對其進(jìn)行約束，需要把輸入和輸出都考慮到
(x:輸入?yún)?shù)類型,y:輸入?yún)?shù)類型) : number(輸出參數(shù)類型)
// 有返回值 return 時(shí)
function sum1(x: number, y: number): number {
return x + y;
}
// 無返回值
function sum2(x: number, y: any): void {
let a = 0;
if (x > y) {
a = 100;
} else {
a = 10;
}
}
參數(shù)默認(rèn)值
function sum3(x: number=5, y: number): number {
return x + y;
}
let s1 = sum3(1, 2);
可選參數(shù)
function sum4(x: number, y?: number): number[] {
return [x,y]
}
let s2 = sum4(1);
