前端有必要掌握TypeScript吗,答案十分肯定

news2024/11/30 2:37:05

本文首发自「慕课网」(www.imooc.com),想了解更多IT干货内容,程序员圈内热闻,欢迎关注"慕课网"或慕课网公众号!

作者:一飞同学 | 慕课网讲师


 

近几年,前端技术发展越来越迅速,其中TypeScript更是受到了越来越多的开发者的青睐,在GitHub上搜索star数大于1w的项目,我们可以看到很多知名的开源项目如vscode、angular、ant-design、ionic、deno 等都使用TypeScript开发,连火爆的Vue.js 3.0 也是用TypeScript重构,尤大大都忍不住发出了 “真香” 的言论。

TypeScript的火爆程度大有成为下一代前端开发语言的趋势,TypeScript作为JavaScript语言的超集,它为JavaScript添加了可选择的类型标注,大大增强了代码的可读性和可维护性。同时,它提供最新和不断发展的JavaScript特性,能让我们建立更健壮的组件。
越来越多的轮子将用TypeScript开发和重构,我们如果想造轮子,也应该使用TypeScript这把利器。今天我们通过一篇文章快速了解下TypeScript。

1. TypeScript 与 JavaScript

1.1 TypeScript 简介

官方定义:
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

  • TypeScript 是 JavaScript 的超集,它可以编译成纯 JavaScript。
  • TypeScript 基于 ECMAScript 标准进行拓展,支持 ECMAScript 未来提案中的特性,如装饰器、异步功能等。
  • TypeScript 编译的 JavaScript 可以在任何浏览器运行,TypeScript 编译工具可以运行在任何操作系统上。
  • TypeScript 起源于开发较大规模 JavaScript 应用程序的需求。由微软在2012年发布了首个公开版本。

从以上特性中可以看到,TypeScript 与 JavaScript 、ECMAScript 有着非常深入的联系。在详细介绍 TypeScript 之前,先来简单了解一下 ECMAScript 与 JavaScript的发展。

1.2 ECMAScript

ECMA International: 一个制定技术标准的组织。

ECMA-262:由 ECMA International 发布。它包含了脚本语言的标准。

ECMAScript: 由 ECMA International 以 ECMA-262 和 ECMA-402 规范的形式进行标准化的。

JavaScript: 通用脚本编程语言,它遵循了 ECMAScript 标准。 换句话说,JavaScript 是 ECMAScript 的方言。

通过阅读 ECMAScript 标准,你可以学会怎样实现一个脚本语言;而通过阅读 JavaScript 文档,你可以学会怎样使用脚本语言编程。

2019年6月,ECMA-262 第10版定义了 ECMAScript 2019 通用编程语言。

1.3 JavaScript版本

说 JavaScript 的版本,实际上就是说它实现了 ECMAScript 标准的哪个版本

2. 为什么要用 TypeScript

2.1 静态类型

我已经熟练使用 JavaScript,为什么要用 TypeScript 呢?

回答这个问题前,先来看看下面这些 JavaScript 中的常见错误:

  • Uncaught TypeError: Cannot read property
  • TypeError: ‘undefined’ is not an object
  • TypeError: null is not an object
  • TypeError: Object doesn’t support property
  • TypeError: ‘undefined’ is not a function
  • TypeError: Cannot read property ‘length’

仔细看下不难发现,这些错误大都是一些比较初级的类型错误。

JavaScript 只会在 运行时 才去做数据类型检查,而 TypeScript 作为静态类型语言,其数据类型是在 编译期间 确定的,编写代码的时候要明确变量的数据类型。使用 TypeScript 后,这些低级错误将不再发生。

2.2 三大框架支持

我们学习一门新技术会关心它的生命力问题,如果这门技术在较短时间内就要被淘汰,那花费大量的时间学习也是不划算的。TypeScript 能够保持长久生命力的另一个原因,就是统治前端的三大框架对 TypeScript 的支持。

  • Angular 是 TypeScript 最早的支持者,Angular 官方推荐使用 TypeScript 来创建应用。
  • React 虽然经常与 Flow 一起使用,但是对 TypeScript 的支持也很友好。
  • Vue3.0 正式版即将发布,由 TypeScript 编写。

从国内的氛围来看,由前端三大框架引领的 TypeScript 热潮已经涌来,很多招聘要求上也都有了 TypeScript 的身影。

2.3 兼容 JavaScript 的灵活性

