使用 TypeScript 新增到腳本

封面圖片來源： Daria Kraplak

目錄

簡介
TypeScript 的目的
比較 JavaScript 和 TypeScript
結論

介紹

在深入了解 TypeScript 是什麼之前，我們先來談談 JavaScript！你知道 JavaScript 是 1995 年發明的嗎？我也沒有。

這段時間，它滿足了人們瀏覽器中處理簡單網頁的需求。自 1999 年以來，JavaScript 得到了改進，可以處理我們現在建立的有趣的動態網頁。此外，它是一種相當易於使用的程式語言，因為它對資料類型非常靈活（這裡略有劇透）。

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

TypeScript 的目的

TypeScript 是 JavaScript 的超集。這意味著什麼？好吧，對於某些人來說，TypeScript 不是一種程式語言，因為它用於協助預先存在的 JavaScript 程式碼。無論如何，TypeScript 透過強化程式碼結構來幫助我們 JavaScript 用戶。這是透過確保我們擁有的每個變數的資料類型的一致性來完成的。這在測試時非常有用，因為它會突出顯示開發過程中的潛在錯誤，並在程式碼編譯為 JavaScript 之前向我們發出警告。

比較 JavaScript 和 TypeScript

他們共享這些資料類型

• 字串
• 數字
• 布林值
• 未定義
• 空

但是，它們的實作需要不同的方法。讓我告訴你怎麼做！

推論

在 JavaScript 中定義變數時，如果我們願意，它的資料類型可以稍後更改。對於 TypeScript 來說這是一個不同的故事，因為變數的資料類型要么由 TypeScript 推斷，要么由我們明確聲明。如果無法推斷或未明確說明，變數的資料型別可以變成any！

// 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 中明確宣告變數的資料型別的另一種方法是使用型別註解。這意味著在為變數命名後添加冒號和類型 (: )。

// 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 中的「形狀」是什麼意思？例如，當涉及字串時，它們的方法有自己的屬性。這些“屬性”構成了變數的“形狀”或結構。要存取變數的屬性，我們必須先確保我們使用的方法提供了必要的資訊。 JavaScript 對此並不嚴格，並且允許變數在運行時改變其形狀。然而，我們必須小心 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.  

遠不止這些！

結論

這是迄今為止我對 TypeScript 的第一印象。可以肯定地說，我對它如何提升 JavaScript 已經為我們所做的事情著迷。我渴望了解更多並將其實現到我的 JavaScript 專案中！

我希望這激起了您將 TypeScript 與 JavaScript 一起添加到沙箱/工具箱的興趣。誰不希望自己的程式碼結構更好？

以上是使用 TypeScript 新增到腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章！