TS 是 JS的超集，它可以編譯成純JS。
TS可以在任何瀏覽器、任何操作系統、任何平臺上運行
TS 數據類型
類型註解
let flag : boolean = false;
變量後面跟的冒號後面的類型就是這個變量的類型註解。類型的註解是可選的，不加就變成了JS，因爲TS設計目標就是：兼容JS，減少JS遷移TS的成本。
| 類型 | 描述 |
|---|---|
| Boolean | 布爾類型 |
| Number | 數字類型 |
| String | 字符串類型 |
| Array | 與JS相同; 增加了泛型數組, 元組(Tuple) |
| Enum | enum類型是爲了給一個數字集合更友好地命名 |
| any | any類型可以表示任意JavaScript值 |
| void | void就是any的對立面，即所有類型都不存在的時候。你會在一個沒有返回值的函數看到它 |
泛型類型
TS 元組
數組中元素的數據類型都一般是相同的（any[] 類型的數組可以不同），如果存儲的元素數據類型不同，則需要使用元組。
元組中允許存儲不同類型的元素，元組可以作爲參數傳遞給函數。
var mytuple = [10,"Runoob"]; //元組
- push() 向元組添加元素，添加在最後面。
- pop() 從元組中移除元素（最後一個），並返回移除的元素。
TypeScript 聯合類型
聯合類型（Union Types）可以通過管道(|)將變量設置多種類型，賦值時可以根據設置的類型來賦值。
注意：只能賦值指定的類型，如果賦值其它類型就會報錯。
創建聯合類型的語法格式如下：（Type1|Type2|Type3 ）
var arr:number[]|string[]; 或 var val:string|number
TS generator函數
generator是控制函數的執行過程，手動暫停和恢復代碼運行。（function* add(){}）
yield 相當於對代碼打斷點，每次調用 next()方法,函數往下運行一下，直到遇到yield或者return ;
function* doSomething() {
console.log("start");
yield;
console.log("finish");
}
//調用方式需要注意一下，此案例中，他不能直接調用doSomething，需要聲明個變量fun1,通過變量fun1.next()去調用該方法
var fun1 = doSomething() ;
fun1.next();//每調取一次next的方法，這個函數就會被調用一次到yield,以此類推
fun1.next();
function* getStockPrice(stock){
while(true){
yield Math.random()*100;
}
}
var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;
var price = 100;
while(price>limitPrice){
price = priceGenerator.next().value;
console.log(`the generator return ${price}`);
}
console.log(`buying at ${price}`);
TS destructuring 析構表達式
destructuring 通過表達式將對象或數組拆解成任意數量的變量；
function getStock{
return {
code:'123',
price:12,
goods:{
goods1:10,
goods2:20,
goods3:30
}
}
}
var {code:codex,price,goods:{goods3}} = getStock();
console.log("code:"+codex) // 123
console.log("price:"+price) //12
console.log("goods:"+goods3) //30
var array = [1,2,3,4];
function getArrayItem(num1,num2,...others){
console.log(num1) //1
console.log(num2) //2
console.log(others) //[3,4]
}
getArrayItem(array)
TS as 類型斷言
TS AllowJS 選項 (–allowJS)
TypeScript 1.8 開始支持了 AllowJS 選項,現在可以直接引用 js 文件而不需要對應的 .d.ts 文件也不會報錯（沒有那麼良好的類型提示支持）。
TS 形參
function getName<T,K>(name:T,age?:K){
return `name: ${name} ----------`+(age?`age: ${age}`:'年齡保密')
}
alert(getName<string,number>('123'))
ts函數重載
java中方法的重載：重載指的是兩個或者兩個以上同名函數，但它們的參數不一樣，這時會出現函數重載的情況。
typescript中的重載：通過爲同一個函數提供多個函數類型定義來試下多種功能的目的。
function getInfo(name:string):string;
function getInfo(name:string,age:number):string;
function getInfo(name:any,age?:any):any{
if(age){
return '我叫：'+name+'我的年齡是'+age;
}else{
return '我叫：'+name;
}
}
// alert(getInfo('zhangsan')); /*正確*/
// alert(getInfo(123)); 錯誤
// alert(getInfo('zhangsan',20));
TS keyof
keyof操作符，用於類型查詢
export interface IUser {
email: string;
password: string;
address: string;
phone: string;
}
type UserProps = keyof IUser;
相關使用：
安裝使用
- 安裝
npm install -g typescript
- 編譯
tsc helloworld.ts
配置文件tsconfig.json （tsc --init）
TypeScript使用tsconfig.json文件管理工程配置。包含哪些文件或進行哪些檢查的相關配置。
{
"compilerOptions": {
"outDir": "./built", //生成的所有文件放在built目錄下（通過outDir）
"allowJs": true, //接受JavaScript做爲輸入（通過allowJs）
"target": "es5" //將JavaScript代碼降級到低版本比如ECMAScript 5（通過target）。
},
"include": [
"./src/**/*" //讀取所有可識別的src目錄下的文件（通過include）
]
}
TS ? 和 !
? 用來檢查 問號前面的變量爲 null 或 undefined 時，程序不會出錯。
stu3: Student;
<h1>stu3 id{{stu3?.id}}</h1> // stu3 id
<h1>stu3 name{{stu3?.name}}</h1> // stu3 name
! 用來檢查 感嘆號後面的變量爲 null 或 undefined 時， 程序不會出錯。
stu2: Student = {
id: 1,
name: undefined,
age: 3
};
<h1>stu2 name {{stu2!.name}}</h1> // stu2 name
<h1>stu2 id {{stu2!.id}}</h1> // stu2 id 1