TypeScript与JavaScript

卡布奇诺-海晨

已于 2023-04-27 21:05:06 修改

阅读量4.8k

点赞数 24

分类专栏： Vue3 文章标签： typescript javascript 前端

于 2023-04-26 11:21:46 首次发布

本文链接：https://blog.csdn.net/qq_57756904/article/details/130380736

版权

Vue3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

博主作品：《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目，可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程，企业实战开发。《微服务实战》专栏是本人的实战经验总结，《Spring家族及微服务系列》专注Spring、SpringMVC、SpringBoot、SpringCloud系列、Nacos等源码解读、热门面试题、架构设计等。除此之外还有不少文章等你来细细品味，更多惊喜等着你哦

🍅开源Vue3项目免费哦：点击这里克隆或者下载，点击star(star越多维护动力越多) 🍅

2、学习 JavaScript 还是 TypeScript

一、什么是javascript

JavaScript（也称为 ECMAScript）最初是一种用于浏览器的简单脚本语言。在它被发明的时候，它被期望用于嵌入网页的短代码片段——编写超过几十行的代码有点不寻常。因此，早期的网络浏览器执行此类代码的速度非常慢。不过，随着时间的推移，JS 变得越来越流行，Web 开发人员开始使用它来创建交互式体验。

Web 浏览器开发人员通过优化他们的执行引擎（动态编译）和扩展它的功能（添加 API）来应对 JS 使用的增加，这反过来又使 Web 开发人员更多地使用它。在现代网站上，浏览器经常运行跨越数十万行代码的应用程序。这是“网络”的漫长而渐进的成长过程，从一个简单的静态页面网络开始，演化为各种丰富应用程序的平台。

不仅如此，JS 已经变得足够流行，可以在浏览器上下文之外使用，例如使用 node.js 实现 JS 服务器。JS 的“随处运行”特性使其成为跨平台开发的有吸引力的选择。现在有很多开发人员只使用JavaScript 来编写他们的整个堆栈！

总而言之，我们拥有一种专为快速使用而设计的语言，然后发展成为一种成熟的工具来编写具有数百万行的应用程序。每种语言都有自己的怪癖——古怪和惊喜，而 JavaScript 的不起眼的开端使它拥有许多这样的怪癖。一些例子：

JavaScript 的相等运算符 ( ==)强制转换其参数，导致意外行为：
if ("" == 0) {
  // It is! But why??
}
if (1 < x < 3) {
  // True for *any* value of x!
}
JavaScript 还允许访问不存在的属性：
const obj = { width: 10, height: 15 };
// Why is this NaN? Spelling is hard!
const area = obj.width * obj.heigth;
大多数编程语言会在发生此类错误时抛出错误，有些会在编译期间抛出错误——在任何代码运行之前。在编写小程序时，这种怪癖很烦人但可以管理；在编写包含数百或数千行代码的应用程序时，这些不断出现的意外是一个严重的问题。

二、TypeScript：静态类型检查器

有些语言根本不允许那些有缺陷的程序运行。在不运行代码的情况下检测代码中的错误称为静态检查。根据正在操作的值的种类来确定什么是错误，什么不是错误，这被称为静态类型检查。

TypeScript 在执行前检查程序是否有错误，并根据值的种类进行检查，使其成为静态类型检查器。例如，上面的最后一个例子因为obj. 这是 TypeScript 发现的错误：

1、类型化的 JavaScript 超集

但是，TypeScript 与 JavaScript 有何关系？

1.1、句法

TypeScript 是一种语言，是JavaScript 的超集：因此 JS 语法是合法的 TS。语法是指我们编写文本以形成程序的方式。例如，此代码存在语法错误，因为它缺少)：

由于其语法，TypeScript 不会将任何 JavaScript 代码视为错误。这意味着可以将任何有效的 JavaScript 代码放入 TypeScript 文件中，而不必担心它的具体编写方式。

1.2、类型

然而，TypeScript 是一个类型超集，这意味着它添加了关于如何使用不同类型的值的规则。较早的错误 aboutobj.heigth不是语法错误：它是以不正确的方式使用某种值（类型）的错误。

作为另一个示例，这是可以在浏览器中运行的 JavaScript 代码，它将记录一个值：

这个语法上合法的程序记录Infinity. 但是，TypeScript 将数字除以数组视为无意义的操作，并且会发出错误：

有可能真的打算将一个数字除以一个数组，也许只是为了看看会发生什么，但大多数时候，这是一个编程错误。TypeScript 的类型检查器旨在允许正确的程序通过，同时仍然捕获尽可能多的常见错误。（稍后，我们将了解可用于配置 TypeScript 检查代码的严格程度的设置。）

如果将一些代码从 JavaScript 文件移动到 TypeScript 文件，可能会看到类型错误，具体取决于代码的编写方式。这些可能是代码的合理问题，或者 TypeScript 过于保守。在本指南中，我们将演示如何添加各种 TypeScript 语法来消除此类错误。

1.3、运行时行为

TypeScript 也是一种保留了JavaScript运行时行为的编程语言。例如，在 JavaScript 中除以零会产生Infinity而不是抛出运行时异常。原则上，TypeScript从不改变 JavaScript 代码的运行时行为。

这意味着，如果将代码从 JavaScript 移至 TypeScript，即使 TypeScript 认为代码存在类型错误，它也能保证以相同的方式运行。

保持与 JavaScript 相同的运行时行为是 TypeScript 的基本承诺，因为这意味着可以轻松地在两种语言之间转换，而不必担心可能导致程序停止运行的细微差异。

1.4、擦除类型

粗略地说，一旦 TypeScript 的编译器检查完代码，它就会擦除类型以生成生成的“编译”代码。这意味着一旦代码被编译，生成的普通 JS 代码就没有类型信息。

这也意味着 TypeScript 永远不会根据它推断的类型更改程序的行为。最重要的是，虽然可能会在编译期间看到类型错误，但类型系统本身与程序运行时的工作方式无关。

最后，TypeScript 不提供任何额外的运行时库。程序将使用与 JavaScript 程序相同的标准库（或外部库），因此无需学习额外的 TypeScript 特定框架。

2、学习 JavaScript 还是 TypeScript

我们经常看到“我应该学习 JavaScript 还是 TypeScript？”这个问题。

答案是两者不是水火不容，不学JavaScript就学不会TypeScript！TypeScript 与 JavaScript 共享语法和运行时行为，因此学习的任何有关 JavaScript 的知识都可以同时帮助学习 TypeScript。

有很多资源可供程序员学习 JavaScript；如果正在编写 TypeScript，则不应忽略这些资源。例如，标记的 StackOverflow 问题大约是的 20 倍javascript，typescript但所有问题javascript也适用于 TypeScript。

如果发现自己正在搜索诸如“如何在 TypeScript 中对列表进行排序”之类的内容，请记住：TypeScript 是带有编译时类型检查器的 JavaScript 运行时。在 TypeScript 中对列表进行排序的方式与在 JavaScript 中排序的方式相同。如果找到直接使用 TypeScript 的资源，那也很好，但不要局限于认为需要特定于 TypeScript 的答案来解决有关如何完成运行时任务的日常问题。