JS和TS的区别

article/2025/6/8 22:15:19

JavaScript 与 TypeScript 的主要区别和特性对比

1. 基础定义

JavaScript 是一种动态、弱类型的编程语言,广泛应用于前端开发以及通过 Node.js 扩展到后端开发。TypeScript 则是 JavaScript 的超集,它在 JavaScript 的基础上添加了静态类型系统和其他增强功能。

2. 类型系统

JavaScript 是一种动态类型语言,变量的类型在运行时确定,这可能导致一些潜在的错误难以在编译阶段发现。TypeScript 引入了静态类型系统,允许开发者在编码阶段指定变量、函数参数和返回值的类型,从而减少运行时错误并提高代码质量。

// TypeScript 示例:使用静态类型
function add(a: number, b: number): number {return a + b;
}
3. 工具支持与开发体验

由于 TypeScript 提供了更强的类型检查和更丰富的工具支持(如自动补全、重构等),因此在大型项目中可以显著提升开发效率和代码可维护性。此外,TypeScript 的类型定义文件(.d.ts)使得开发者能够为非 TypeScript 编写的库提供类型支持。

4. 兼容性

TypeScript 编写的代码最终会被编译为纯 JavaScript 代码,这意味着它可以兼容任何支持 JavaScript 的环境。同时,TypeScript 支持最新的 ECMAScript 标准,并可以通过配置将代码向下兼容到旧版本的 JavaScript 环境。

5. 社区与生态系统

JavaScript 拥有庞大的社区和丰富的第三方库生态。虽然 TypeScript 的生态系统相对较小,但随着其普及度的提高,越来越多的库开始提供官方的 TypeScript 类型定义文件或直接以 TypeScript 编写。

6. 使用场景

对于小型项目或快速原型开发,JavaScript 可能更为合适,因为它不需要额外的编译步骤并且具有更低的学习曲线。而对于大型项目或需要团队协作的场景,TypeScript 的类型系统和工具支持能够带来显著的优势。


示例代码对比

以下是用 JavaScript 和 TypeScript 实现相同功能的代码示例:

JavaScript 示例
function greet(name) {console.log(`Hello, ${name}`);
}greet("World");
greet(123); // 运行时错误,但在编译阶段无法检测
TypeScript 示例
function greet(name: string): void {console.log(`Hello, ${name}`);
}greet("World"); // 正确
greet(123);     // 编译错误:Argument of type 'number' is not assignable to parameter of type 'string'.

在这里插入图片描述


http://www.hkcw.cn/article/wGWaaRClyl.shtml

相关文章

淘晶驰串口屏开发初体验:10分钟实现简易加法器

目录 一、开发环境闪电搭建(3分钟) 二、加法计算器实现步骤(7分钟) 1.工程创建 2.创建字库和导入字库 3. 拖放控件-文本控件 4.拖放控件-数字控件 5.(x)变量 6.按钮 三、测试 在嵌入式设备的人机交…

CppCon 2014 学习:Parallelizing the Standard Algorithms Library

Bringing Parallelism to C(为 C 引入并行性) 技术规范(Technical Specification) 是对 C 标准库的一个扩展草案(TS Technical Specification)。不会改变现有代码语义,而是提供新功能。专门针…

俄罗斯一桥梁坍塌致3死28伤 爆炸装置所致

俄罗斯布良斯克州一座桥梁发生坍塌,导致一列由莫斯科开往该州城市克利莫沃的火车脱轨。据俄罗斯紧急情况部初步统计,事故共造成31人伤亡,其中3人不幸遇难,28人已送往医疗机构救治。此前有报道指出,事件造成4人死亡,至少44人受伤。俄紧急情况部表示,救援人员正在对受损车…

任务调度器:从入门到放弃(二)

