TypeScript与JavaScript

news2024/11/17 19:46:27

目录

一、什么是javascript

二、TypeScript:静态类型检查器

1、类型化的 JavaScript 超集

1.1、句法

1.2、类型

1.3、运行时行为

1.4、擦除类型

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 的答案来解决有关如何完成运行时任务的日常问题。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/463512.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为何电商这么难做…...你是否忽略了这个问题?

物流时效是影响买家体验的重要环节&#xff0c;物流服务优劣也是买家网上购物时的重要参考依据。但电商企业对于快递公司的时效承诺、服务质量基本处于被动接受的状况&#xff0c;直到买家投诉才知道快递公司服务缺失&#xff0c;若买家不投诉也没法主动知道大量的订单是否按约…

Notes/Domino 11.0.1FP7以及在NAS上安装Domino等

大家好&#xff0c;才是真的好。 目前HCL在还是支持更新的Notes/Domino主要是三个版本&#xff0c;V10、11和12&#xff0c;这不,上周HCL Notes/Domino 11.0.1居然推出了FP7补丁包程序。 从V10.0.1开始&#xff0c;Domino的FP补丁包程序主要是用来修复对应主要版本中的一些问…

TCP FACK 与 RACK

3 个 dupacks 触发 fast retransmit 是一个经典启发算法&#xff0c;但在引入 SACK 之后仍然计数 SACKed 数量 > 3 触发 fast retransmit 似乎就没理由了。即使把 reordering 算进去&#xff0c;一个距离 una 很远的 seg 被 SACKed&#xff0c;也足以判定丢包了&#xff0c;…

2022公考经验分享

一、写在前面 2017南京邮电毕业后&#xff0c;5年来一直就职事业单位。单位解决北京户口&#xff0c;也赶上了一两年的忙碌期&#xff0c;存款加上公积金大概40万。期间经历过几段感情&#xff0c;2020年通过相亲认识现在的老婆。2020年12月瑞泽家园签位排名7000多&#xff0c;…

本地spingboot配置Promethus+granfana监控

记录如何配置与启动 1.在搭建好的应用加上依赖 <!-- 实现对 Actuator 的自动化配置 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency><!-- Micr…

超火爆的ChatGPT课,送ChatGPT账号啦~~

HOT! HOT! HOT! &#x1f525; &#x1f525; &#x1f525; 上周&#xff0c;ChatGPT全栈开发课程一经推出&#xff0c;就在程序员圈子中引起了广泛关注。这两天 都被挤爆了&#xff0c;纷纷表示对课程内容很是期待呢。 明天就要开班直播啦&#xff0c;还未报名的同学&…

npm 打包发布一个公用的组件包

1&#xff0c;首先创建一个需要发包发布的组件 2.3使用Vue插件模式 这一步是封装组件中的重点&#xff0c;用到了Vue提供的一个公开方法&#xff1a;install。这个方法会在你使用Vue.use(plugin)时被调用&#xff0c;这样使得我们的插件注册到了全局&#xff0c;在子组件的任何…

AI在网络安全中的应用:机器学习如何帮助我们更好地保护网络

章节一&#xff1a;引言 随着信息技术的飞速发展&#xff0c;网络攻击的手段也在不断地演变。传统的网络安全技术已经难以应对日益复杂的网络安全威胁。AI技术&#xff0c;特别是机器学习技术&#xff0c;为网络安全提供了一种新的解决方案。本文将介绍AI在网络安全中的应用&am…

打造高性能的视频和弹幕系统(一): 对象存储服务

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

一文综述:自然语言处理技术NLP

自然语言处理技术综述1-到2020年 写在最前面摘要NLP简介Preprocessing预处理Tokenization令牌化、标记化Stop Words 停用词Stemming and Lemmatization词干提取和词形还原&#xff08;英文单词&#xff09;Parts-of-Speech Tagging词性标记Bag of Words and N-Grams词袋模型、N…

Redis数据库的安装(Windows10)

