资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

【编程向导】Js与Ts差异详解：选择与权衡

创作时间:

作者:

@小白创作中心

【编程向导】Js与Ts差异详解：选择与权衡

引用

CSDN

https://blog.csdn.net/weixin_39357371/article/details/145854500

几十年来，JavaScript一直是Web开发的支柱，为动态和交互式体验提供支持。但随着项目复杂性的增加，其灵活性可能会成为一把双刃剑。输入TypeScript——JavaScript的超集，它为表格带来了静态类型和增强的工具。在这篇文章中，我将分解JavaScript和TypeScript之间的区别，探讨它们的优势，并帮助你决定哪一个适合你的下一个项目。

JavaScript 是怎么回事？

JavaScript是编程语言的狂野之子——动态、宽容且无处不在。它使您的浏览器跳舞，从简单的按钮单击到成熟的单页应用程序。以下是它闪耀的原因：

普遍采用：它可以在浏览器中本地运行，并且由于Node.js，也可以在服务器上运行。
灵活性：没有严格的规则。想要在飞行中更改变量的类型？去做吧。
快速原型设计：您无需太多设置即可构建一个工作应用程序。

但这种自由也有一个问题。以这个例子为例：

function add(a, b) {
  return a + b;
}
console.log(add(5, 10)); // 15
console.log(add("5", 10)); // "510" – Oops!

JavaScript的松散类型意味着这样的错误可能会潜入，尤其是在较大的代码库中。直到运行时您才会知道，到那时，可能为时已晚。

输入 TypeScript：带护栏的 JavaScript

TypeScript由Microsoft开发，通过添加静态类型基于JavaScript构建。它不是一种单独的语言，而是具有额外功能的JavaScript，可以编译为纯JS。以下是开发人员喜欢它的原因：

Type Safety：在开发过程中尽早捕获错误。
更好的工具：VS Code等IDE中的自动完成、重构和代码导航是一流的。
可扩展性：非常适合大型团队和复杂项目。

让我们在TypeScript中重写该函数：

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(5, 10)); // 15
console.log(add("5", 10)); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

TypeScript编译器甚至在你运行代码之前就标记了这个问题。生产中没有惊喜！

主要区别一目了然

以下是图片中的内容转为表格形式，并翻译成中文：

特性	JavaScript	TypeScript
Typing	动态，运行时检查	静态，编译时检查
Learning Curve	对初学者友好	学习曲线较陡峭，但值得学习
Setup	无需设置	需要设置（例如，tsconfig.json）
Ecosystem	庞大且成熟	利用JS和TS特定库
Error Detection	运行时检测错误	编译时检测错误

JavaScript 和 Typescript 之间的区别

何时使用JavaScript

在以下情况下，JavaScript是您的首选：

您正在构建一个小型项目或原型，其中速度比结构更重要。
您是编码新手，希望避免额外的复杂性。
您的团队更喜欢最少的工具和最大的灵活性。
想想个人作品集、快速脚本或小型应用程序，您可以在其中将代码库牢记在心。

何时使用TypeScript

TypeScript在以下情况下大放异彩：

您正在与多个开发人员一起开发一个大型应用程序。
您希望减少bug并提高可维护性。
您正在与React、Angular或Vue等框架集成，这些框架具有出色的TypeScript支持。
企业软件、开源库或任何具有较长生命周期的项目都从TypeScript的学科中受益匪浅。

真实示例

假设您正在构建一个用户配置文件功能。以下是它在JavaScript中的样子：

function displayUser(user) {
  return `${user.name} is ${user.age} years old`;
}
const user = { name: "Alex", age: 28 };
console.log(displayUser(user)); // "Alex is 28 years old"
console.log(displayUser({ name: "Sam" })); // "Sam is undefined years old" – No error, just a silent fail

现在，使用TypeScript：

interface User {
  name: string;
  age: number;
}
function displayUser(user: User): string {
  return `${user.name} is ${user.age} years old`;
}
const user: User = { name: "Alex", age: 28 };
console.log(displayUser(user)); // "Alex is 28 years old"
console.log(displayUser({ name: "Sam" })); // Error: Property 'age' is missing in type '{ name: string; }'

TypeScript强制你定义a应该是什么样子，在它们造成麻烦之前捕获缺失的属性。