【TypeScript】一文带你了解什么是TypeScript

简介: 【TypeScript】一文带你了解什么是TypeScript

JavaScript最大的问题

程序员编写的最常见的错误类型可以描述为类型错误:在预期不同类型的值的地方使用了某种类型的值。这可能是由于简单的拼写错误、无法理解库的 API 表面、对运行时行为的错误假设或其他错误。

使用JavaScript编写代码最突出的问题就是类型检查问题:由于JavaScript弱类型语言,使得大多数使用者只能在代码运行阶段才能发现类型错误问题,这就使得错误不能被及时发现和修复,为之后的开发埋下了隐患。

JavaScript没有表达不同代码单元之间关系的能力。结合 JavaScript 相当奇特的==运行时语义==,语言和程序复杂性之间的这种不匹配使得 JavaScript 开发成为一项难以大规模管理的任务。

TypeScript 的目标是成为 JavaScript 程序的静态类型检查器——换句话说,是一个在代码运行之前运行的工具(静态)并确保程序的类型正确(类型检查),使得我们能够在代码编写阶段就能及时发现类型错误问题。

什么是TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript 是一种非常受欢迎的 JavaScript 语言扩展。它在现有的 JavaScript 语法之上加入了一层类型层,而这一层即使被删除,也丝毫不会影响运行时的原有表现。许多人认为 TypeScript "只是一个编译器",但更好的理解其实是把 TypeScript 看作两个独立的系统:编译器(即处理语法的部分)和语言工具(即处理与编辑器集成的部分)。

JS , ES , TS 的关系

  • 1995年:JavaScript诞生

    当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

    由于网景公司希望能在静态HTML页面上添加一些动态效果,于是 Brendan Eich 在两周之内设计出了

JavaScript语言。

之所以起名叫`JavaScript`,是原因是当时`Java`语言非常红火,想要蹭一波热度而已,实际上`JavaScript`除了语法上有点像`Java`,其他部分基本上没啥关系。
  • 1997年:ECMAScript诞生

    因为网景开发了JavaScript,一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)(欧洲计算机制造商协会)组织制定了JavaScript 语言的标准,被称为ECMAScript标准。

  • 2015年:TypeScript诞生

    TypeScriptJavaScript 的超集(最终会被编译成 JavaScript 代码),即包含JavaScript 的所有元素,能运行JavaScript 的代码,并扩展了JavaScript 的语法。相比于JavaScript ,它还增加了静态类型、类、模块、接口和类型注解方面的功能,更易于大项目的开发

    TypeScript 提供最新的和不断发展的 JavaScript 特性,包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性,比如异步功能和 Decorators,以帮助建立健壮的组件。

一句话总结三者关系:ECMAScript是标准语言,JavaScriptECMAScript的实现,TypeScriptJavaScript的超集。

在这里插入图片描述
在这里插入图片描述

为什么使用TypeScript

TypeScript扩展了JavaScript,提供强大的类型检查语法提示功能,结合诸如VS code这类编译器,能够极大的提高开发效率,降低项目后期的维护成本:

在这里插入图片描述

在这里插入图片描述

配置TypeScript环境

在学习TypeScript之前我们需要先全局安装tsc TypeScript 编译器。

npm i -g typescript

自己创建一个项目(文件夹),在项目根目录终端运行:

tsc -init

此时项目根目录下会生成一个配置文件 tsconfig.json ,这里给出我使用的配置:

{
    "compilerOptions": {
    /* TS编译成JS的版本*/
    "target": "es6",
    /* 入口文件:指定源文件中的根文件夹。 */
    "rootDir": "./src",
    /* 编译出口文件:指定输出文件夹。 */
    "outDir": "./dist",
    /* 严格模式     */
    "strict": true,
}
}

项目根目录下创建src文件夹,在这个文件内创建并编写你的ts文件

在项目根目录终端输入tsc --watch就会开始持续监听src目录下的所有ts文件,文件更改时会自动将其编译成js文件到dist目录下

如果想要自己手动编译某一特定ts文件,可以在ts文件所在目录下运行tsc xxx.ts,这时编译后的js文件会放在与该ts文件同级的地方

注意:我们使用 TypeScript的目的就是检验代码并纠错,尽量使自己的代码变得足够规范,所以建议应始终使用 "strict": true

开始学习TypeScript

想要深入去学习TypeScript的同学可以去博主的TypeScript从入门到精通专栏,里面的每一篇文章都是博主呕心沥血,精益求精写出来的优质好文,并且可能会是你看过的最全最细致的TypeScript教程

话不多说,赶快去关注、订阅、收藏、点赞,开始学习吧!

相关文章
|
25天前
|
JavaScript 前端开发 安全
TypeScript五
TypeScript是面向对象的JavaScript超集,支持类、接口等OOP特性。类通过`class`定义,包括字段、构造函数和方法。例如,`Car`类有`engine`字段、构造函数和`disp`方法。类间可实现继承,如`Circle`继承`Shape`。TypeScript不支持多重继承,但允许多重继承链。`static`关键字定义静态成员,`instanceof`检查对象类型,访问控制修饰符(public, protected, private)管理访问权限。类能实现接口,如`AgriLoan`实现`ILoan`。 TypeScript对象是类型实例,
|
25天前
|
存储 JavaScript
TypeScript三
在 TypeScript 中,数组可以通过类型定义,如 `number[]` 或 `string[]`。示例展示了数字和字符串数组的声明与访问。数组解构允许将数组元素赋值给多个变量。通过 `for...in` 循环可遍历数组。多维数组如 `number[][]` 存储嵌套数组。数组方法包括:`concat()` 连接数组,`every()` 检查所有元素是否满足条件,`filter()` 过滤符合条件的元素,`forEach()` 对每个元素执行回调,`indexOf()` 查找元素位置,`join()` 将数组转为字符串,`map()` 应用函数于每个元素并返回新数组
|
25天前
|
存储 JavaScript 索引
TypeScript四
## 联合类型 联合类型使用`|`分隔,表示变量可为多种类型: ```c var val: string | number; val = 12; // OK val = "Runoob"; // OK `
|
4月前
|
JavaScript 前端开发 Java
TypeScript
TypeScript是JavaScript的一个超集,简称ts,ts是能够完全兼容js的ts是一门静态类型的语言,js是动态类型的语言
31 0
|
7月前
|
JavaScript 前端开发 编译器
30分钟速成TypeScript
30分钟速成TypeScript
|
9月前
|
JavaScript
【TypeScript理解】
【TypeScript理解】
|
9月前
|
JavaScript 前端开发 编译器
TypeScript使用技巧
TypeScript使用技巧
42 0
|
12月前
|
JavaScript 前端开发 数据库
TypeScript 期中考试现在开始
相信这段时间来,对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。如果计划开始学习但是还没有开始,或者没有找到资料的同学,可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程,自行学习。
|
Rust JavaScript 前端开发
C# 是 TypeScript 的最佳替补?
C# 是 TypeScript 的最佳替补?
204 0
C# 是 TypeScript 的最佳替补?