Redis数据库的安装 前言安装启动命令简单的几条语句 前言 本节开始学习Redis数据库。 Redis数据库的优势如下&#xff1a; 性能极高 – Redis能读的速度是110000次/s,写的速度是81000次/s 。 丰富的数据类型 – Redis支持二进制案例的 Strings, Lists, Hashes, Sets 及 Ord…

ubuntu22.04安装显卡驱动+cuda+cudnn

ubuntu22.04安装显卡驱动cudacudnn 1. 下载驱动和卸载、禁用自带驱动程序1.1 查看系统显卡型号1.2 从NVIDIA官网下载相应驱动1.3 卸载Ubuntu自带的驱动程序1.4 禁用自带的nouveau nvidia驱动1.5 更新1.6 重启电脑1.7 查看是否将自带的驱动屏蔽 2. 安装显卡驱动2.1 停止lightdm桌…

ChatGPT 如何促进智能客服行业发展

章节一&#xff1a;智能客服的背景及发展趋势 随着人工智能技术的快速发展&#xff0c;智能客服正逐渐成为企业服务中不可或缺的一环。相比于传统客服方式&#xff0c;智能客服能够快速地为客户提供满意的解决方案&#xff0c;大幅降低企业的客服成本&#xff0c;提高客户的满意…

24、LLVM编译流程

一、LLVM 1.1 LLVM概述 LLVM是构架编译器(compiler)的框架系统,以C编写而成,用于优化以任意程序语言编写的程序的编译时间(compile-time)、链接时间(link-time)、运行时间(run-time)以及空闲时间(idle-time),对开发者保持开放,并兼容已有脚本.LLVM计划启动于2000年,最初由美国…

MybatisPlus入门和分页和条件查询里面的条件和null值的处理方式和查询投影和查询条件设置和id生成相关

MybatisPlus 简化了mybatis之前的在springboot整合MyBatis时需要自己写sql语句在接口中&#xff0c;现在只需要让接口继承BaseMapper<实体类>&#xff0c;然后在测试类中接口.增删改查方法&#xff08;&#xff09;即可 不用像springboot整合mybatis一样勾选spring web…

【JavaScript 逆向】抖店滑块逆向分析

声明 本文章中所有内容仅供学习交流&#xff0c;相关链接做了脱敏处理&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 案例目标 接口&#xff1a; aHR0cHM6Ly93d3cuZG91eWluLmNvbS9hd2VtZS92MS93ZWIvdXNlci9wcm9maWxlL290aGVyLw 以上均做了脱敏处理&#…

某应用虚拟化系统远程代码执行

漏洞简介 微步在线漏洞团队通过“X漏洞奖励计划”获取到瑞友天翼应用虚拟化系统远程代码执行漏洞情报(0day)&#xff0c;攻击者可以通过该漏洞执行任意代码&#xff0c;导致系统被攻击与控制。瑞友天翼应用虚拟化系统是基于服务器计算架构的应用虚拟化平台&#xff0c;它将用户…

项目管理-团队管理

冲突和竞争 冲突&#xff1a;是指两个或两个以上的社会单元在目标上互不相容或互相排斥&#xff0c;从而产生心理上的或行为上的矛盾。冲突并不一定是有害的&#xff0c; “一团和气”的集体不一定是一个高效率的集体。对于有害的冲突要设法加以解决或减少&#xff1b;对有益的…

【远程工具】- WindTerm 下载、安装、使用、配置【Telnet/ssh/Serial】-免安装、解压即用

目录 一、WindTerm 概述 二、WindTerm 下载、安装 三、WindTerm 的使用  &#x1f449;3.1 使用SSH协议连接Linux开发主机  &#x1f449;3.2 使用Telnet协议连接开发板  &#x1f449;3.3 使用Serial(串口)协议连接开发板 一、WindTerm 概述 在远程终端工具中&#xff0c;s…

SCI论文自由投稿Vs专栏投稿,哪个更好中?

我们首先来看下以下几种期刊的发表方式&#xff1a; 正刊 正刊也就是自由投稿方式的发表方式&#xff0c;是期刊正常出版的期刊&#xff0c;比如一本SCI期刊是双月刊&#xff0c;一年出版6期&#xff0c;没有设定主题&#xff0c;包含多个研究方向的文章。每年按照半月/月/双…