1.TypeScript是什么？
是以javascript語言為基礎，是javascript的超集，
擴展了js，并添加了類型
可以在任何支持javascript的平臺運行。
-
TS不能被JS解析器直接執行
- 所以TS需要進行轉換，編譯為JS代碼，最后執行的還是js代碼
2. TS增加了什么
- 類型
- 支持ES的新特性
- 添加了ES不具備的特性
- 豐富的配置選項
- 強大的開發工具
3. TS開發環境的搭建
安裝nodejs
-
安裝 typescript
npm i typescript -g 創建一個ts文件 xxx.ts
-
使用tsc對ts文件進行編譯
- 進入命令行
- 進入ts文件所在目錄
- tsc xxx.ts
4. 類型
-
類型聲明
類型聲明是TS非常重要的一個特點
通過類型聲明可以指定ts中變量（參數、形參）的類型
指定類型后，當為變量賦值時，TS編譯器會自動檢查值是否符合類型聲明，符合則賦值，否則報錯。
簡而言之，類型聲明給變量設置了類型，使得變量只能存儲某種類型的值。
-
語法：
//聲明一個變量 let 變量:類型=值 let 變量:類型; 變量=值 //如果變量聲明和賦值是同時進行的，TS解析器會自動檢測變量的類型，會確定為值的類型，如果后面賦值為其他類型，則會提示錯誤。 let 變量=值 function(參數:類型,參數:類型):返回值類型{ }
- 類型
| 類型 | 例子 | 描述 |
|---|---|---|
| number | 1,33,2.5 | 任意數字 |
| string | "hi" | 任意字符串 |
| boolean | true,false | 布爾值true或false |
| 字面量 | 其本身 | 限制變量的值就是該字面量的值 |
| any | * | 任意類型 |
| unknown | * | 類型安全的any |
| void | 空值(undefined) | 沒有值或undefined |
| never | 沒有值 | 不能是任何值 |
| object | {name:"孫悟空"} | 任意的JS對象 |
| array | [1,2,3] | 任意js數組 |
| tuple | [4,5] | 元素，TS新增類型，固定長度數組 |
| enum | enum(A,B) | 枚舉，TS中新增類型 |
// 可以使用字面量進行類型聲明
let aa:10;
aa=10;
// 可以使用 | 來連接多個類型(聯合類型)
let bb: "male" | "female";
let cc : boolean | string;
cc=true;
cc="hello"
//* any表示任意類型，一個變量設置any之后相當于對該變量關閉了TS的類型檢測
// * 使用TS時，不建議使用any類型
// let dd:any;
// dd=false;
// dd=123;
//* 聲明變量時如果不指定類型，則TS解析器會自動判斷變量的類型為any (隱式的any)
let dd;
dd=20;
dd="123"
//* 如果一個變量的類型是any，它可以賦值給任意變量
// let e:string;
// e=dd;
// * 如果一個變量的類型是unknown，它不能賦值給有類型的變量
// * 它實際上是一個類型安全的any。
let e:string;
let eu:unknown;
e="hello ts"
eu="wjy";
if(typeof eu =="string"){
e=eu;
}
// * 類型斷言 可以用來告訴解析器變量的實際類型,以下兩個作用是一樣的
/**
* 語法：
* 變量 as 類型
* <類型> 變量
*/
e=eu as string
e=<string> eu;
// e=eu;
// * void 如果不設置函數的返回值，默認是void【沒有或為空】
// * 函數的返回值會自動類型檢測，如果在分支判斷中返回不同的值，則會返回值的類型就是 聯合類型
function sum1(num){
if(num>0){
return true;
}else{
return 123
}
}
//* void 用來表示空，以函數為例，就表示沒有返回值
// * void：空 | undefined | null
function fn():void{
// return undefined;
// return null;
return ;
}
// * never不能是任何值
// * 表示永遠不會返回結果
function fn2():never{
throw new Error("報錯了！")
}
// * 聯合值 f的只能為 10 20 30
let f: 10 | 20 | 30;
// * 聯合類型 ff的類型可以為 number string boolean
let ff: number | string | boolean;
1. object【對象】
// 方式一：
let obj:object;
// 或
let obj:{};
// object 表示一個js對象
let a :object;
a={
name:"hyz",
age:22
};
// * 因為萬物皆對象，所以實際用它是沒有什么意義的
a=function(){}
// 方式二
let b:{};
b={
name:"wjy",
age:20
}
//可以指定一個變量的類型是對象，可以指定這個對象的屬性有哪些，屬性的類型是什么
let 變量名 :{
屬性名:類型,
屬性名:類型
}
let b: {
name:string
};
b={
name:"wjy",
age:20,// b會報錯，因為指定的時候沒有指定age屬性
}
{}用來指定對象可以包含哪些屬性和屬性的類型
指定的屬性的個數，多了一個屬性也不行，少了一個屬性也不行
1.1 如果想指定屬性是可選的（可有可無）
可以在屬性名后面 加 ?
let b:{
name:string,
age?:number
}
b={
name:"wjy"
}
1.2 規定對象指定屬性是必須的，其他屬性是可選的
let c:{[propName:string]:any}
let c:{name:string,[propName:string]:any};
c={
name:"wjy",
age:20,
isFlag:true
}
2. 函數
// * 指定d的類型是一個函數，它的參數個數為兩個，兩個參數的類型都是number,返回值類型也為number
let d:(a:number,b:number)=>number;
d=function(n1,n2):number{
return n1+n2;
}
3. 數組
語法
let 變量名:類型[];
let 變量名:Array<類型>
// * 在ts中，數組一般存儲的是相同的類型的值
let e:string[];// e是一個字符串數組，只能存儲字符串
e=['a','b','c'];
let f:number[];// f是一個數組，存儲的是number類型
let g:Array<number>;//g是一個數組，存儲的是number類型
g=[1,2,3,4,5]
4. 元組(js無)
在js中是沒有這個概念的，它表示固定長度的數組
語法：
let 變量名:[類型,類型,...]
let h:[string,string];
h=["hello","world"];//不會報錯
h=["hello"];//報錯
h=["hello","world","wjy"]//報錯
賦值的時候不能多于指定的個數，也不能小于指定的個數
5. 枚舉(js無)
將所有可能的數據列出來
/**
* 枚舉 enum：將所有可能的數據列出來
*/
enum Gender{
Male=1,
Female=0,
}
let i:{name:string,gender:Gender};
i={
name:"孫悟空",
gender:Gender.Male
}
console.log(i.gender===Gender.Male);
console.log(Gender.Male);
6. &表示同時【語法】
&表示同時，表示都要滿足，
// * 表示j既是string類型，又是number類型，這個寫法其實一點意義都沒有
// * 因為一個變量不可以同時滿足兩個類型的要求
let j:string & number;
// 表示j是一個對象，對象里面的屬性既要有name屬性，又要有age屬性
let j:{name:string} & {age:number};
j={
name:"wjy",
age:20,
}
7. | 表示或【語法】
|表示或，表示只要滿足一個就可以了。
8. 類型的別名
可以使用type定義一個類型，可以是基本類型，也可以是由字面量組成的類型。
// 定義了一個類型
type myType= 1|2|3|4|5;
let k: myType ;
let l :myType;
k=1;
