封面圖片來源： Daria Kraplak

目錄

簡介
TypeScript 的目的
比較 JavaScript 和 TypeScript
結(jié)論

介紹

在深入了解 TypeScript 是什么之前，我們先來談?wù)?JavaScript！你知道 JavaScript 是 1995 年發(fā)明的嗎？我也沒有。

這段時間，它滿足了人們?yōu)g覽器中處理簡單網(wǎng)頁的需求。自 1999 年以來，JavaScript 得到了改進，可以處理我們現(xiàn)在構(gòu)建的有趣的動態(tài)網(wǎng)頁。此外，它是一種相當(dāng)易于使用的編程語言，因為它對數(shù)據(jù)類型非常靈活（這里略有劇透）。

但是，有一個問題沒有得到解決。諷刺的是，JavaScript 易于使用的原因正是它可能破壞我們的代碼的原因。這就是 TypeScript 可以幫助我們的地方！

TypeScript 的目的

TypeScript 是 JavaScript 的超集。這意味著什么？好吧，對于某些人來說，TypeScript 不是一種編程語言，因為它用于協(xié)助預(yù)先存在的 JavaScript 代碼。無論如何，TypeScript 通過強化代碼結(jié)構(gòu)來幫助我們 JavaScript 用戶。這是通過確保我們擁有的每個變量的數(shù)據(jù)類型的一致性來完成的。這在測試時非常有用，因為它會突出顯示開發(fā)過程中的潛在錯誤，并在代碼編譯為 JavaScript 之前向我們發(fā)出警告。

比較 JavaScript 和 TypeScript

他們共享這些數(shù)據(jù)類型

• 字符串
• 數(shù)字
• 布爾值
• 未定義
• 空

但是，它們的實現(xiàn)需要不同的方法。讓我告訴你怎么做！

推論

在 JavaScript 中定義變量時，如果我們愿意，它的數(shù)據(jù)類型可以稍后更改。對于 TypeScript 來說這是一個不同的故事，因為變量的數(shù)據(jù)類型要么由 TypeScript 推斷，要么由我們明確聲明。如果無法推斷或未明確說明，變量的數(shù)據(jù)類型可以變?yōu)閍ny！

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

類型注釋

作為上面小節(jié)的延續(xù)，我們可以在 TypeScript 中顯式聲明變量的數(shù)據(jù)類型的另一種方法是使用類型注釋。這意味著在給變量命名后添加冒號和類型 (: )。

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

形狀

TypeScript 中的“形狀”是什么意思？例如，當(dāng)涉及到字符串時，它們的方法有自己的屬性。這些“屬性”構(gòu)成了變量的“形狀”或結(jié)構(gòu)。要訪問變量的屬性，我們必須首先確保我們使用的方法提供了必要的信息。 JavaScript 對此并不嚴(yán)格，并且允許變量在運行時改變其形狀。然而，我們必須小心 TypeScript，因為它正在搜索變量的確切屬性。這就像將塊安裝到與其形狀相匹配的輪廓中。

// JavaScript 
// No need to state the data type here, just assign the variable a value. 
let color = ‘purple’;
// Since JavaScript is flexible, it is fine with this reassignment. 
color = ‘blue’;
// This is also the case even if the value changes to 10. 

// TypeScript 
// 'color' is declared and expected to have a string value.  
let color: string;
// Similar to the line above, except we assign a value as well.  
let color: string = 'red';
color = ‘purple’;  // 'purple' is a string value, so this is valid.  
color = ‘blue’;  // 'blue' is a string value, so this is valid.  

遠(yuǎn)不止這些！

結(jié)論

這是迄今為止我對 TypeScript 的第一印象?？梢钥隙ǖ卣f，我對它如何提升 JavaScript 已經(jīng)為我們所做的事情著迷。我渴望了解更多并將其實現(xiàn)到我的 JavaScript 項目中！

我希望這激起了您將 TypeScript 與 JavaScript 一起添加到沙箱/工具箱的興趣。誰不希望自己的代碼結(jié)構(gòu)更好？

以上是使用 TypeScript 添加到腳本的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！