我們?yōu)槭裁匆獙W(xué)習(xí)TypeScript ？
JS語(yǔ)言存在的問(wèn)題
先讓小伙伴看一段代碼，，下面代碼中存在錯(cuò)誤，試著找出存在的問(wèn)題，奧利給！??
//實(shí)現(xiàn)字符串首字母大寫(xiě)
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中常見(jiàn)的錯(cuò)誤
使用不存在的變量、函數(shù)或成員方法
把一個(gè)不確定的類(lèi)型當(dāng)做一個(gè)確定的類(lèi)型處理
在使用
null或者undefined的成員，JS開(kāi)發(fā)錯(cuò)誤排名第一個(gè)就是它當(dāng)一個(gè)函數(shù)返回一個(gè)對(duì)象，這個(gè)對(duì)象里有name屬性，但由于程序出錯(cuò)，沒(méi)有返回對(duì)象，再使用name屬性就會(huì)報(bào)錯(cuò)，如下：
在開(kāi)發(fā)的過(guò)程中，會(huì)遇到各種各樣的錯(cuò)誤，由于我們是人，不是機(jī)器，沒(méi)有辦法避免這樣的錯(cuò)誤，既然沒(méi)有辦法避免，那好歹在出錯(cuò)的地方提示我一下啊，這總不過(guò)分吧！但遺憾的是由于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)目而開(kāi)發(fā)的，文章開(kāi)頭的小例子出了點(diǎn)錯(cuò)誤，這還僅僅只是兩個(gè)函數(shù)，大型項(xiàng)目中寫(xiě)的函數(shù)何其多，這就增加了出錯(cuò)率。在js中單詞寫(xiě)錯(cuò)，那么明顯的錯(cuò)誤都不提示！其實(shí)是因?yàn)槟_本里面可以引用其它腳本，其它腳本中有可能有這個(gè)錯(cuò)誤的變量名，所以js不敢報(bào)錯(cuò)。那么JS為什么不能給我們提示錯(cuò)誤！這源于JS的兩個(gè)特點(diǎn)，一個(gè)是弱類(lèi)型，弱類(lèi)型指的是某個(gè)變量可以隨時(shí)更換類(lèi)型，但是像java，c#這些是不行的，它們是強(qiáng)類(lèi)型語(yǔ)言，不能隨意的更改類(lèi)型。
舉個(gè)栗子??：
我們給一個(gè)width寬度賦值為100，寫(xiě)了很多行代碼后，我們又將width賦值為'100px'，又寫(xiě)了很多代碼后，設(shè)置最終寬度的時(shí)候，可能腦子發(fā)熱，之前我到底是設(shè)置的是100，還是100px，最后不知不覺(jué)在最后結(jié)果上又拼接上'px'，最終報(bào)錯(cuò)了，要是早發(fā)現(xiàn)了那還好，要是等項(xiàng)目上線(xiàn)了再發(fā)現(xiàn)，那就嗝屁了??~
let width = 100;
//....許多行代碼
width = "100px"; //相當(dāng)于埋了一顆雷，什么時(shí)候爆炸不知道，要是等項(xiàng)目上線(xiàn)了，那完蛋了，嗝屁了~~
//...許多行代碼
document.querySelector("xxx").style.width = width + "px";
另一個(gè)特點(diǎn)是JS是解釋性語(yǔ)言，解釋性語(yǔ)言特點(diǎn)就是看一段代碼執(zhí)行一段，這就導(dǎo)致一個(gè)問(wèn)題，我們寫(xiě)的代碼必須要運(yùn)行出來(lái)才能知道哪里報(bào)錯(cuò)了，而不是我們?cè)诰帉?xiě)代碼的時(shí)候查找錯(cuò)誤
總結(jié)一下：
JS語(yǔ)言本身的特性，決定了該語(yǔ)言無(wú)法適應(yīng)大型復(fù)雜的項(xiàng)目 弱類(lèi)型：某個(gè)變量，可以隨時(shí)更換類(lèi)型 解釋性語(yǔ)言：錯(cuò)誤發(fā)生的時(shí)間是在運(yùn)行時(shí)
因此，前端開(kāi)發(fā)中大部分時(shí)間是在排錯(cuò)，而這些不起眼的錯(cuò)誤占據(jù)了我們大量的時(shí)間，并且這些修改字母的時(shí)間完全是浪費(fèi)生命，沒(méi)有任何的意義，也不能提高自身技術(shù)能力，畢竟在公司時(shí)間就是金錢(qián)，那么有什么能解決一下這個(gè)問(wèn)題嗎？
這時(shí)TypeScript出來(lái)了，TypeScript就能解決這些問(wèn)題，我們?yōu)槭裁匆獙W(xué)ts，實(shí)際上是為了提高我們開(kāi)發(fā)周期，提高效率，能夠縮減我們項(xiàng)目周期，少犯一些莫名其妙的錯(cuò)誤
TypeScript語(yǔ)言特點(diǎn)
TypeScript簡(jiǎn)稱(chēng)TS，TypeScript是JavaScript的超集，是一個(gè)可選的、靜態(tài)的類(lèi)型系統(tǒng)
超集
整數(shù)里面包括了正整數(shù)、負(fù)整數(shù)、0，那么就可以說(shuō)整數(shù)是正整數(shù)的超集。TypeScript是JavaScript的
超集，也就是說(shuō)TypeScript包含了JavaScript的所有功能，在此之上還增加了類(lèi)型系統(tǒng)
類(lèi)型系統(tǒng)
對(duì)代碼中所有的標(biāo)識(shí)符（變量、函數(shù)、參數(shù)、返回值）進(jìn)行類(lèi)型檢查
可選的
就是類(lèi)型系統(tǒng)可用可不用，除非你是神人，不寫(xiě)錯(cuò)誤代碼，不然沒(méi)有任何理由不使用TS
靜態(tài)的
靜態(tài)就是類(lèi)型檢查發(fā)生的時(shí)間點(diǎn)是在編譯的時(shí)候，而非運(yùn)行時(shí)，因此就解決了js是解釋性語(yǔ)言的問(wèn)題，代碼運(yùn)行之前有一個(gè)編譯的過(guò)程， 需要注意的是js代碼在運(yùn)行過(guò)程中TS是不參與類(lèi)型檢查的
無(wú)論是瀏覽器環(huán)境，還是node環(huán)境，無(wú)法直接識(shí)別ts代碼，可以只用tsc將ts代碼轉(zhuǎn)換為es代碼，tsc是TS編譯器
?? 好了， 以上就是我的分享，希望小伙伴們點(diǎn)贊 ?? 支持一下哦～ ??，我會(huì)更有動(dòng)力的 ??