?vue 轉(zhuǎn)向 react?，正好vue3.0 也用到TypeScript? ?? 所以需要抓緊時間學(xué)習(xí)?TypeScript 。
教學(xué)視頻 是?千鋒前端TypeScript教程陸榮濤老師主講（陸神頂配版TS入門教程）
（可能之前都有一些基礎(chǔ) 但是比較凌亂? 現(xiàn)在想系統(tǒng)性的學(xué)習(xí)一下，而且視頻 我都是看完一遍 第二遍的時候才開始記筆記? 如果有小伙伴 想學(xué)習(xí)的話 根據(jù)自己實際情況 學(xué)習(xí)就行）
學(xué)習(xí)視頻? --->??千鋒前端TypeScript教程陸榮濤老師主講
?TypeScript? 簡稱 ts
?Javascript 簡稱 js
什么是TypeScript?
ts 是 js 的一個超集，可以在ts 中使用 js 之外的擴展 語法，同時借助ts 對面向?qū)ο?和靜態(tài)類型的 良好支持，可以編寫更大型更健康的項目。
我個人理解ts 把它理解成 預(yù)編譯 也行 或者把他理解成 對你所使用的數(shù)據(jù)增加類型判斷等 從而可以在運行代碼之前就可以檢驗出代碼是否正確，從而達(dá)到了更早發(fā)現(xiàn)問題的目的。
關(guān)于 ts 的優(yōu)缺點
優(yōu)點：
提供可選的強靜態(tài)類型
更早發(fā)現(xiàn) BUG
代碼可預(yù)測
豐富的 IDE 支持
方便重構(gòu)
提供面向?qū)ο蟮膶懛?/p>
缺點：
不是真正的靜態(tài)類型
有一定的學(xué)習(xí)成本
需要寫更多的代碼
需要編譯
TS 常用數(shù)據(jù)類型（基礎(chǔ)篇 且 必用）
通常聲明一個變量 以 ：類型? 為準(zhǔn)? 如 數(shù)字類型? ?let num:number = 6;(在以后的變量使用中 如果num的數(shù)據(jù)類型發(fā)生變化（除了null undefined 外） 則代碼編譯的時候就會警告，這就是ts 不同于js 的地方之一)
TS中的常用的數(shù)據(jù)類型有 （內(nèi)置類型）Number, String, Boolean, Null, Undefined， Void, enum，Array，Any，Object，元組， 接口等
數(shù)字類型
例如 let decimal: number = 6;
字符串
let color: string = "blue";
布爾類型
let isDone: boolean = true;
let bool1: Boolean = new Boolean();
Null和Undefined
null和undefined是所有類型的子類型，可以賦值給 任意類型的變量
undefined表示未定義的值，一個變量最原始的狀態(tài)，例如聲明了變量沒有賦值
null是空值的意思，表示一個對象被人為的重置為空對象，相當(dāng)于棧中的變量沒有指向堆中的內(nèi)存對象。
let num: number = undefined;
void類型（表示沒有任何返回值的函數(shù);表示沒有任何類型）
function warnUser(): void {
console.log("This is my warning message");
}
enum枚舉類型
enum Color {Red, Green, Blue}
let c: Color = Color.Greent
enum Color {Red = 1, Green, Blue}
let c: Color =color.green
數(shù)組
數(shù)組的項中不允許出現(xiàn)其他的類型； 有時候可以通過any類型來允許出現(xiàn)任意類型
類型+方括號的表示法 例如 number[], 這種類型的數(shù)組里面是不允許有除了number之外的類型
數(shù)組泛型 Array+ <類型> 例如 Array<number>
接口表示數(shù)組， 利用索引簽名
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
interface selfArray {
[index: number]: numer
}
let list3: selfArray = [1,2,3]
元組（數(shù)組是合并了相同類型的對象， 而元組Tuple合并了不同類型的對象）
let list:[number, string] = [1, 'a']
Any類型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
Object 類型
Object類型的變量只是允許你給它賦任意值 - 但是卻不能夠在它上面調(diào)用任意的方法，即便它真的有這些方法
let prettySure: Object = 4;
prettySure.toFixed(); 這行會直接報錯
安裝編輯器? 編譯環(huán)境
我個人還是習(xí)慣用webstrom 編輯器
新建 xxx.ts 文件
在該文件中輸入console.log('這是一個簡單的測試！');
然后在該文件下打開termial? ?輸入命令 tsc xxx.ts? 后 會生成一個與之相對應(yīng)的js 文件 ,然后再執(zhí)行 node xxx.js 控制臺輸出內(nèi)容。這樣一個簡單的ts 文件轉(zhuǎn)化 以及輸出 就完成了。
這里事先要說一下 將來可能會看到 xxx.ts 的文件 也會看到 xxx.tsx 文件 ,這個問題 問過大佬 大佬說?ts是js文件（通過編譯轉(zhuǎn)化成js文件） tsx是寫代碼模版的。日后會看到很多 先溫習(xí)一下基礎(chǔ)知識。
優(yōu)化編譯
解決 ts 和 js 的代碼沖突問題
當(dāng) ts 和 js 中出現(xiàn)相同方法名稱或者變量名稱的時候 會出現(xiàn)警告。
如圖
tsc --init? ?執(zhí)行命令后 會在文件下生成?tsconfig.json 文件里面有各種配置項 （執(zhí)行后會發(fā)現(xiàn) 方法中傳入的參數(shù)會報警告，原因是沒有定義 參數(shù)的類型）
tsc --watch? 執(zhí)行命令后 可以實時檢查代碼編譯情況，包括報錯情況。
tsc -noEmitOnError xxx.ts 文件 執(zhí)行該命令的時候 當(dāng)ts文件中的方法出現(xiàn)錯誤的時候 文件不可以編譯成js 文件。（日后項目優(yōu)化的時候 會用到）
在ts 文件中有類型的增加 如?
function greet(person:string,date:Date){
console.log(`Hello ${person}, Today is ${date.toDateString()}`);
}
中的?person:string
在編譯成js 代碼后 沒有出現(xiàn) 后面的 :string
以下是代碼部分 我直接貼出來 有空的小伙伴 勤加練習(xí)。
//字符串
let str:string ='hello world!';
//數(shù)值
let num:number =100;
//布爾
let bool:Boolean =true;
//數(shù)組? （有兩種寫法） :type[]? :Array<type>(泛型寫法)
let arr01:number[] = [1,2,3];//數(shù)組中必須是 number 類型的值
let arr02:Array = [1,2,3];
//特殊類型 any? (可以將任意類型的值 賦值給 對應(yīng)的變量)? 如下
let obj:any = {
x:0
};
obj ='any 也可以賦值成 字符串。'
//函數(shù)? :void 意思是 默認(rèn)啥也不返回? name: string? 類型注釋? :void 返回值類型注釋
function greet(name:string):void{
console.log(name)
}
greet('字符串參數(shù)。')
//也可以 寫入 number 返回值類型
function returnNum(x:number):number{
return x>1?x:1
}
returnNum(50);
//匿名函數(shù)? 會自動指定編譯類型 names 中有不同類型的值 forEach輸出的時候
// 就可以正常輸出 不報任何錯誤
//值得注意的是? 當(dāng)我們打印 x.toUpperCase()的 時候就會報錯toString() 不報錯
let names = ['1','2',3];
names.forEach(x =>{
console.log(x.toString());
})
//對象類型
function printCoord(pt:{x:number,y:number}){
console.log(pt.x)
console.log(pt.y)
}
printCoord({x:1,y:1});
// 對象類型中 傳入的參數(shù) 是可選 的? 如下 last? 就是 用戶 可傳 可不傳的 值? 不可以額外傳入 沒有接收的值
function printName(obj:{first:string,last?:string}){
console.log(obj.first)
console.log(obj.last ?obj.last:'last 沒有值');
//等同于上面的三元表達(dá)式
? ? console.log(obj.last?.toString())
}
printName({first:'對象類型中傳入last值',last:'傳入last值。'});
printName({first:'對象類型中不傳入last值'});
//聯(lián)合類型? 兩個或者多個其他類型組成的類型
// 既可以是 字符串類型 也可以是 數(shù)值類型
function printId(id:string |number ){
console.log(id);
// 類型縮小 也叫類型判斷? 其實就是 事先對傳過來的值 增加一個判斷 然后根據(jù)類型的不同做不同的事兒
? ? if(typeof id ==="string"){
console.log('傳過來的是個字符串類型。')
}else{
console.log('傳過來的是個數(shù)值類型。')
}
}
printId(100)
printId('100')
// 既可以傳入 字符串? 也可以傳入 字符串類型的數(shù)組
// 這里 主要是想練習(xí)一下 Array.isArray(xxx) 的方法，以前都是通過 長度判斷是否為字符串的
function welcomePeople(x:string[] |string){
if(Array.isArray(x)){
console.log('傳過來的是個字符串類型的數(shù)組。')
}else {
console.log('傳過來的是個字符串。')
}
}
welcomePeople(['1','2','3']);
welcomePeople('傳入字符串。');
// 類型別名? 通過 type? 直接定義? 對象 數(shù)值 字符串 三種類型
type obj = {
x:number,
y:number
};
type Id =number;
type name =string;
type arr = Boolean;
function isObjType(point:obj){
console.log(point.x)
console.log(point.y)
}
isObjType({x:0,y:1});
function isString(x:Id){
console.log(x)
}
// 自定義返回值 方式? 之前的:void
type useArr =string;
function isMethods(str:string):useArr{
return str;
}
isMethods('返回一個字符串。')
