使用 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中文网其他相关文章！