TypeScript 虽然严谨,但没有丧失 JavaScript 的灵活性,TypeScript 非常包容:

  • TypeScript 通过 tsconfig.json 来配置对类型的检查严格程度。
  • 可以把 .js 文件直接重命名为 .ts
  • 可以通过将类型定义为 any 来实现兼容任意类型。
  • 即使 TypeScript 编译错误,也可以生成 JavaScript 文件。

这里先简单介绍下 any 类型,后续会详细讲解。比如一个 string 类型,在赋值过程中类型是不允许改变的:

let brand: string = 'imooc'
brand = 1  // Type '1' is not assignable to type 'string'.ts(2322)

如果是 any 类型,则允许被赋值为任意类型,这样就跟我们平时写 JavaScript 一样了:

let brand: any = 'imooc'
brand = 1 

基于上面这些特点,一个熟悉 JavaScript 的工程师,在查阅一些 TypeScript 语法后,即可快速上手 TypeScript,加油!

3. 小结

本文主要介绍了:

  • TypeScript 与 JavaScript 的关系,知道了 TypeScript 是 JavaScript 的超集,可以支持 ECMAScript 的各种新特性。
  • 从三个方面论述了“为什么要用 TypeScript”,从中可以看出 TypeScript 已经是当前大前端技术栈中非常重要的一环了。

欢迎关注「慕课网」帐号,我们会一直坚持内容原创,提供IT圈优质内容,分享干货知识,大家一起共同成长吧!

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

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

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

相关文章

亚马逊云科技助力医疗与生命科学行业,提供高性能计算(HPC)

2023年4月27日,亚马逊云科技医疗与生命科学行业峰会召开。会议上,亚马逊云科技大中华区战略业务发展部总经理顾凡表示:“亚马逊云科技不仅提供覆盖全球的云基础设施以及超过200大类的云服务,更重要的是,我们深刻了解行…

Agisoft Metashape 卫星图像处理

Agisoft Metashape 利用卫星图像创建三维模型 文章目录 Agisoft Metashape 利用卫星图像创建三维模型前言一、添加图像二、对齐图像三、构建 DEM四、生成平铺模型前言 Agisoft Metashape Professional 支持处理带RPC参数的立体卫星图像。支持的卫星数据有:Beijing-3A, Ikonos…

Flash钓鱼->CS上线(免杀过火绒、360等)

先看结果 访问钓鱼页面: 点击立即升级即把马儿下载下来了 这个马儿是rar压缩的,做成的rar解压自启动,所以是个exe的文件,然后这里为了像一点,把图标给改了 双击运行,查看效果: 首先CS是没东西的 解压路…

UNITY3D 5V5网游开发案例教程

文章连载更新中,可以提前领取素材进行预习,自学 素材领取:私信发送 领取RPG网络开发教材 这里写目录标题 游戏玩法这门课适合哪些人学习学完了能达到什么效果项目准备基础系统战斗系统同步设计精讲社交系统副本系统优化项目准备正文美术准备&…

服务(第二十三篇)mysql-mha

1、什么是 MHA MHA(Master High Availability)是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中,MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大…

UnityWebSocket | 双端通信支持Text/Binary

跳转官方仓库地址 有多个项目使用该库,平台有PC、WebGL。 一、说明 1)原理 WebSocket是H5提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。数据通常在两个站(点对点)之间进行传输,按照…

动态规划:01背包理论基础 二维dp

