TS是什么？
- TS是一門以JS為基礎構建的語言
- TS是一個JS的超集
- TS可以在任何支持JS的平臺中執(zhí)行
- TS擴展了JS饺著，并添加了類型定義
- TS不能被JS解析器直接執(zhí)行帆精，就是說TS的代碼不能在瀏覽器運行，想要瀏覽器認識這份代碼最爬，就需要安裝一個TS的編譯器铃岔，該編譯器可以將TS代碼編譯轉換成瀏覽器認識的JS
TS增加了什么汪疮？
- TS中增加了類型定義
為什么這么說呢？學過JS的都知道毁习，JS原本不就有Number智嚷、String、Array纺且、Object盏道、Boolean這些類型，為什么TS也會有一個類型定義载碌？這2者不是一樣的嗎猜嘱？
下面這張圖就很容幫我理解區(qū)分JS和TS的類型定義：
從上圖可以知道，JS其實定義的僅僅只是賦值類型嫁艇，并沒有定義變量的類型泉坐，而變量的類型既然而然地就需要有TS來定義啦！
那么裳仆，現在就很清晰地知道JS中的類型和TS中的類型究竟針對誰了，便是各司其職罷了孤钦，賦值定義類型交給JS歧斟，變量定義類型交給TS。
此外偏形，TS也增加JS原來沒有的類型静袖，例如元組（Tuple），抽象類俊扭，枚舉队橙，接口(interface)
TS支持ES的新特性
TS中添加了ES不具備的新特性
例如抽象類，接口萨惑，裝飾器
- TS提供了豐富的配置選項
一份TS代碼可以編譯成任意版本的JS代碼捐康，解決了瀏覽器的兼容性問題。
- TS提供了強大的開發(fā)工具
代碼報錯提示
JS的缺點庸蔼，為什么要學習TS
let a = 10
a = 'book'
a = true
a = []
function(a,b){
console.log(a,b)
}
從上面一個demo可以看出解总，a變量沒有進行類型規(guī)范，所以導致了這個a變量在js中是動態(tài)類型姐仅，也就是說a變量是根據賦值來決定自身的花枫，它可以是Number類型刻盐、String類、Array類劳翰、Boolean類等
換句話說敦锌，你給a變量賦值什么類，a就是什么類型佳簸，這就是JS的缺陷,而這種缺陷在函數傳參中最為明顯乙墙，而TS的出現就是彌補了JS的缺陷.
在TS比如我指定a變量是一個Number型，那就不能給a變量賦值一個字符串溺蕉，因為在TS語法中已經定義了a變量屬于什么類型伶丐。
安裝TypeScript
- cmd窗口使用npm安裝
npm install -g typescript
- 檢測是否安裝成功
tsc -V
TS語法使用注意事項
-
文件后綴名為.ts
- ts的文件中如果直接書寫js語法的代碼，那么在html文件中直接引入ts文件疯特，在谷歌瀏覽器中是可以直接使用的哗魂。
- 如果ts文件中有了ts的語法代碼，那么就需要把這個ts文件編譯成js文件漓雅，在html文件中引入js文件來使用录别。
- ts文件中的變量使用let進行修飾，編譯的js文件中的修飾符就變成var了邻吞。
- ts文件中函數中的形參组题，如果使用了某個類型進行修飾，最終在編譯的js文件中是沒有這個類型的抱冷。
- ts文件編譯成js文件:運行 tsc 文件名.ts
demo.ts手動編譯成demo.js
html引入使用
ts在vscode中自動編譯
-
準備一個項目文件夾
- 終端運行 tsc --init 崔列，生成一個tsconfig.json文件
tsc --init
- 修改tsconfig.js配置
修改輸出的編譯目錄：把ts文件最終編譯成js文件放置在./js目錄下(outDir默認是被注掉的，需要去掉注釋)
"outDir": "./js",
關閉嚴格模式
"strict": false,
-
終端監(jiān)視
選中tsconfig.json文件旺遮，點擊終端赵讯，運行任務
點擊顯示所有任務
選擇ts監(jiān)視
自動編譯完成
html引入./js目錄下生成的.js文件
類型注解
-
為函數或者變量添加約束
-
智能錯誤信息提示（當鼠標浮動在紅色波浪線時顯示）
ts 接口約束
-
接口通過interface關鍵字定義，是一種約束能力耿眉。
TS中類的書寫
(()=>{
//定義一個接口
interface IPerson{
firstName: string //姓
lastName: string //名
}
//定義一個class類
class Person {
//定義公共的字段（屬性）
firstName: string //姓
lastName: string //名
fullName: string //姓名
//定義一個構造器函數
constructor(firstName: string,lastName: string){
//更新屬性數據
this.firstName = firstName
this.lastName = lastName
}
}
//定義函數
function showFullName(person:IPerson) {
return person.firstName + '' + person.lastName
}
//實例化對象
const person = new Person('宋','小畫')
console.log();
})()
自動編譯成的js
