我們?yōu)槭裁匆獙W(xué)習(xí)TypeScript ？

JS語言存在的問題

先讓小伙伴看一段代碼，，下面代碼中存在錯(cuò)誤，試著找出存在的問題，奧利給！??

//實(shí)現(xiàn)字符串首字母大寫
function getStr() {
     if(Math.random() < 0.5){
          return "hello word";
     }
     return 404;
}
 function getUpperCase(str) {
     let result = srt.Split(" ").map((item) => {
            return item[0].toupperCase() + item.slice(1);
         });
            console.log(reuslt.join(""));
  }
 getUpperCase(getstr());

JS中常見的錯(cuò)誤

• 使用不存在的變量、函數(shù)或成員方法

• 把一個(gè)不確定的類型當(dāng)做一個(gè)確定的類型處理

• 在使用null或者undefined的成員，JS開發(fā)錯(cuò)誤排名第一個(gè)就是它

  當(dāng)一個(gè)函數(shù)返回一個(gè)對(duì)象，這個(gè)對(duì)象里有name屬性，但由于程序出錯(cuò)，沒有返回對(duì)象，再使用name屬性就會(huì)報(bào)錯(cuò)，如下：

  

在開發(fā)的過程中，會(huì)遇到各種各樣的錯(cuò)誤，由于我們是人，不是機(jī)器，沒有辦法避免這樣的錯(cuò)誤，既然沒有辦法避免，那好歹在出錯(cuò)的地方提示我一下啊，這總不過分吧！但遺憾的是由于JS本身的缺憾導(dǎo)致它做不到。

JS的缺憾：

1995年5月，Brendan Eich連續(xù)花了10天時(shí)間設(shè)計(jì)了第一個(gè)Mocha實(shí)現(xiàn)的原型。JavaScript設(shè)計(jì)之初只是為了補(bǔ)充Java的，在瀏覽器上做一些小的效果，并不是為了做大型復(fù)雜項(xiàng)目而開發(fā)的，文章開頭的小例子出了點(diǎn)錯(cuò)誤，這還僅僅只是兩個(gè)函數(shù)，大型項(xiàng)目中寫的函數(shù)何其多，這就增加了出錯(cuò)率。在js中單詞寫錯(cuò)，那么明顯的錯(cuò)誤都不提示！其實(shí)是因?yàn)槟_本里面可以引用其它腳本，其它腳本中有可能有這個(gè)錯(cuò)誤的變量名，所以js不敢報(bào)錯(cuò)。那么JS為什么不能給我們提示錯(cuò)誤！這源于JS的兩個(gè)特點(diǎn)，一個(gè)是弱類型，弱類型指的是某個(gè)變量可以隨時(shí)更換類型，但是像java，c#這些是不行的，它們是強(qiáng)類型語言，不能隨意的更改類型。

• 舉個(gè)栗子??：

我們給一個(gè)width寬度賦值為100，寫了很多行代碼后，我們又將width賦值為'100px'，又寫了很多代碼后，設(shè)置最終寬度的時(shí)候，可能腦子發(fā)熱，之前我到底是設(shè)置的是100，還是100px，最后不知不覺在最后結(jié)果上又拼接上'px'，最終報(bào)錯(cuò)了，要是早發(fā)現(xiàn)了那還好，要是等項(xiàng)目上線了再發(fā)現(xiàn)，那就嗝屁了??~

 let width = 100;
 //....許多行代碼
 width = "100px"; //相當(dāng)于埋了一顆雷，什么時(shí)候爆炸不知道，要是等項(xiàng)目上線了，那完蛋了，嗝屁了~~
 //...許多行代碼

 document.querySelector("xxx").style.width = width + "px";

另一個(gè)特點(diǎn)是JS是解釋性語言，解釋性語言特點(diǎn)就是看一段代碼執(zhí)行一段，這就導(dǎo)致一個(gè)問題，我們寫的代碼必須要運(yùn)行出來才能知道哪里報(bào)錯(cuò)了，而不是我們?cè)诰帉懘a的時(shí)候查找錯(cuò)誤

總結(jié)一下：

1. JS語言本身的特性，決定了該語言無法適應(yīng)大型復(fù)雜的項(xiàng)目
2. 弱類型：某個(gè)變量，可以隨時(shí)更換類型
3. 解釋性語言：錯(cuò)誤發(fā)生的時(shí)間是在運(yùn)行時(shí)

因此，前端開發(fā)中大部分時(shí)間是在排錯(cuò)，而這些不起眼的錯(cuò)誤占據(jù)了我們大量的時(shí)間，并且這些修改字母的時(shí)間完全是浪費(fèi)生命，沒有任何的意義，也不能提高自身技術(shù)能力，畢竟在公司時(shí)間就是金錢，那么有什么能解決一下這個(gè)問題嗎？

這時(shí)TypeScript出來了，TypeScript就能解決這些問題，我們?yōu)槭裁匆獙W(xué)ts，實(shí)際上是為了提高我們開發(fā)周期，提高效率，能夠縮減我們項(xiàng)目周期，少犯一些莫名其妙的錯(cuò)誤

TypeScript語言特點(diǎn)

TypeScript簡稱TS，TypeScript是JavaScript的超集，是一個(gè)可選的、靜態(tài)的類型系統(tǒng)

• 超集

  整數(shù)里面包括了正整數(shù)、負(fù)整數(shù)、0，那么就可以說整數(shù)是正整數(shù)的超集。TypeScript是JavaScript的超集，也就是說TypeScript包含了JavaScript的所有功能，在此之上還增加了類型系統(tǒng)

• 類型系統(tǒng)

對(duì)代碼中所有的標(biāo)識(shí)符（變量、函數(shù)、參數(shù)、返回值）進(jìn)行類型檢查

• 可選的

就是類型系統(tǒng)可用可不用，除非你是神人，不寫錯(cuò)誤代碼，不然沒有任何理由不使用TS

• 靜態(tài)的

靜態(tài)就是類型檢查發(fā)生的時(shí)間點(diǎn)是在編譯的時(shí)候，而非運(yùn)行時(shí)，因此就解決了js是解釋性語言的問題，代碼運(yùn)行之前有一個(gè)編譯的過程， 需要注意的是js代碼在運(yùn)行過程中TS是不參與類型檢查的

無論是瀏覽器環(huán)境，還是node環(huán)境，無法直接識(shí)別ts代碼，可以只用tsc將ts代碼轉(zhuǎn)換為es代碼，tsc是TS編譯器

?? 好了， 以上就是我的分享，希望小伙伴們點(diǎn)贊 ?? 支持一下哦～ ??，我會(huì)更有動(dòng)力的 ??