1.确定dp数组以及下标的含义 对于背包问题,有一种写法, 是使用二维数组,即dp[i][j] 表示从下标为[0-i]的物品里任意取,放进容量为j的背包,价值总和最大是多少。[0-i]物品任取放到容量为j的背包中得到的最大价值为dp[i…

想要上手playwright?看这篇文章就够了!(文章有点长,建议收藏)

本文系统地介绍了playwright的基础概念,架构,安装过程,编码demo(python实例),常用API,录制脚本的方法以及playwright在无头模式的应用和其与selenium的对比。相信大家认真阅读本文后一定会对pla…

2023年5月广州/西安/成都/深圳产品经理认证NPDP报名

产品经理国际资格认证NPDP是新产品开发方面的认证,集理论、方法与实践为一体的全方位的知识体系,为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会(PDMA)成立于1979年,是…

【数据结构】从头到尾全解析双向链表

在之前我们已经讲过< 单链表 >了,单链表查找上一个结点的时间复杂度为O&#xff08;n&#xff09;&#xff0c;尾插时也要遍历一次链表也是O&#xff08;n&#xff09;&#xff0c;因为我们每次都要从头开始遍历找,为了克服这单向性的缺点&#xff0c;我们就有了双向链表…

软件测试专业应届生应如何提高职场竞争力

一&#xff1a;巩固专业知识 背景&#xff1a;笔者已经做了几年的打工人&#xff0c;以个人经验给软件测试专业应届生一些建议。 推荐需要掌握的知识&#xff1a; 1、软件测试基础知识&#xff08;软件生命周期每个阶段工作需了解&#xff09; 2、熟悉SQL/MySQL/Oracle数据库&…

D8加密狗使用教程

D8 加密锁 1.VsCode 安装中文扩展包(1) 打开 VsCode&#xff0c;点击左侧扩展.(2) 输入Chinese&#xff0c;会自动搜索&#xff0c;点击第一个中文简体扩展&#xff0c;点击安装(3) 重启VsCode 2. D8调试服务程序 - 只运行3. 自动安装 yttool&#xff08;1&#xff09;VsCode 打…

杭钢集团:以用友iuap为数智底座的数智化转型之路

近日&#xff0c;一年一度的用友BIP技术大会圆满召开。来自行业领先企业的CIO/CDO、生态伙伴、开发者、分析师、媒体等共聚北京用友产业园&#xff0c;了解最新技术发展趋势、探讨行业热点话题。会上&#xff0c;杭钢集团总经理助理施永益分享了杭钢集团基于用友BIP-iuap平台推…

three.js学习 11 - threejs常用几何体,与几何体材质如何自定义

1.缓冲几何体&#xff08;立方体&#xff09; 官网API地址&#xff1a;https://www.three3d.cn/docs/index.html?qgeometry#api/zh/geometries/BoxGeometry 2.圆缓冲几何体 官网地址&#xff1a;https://www.three3d.cn/docs/index.html?qgeometry#api/zh/geometries/Cir…

ppt怎么压缩文件大小?试试这几种方法

ppt怎么压缩文件大小&#xff1f; PPT&#xff0c;也就是Microsoft PowerPoint演示文稿&#xff0c;是一种用于创建和展示演示文稿的软件工具。PPT的作用非常广泛。它可以用于各种场景中&#xff0c;以呈现信息、表达观点和传递思想。PPT可以将文字、图片、图表、动画等多种媒体…

程序员之间拉开差距最大的因素

本文为小红花技术领袖俱乐部创始人赖勇浩为《编程卓越之道》&#xff08;卷1&#xff09;所作序言。 拿到新一版《编程卓越之道》的第一卷《深入理解计算机》的稿子&#xff0c;心里非常感慨&#xff1a;上次读这本书&#xff0c;已经是16年前&#xff0c;还留下了幼稚的读后感…

1072. 按列翻转得到最大值等行数(leetcode,哈希)-------------------c++实现

1072. 按列翻转得到最大值等行数&#xff08;leetcode,哈希&#xff09;-------------------c实现 题目表述 给定 m x n 矩阵 matrix 。 你可以从中选出任意数量的列并翻转其上的 每个 单元格。&#xff08;即翻转后&#xff0c;单元格的值从 0 变成 1&#xff0c;或者从 1 …

排序算法之基数排序

一、基数排序&#xff08;RadixSort&#xff09; 基数排序&#xff08;Radix sort&#xff09;是一种非比较型整数排序算法。 1. 基本思想 原理是将整数按位数切割成不同的数字&#xff0c;然后按每个位数分别比较。基数排序的方式可以采用LSD&#xff08;Least significant…

超详细:阿里云服务器安装宝塔面板教程(需要开端口)

使用阿里云服务器安装宝塔面板教程&#xff0c;阿里云服务器网以CentOS操作系统为例&#xff0c;安装宝塔Linux面板&#xff0c;先远程连接到云服务器&#xff0c;然后执行宝塔面板安装命令&#xff0c;系统会自动安装宝塔面板&#xff0c;安装完成后会返回面板地址、账号和密码…

理论力学专题----拉普拉斯一龙格一楞次矢量

质量 m平方反比的有心力场 对应势能 V-k/r牛顿定律&#xff1a;\dot{\vec{p}}-k\frac{\vec{r}}{r^3} 空间旋转对称群 略 下学期学完了补上 LRL矢量 LRL矢量\vec{A}: define: \vec{A} \eqv \vec{p} \times \vec{L} - mk\frac{\vec{r}}{r} LRL守恒 \frac{d}{dt}(\vec{p} \…