理想与现实的差异 在上文中,我们提到,一个优先级100的线程,跟一个优先级为120的线程进行公平调度的资源抢占的话。 从抓取的一份systrace上简单的对比来看, 其份额大概是24:1856 (systrace上随便框的,数据…

linux 1.0.6

PMS和软件安装的介绍 软件安装不能放在前面 你连linux自带的命令都整不会,你还去使用人家自己写的软件 整一个类似于手机商城的概念,直接进商城就可以下载软件 package management system 也就是PMS 叫做包管理器,作用是用来进行软件的安装&…

3D Gaussian splatting 02: 快速评估

目录 3D Gaussian splatting 01: 环境搭建3D Gaussian splatting 02: 快速评估3D Gaussian splatting 03: 用户数据训练和结果查看3D Gaussian splatting 04: 代码阅读-提取相机位姿和稀疏点云3D Gaussian splatting 05: 代码阅读-训练整体流程3D Gaussian splatting 06: 代码阅…

【系统配置与部署类】linux系统下的desktop图标文件配置

相关文章已经在个人博客网站上更新,欢迎访问: linux系统下的desktop图标文件配置http://www.turnin-blog.online/articles/%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E4%B8%8E%E9%83%A8%E7%BD%B2/linux%E7%B3%BB%E7%BB%9F%E4%B8%8B%E7%9A%84desktop%E5%9B%…

法国为何此时回应阵风是否被击落 服役20年首损?

法国军方首次回应“阵风”战机疑被击落事件,称如果消息属实,这将是该机服役以来首次在实战中损毁。印度空军引进了这款战斗机。5月27日,在例行记者会上,法国国防部军方发言人强调,若相关信息属实,这将是“阵风”战斗机服役20年来首次在实战中损毁。这也是法国军方就这一话…

从零开始的二三维CAD|CAE软件: 解决VTK,DICOM体素化-失效问题.

背景: 在从零开始的二三维软件开发中, 需要加载CT的dicoms影像文件, 并将其序列化之后的数据,体素化 可惜..vtk的c#库,将其体素化的时候,竟然失败... 使用vtkDicomReader ,设置 Dicom文件夹读取,竟然不停的失败...从网上找了一些版本.也没啥可用的资料... 解决办法: 直接…

Cesium快速入门到精通系列教程一

一、打造第一个Cesium应用 1、官方渠道下载Cesium(可选择历史版本) ​​GitHub Releases页面​​ 访问 Cesium GitHub Releases,此处列出了所有正式发布的版本。 通过标签(如 v1.95.0)选择目标版本,下载…

【多线程初阶】synchronized -监视器锁monitor lock

文章目录 🌅synchronized关键字🌊 synchronized 的互斥🌊 synchronized 的变种写法🏄‍♂️synchronized 修饰代码块 :明确指定锁哪个对象🏄‍♂️synchronized 修饰方法 🌊 synchronized 的可重入性&#…

C# 面向对象特性

面向对象编程的三大基本特性是:封装、继承和多态。下面将详细介绍这三大特性在C#中的体现方式。 封装 定义:把对象的数据和操作代码组合在同一个结构中,这就是对象的封装性。 体现方式: 使用访问修饰符控制成员的可见性 通过属…

[LitCTF 2024]浏览器也能套娃?

打开题目在线环境: 这里尝试填写一个网站回车之后是: 这里想到了ssrf漏洞:ssrf漏洞通常是由于应用程序在处理用户输入时缺乏严格的安全检查,错误地信任外部输入,或者使用的网络请求库配置不当等原因导致的。攻击者可…

明远智睿SSD2351开发板:视频监控领域的卓越之选

随着安全防范意识的提高,视频监控在各个领域得到了广泛应用。明远智睿SSD2351开发板凭借其出色的性能和特性,成为视频监控领域的卓越之选,为视频监控系统的升级和发展提供了有力支持。 SSD2351开发板的四核1.4GHz处理器在视频监控数据处理方面…

threejs加载外部三维模型(gltf)

1. 建模软件绘制3D场景(Blender) 这节课主要给大家科普一些三维模型创建、美术和程序员协作的相关问题。 三维建模软件作用 对于简单的立方体、球体等模型,你可以通过three.js的几何体相关API快速实现,不过复杂的模型,比如一辆轿车、一栋房…

【从零开始系列】Qwen2.5 Llama-Factory:开源语言大模型+训练平台——(超详细、最新版)一篇文章解决:环境搭建 => 微调训练 => 本地部署

目录 一、简介 1.Qwen2.5:开源模型 2. LLaMA-Factory:微调工具 二、环境搭建 1.Python和Pytorch版本 2.llamafactory项目克隆安装 3.其他重要库安装 三、模型微调 1.预训练模型下载 2.训练数据集 ①创建对话文本数据 ②配置dataset_info 3.配置文件与…

git 代码提交规范,feat,fix,chore都是什么意思?

写到前面 经常看到别人提交的代码记录里面包含一些feat、fix、chore等等,而我在提交时也不会区分什么,直接写下提交信息,今天就来看一下怎么个事,就拿 element-plus 举例来看一下 其实这么写是一种代码提交规范,当然…

Gemma 3模型:Google 开源新星,大语言模型未来探索

🐇明明跟你说过:个人主页 🏅个人专栏:《深度探秘:AI界的007》 🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、快速发展的AI世界:为何关注Gemma 3&#x…

2024.11最新Hexo+GitHub搭建个人博客

2024.11最新HexoGitHub搭建个人博客 一、Hexo介绍 Hexo 是一个快速、简洁且高效的博客框架,有丰富的主题和插件可供使用。 Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。这…

完美解决 git 报错 “fatal: unable to access ‘https://github.com/.../.git‘: Recv failure Connection was rese

文章目录 方法一:取消代理设置方法二:设置系统代理结语 🎉欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页:IT陈寒的博客🎈该系列文章专栏&#xf…