一、TypeScript先容
在引入编程社区 20 多年后，JavaScript 现在已成为有史以来应用最广泛的跨平台语言之一。JavaScript 最初是一种用于向网页添加微不足道的交互性的小型脚本语言，现已发展成为各种规模的前端和后端应 用步伐的首选语言。固然用 JavaScript 编写的步伐的大小、范围和复杂性呈指数级增长，但 JavaScript 语言表达差异代码单元之间关系的能力却没有。结合 JavaScript 相称奇异的运行时语义，语言和步伐复 杂性之间的这种不匹配使得 JavaScript 开发成为一项难以大规模管理的任务。
步伐员编写的最常见的错误范例可以描述为范例错误：在预期差异范例的值的地方使用了某种范例的 值。这大概是由于简单的拼写错误、无法理解库的 API 表面、对运行时行为的错误假设或其他错误。 TypeScript 的目的是成为 JavaScript 步伐的静态范例检查器——换句话说，是一个在代码运行之前运行 的工具（静态）并确保步伐的范例正确（范例检查）。 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这 个语言添加了可选的静态范例和基于类的面向对象编程。
总而言之，ts是js的语言扩展，给js提供了一层范例检查。
二、JS ,ES ,TS的关系
TypeScript 是 JavaScript 的超集，即包罗JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了 JavaScript 的语法。相比于JavaScript ，它还增加了静态范例、类、模块、接口和范例注解方面的功能， 更易于大项目的开发。
三、TypeScript 与 JavaScript 的区别
四、 TypeScript入门
JavaScript现实中问题
JavaScript 中的每个值都有一组行为，您可以通过运行差异的利用来观察。这听起来很抽象，我们来举 一个简单的例子，考虑我们大概对名为 message 的变量运行的一些利用：
- // 在 'message' 上访问属性 'toLowerCase'，并调用它
- message.toLowerCase();
- // 调用 'message'
- message();
但是假设我们不知道 message 。这很常见——我们无法可靠地说出尝试运行任何这些代码会得到什么效果。每个利用的行为完全取决于我们最初给 message 的赋值。
- 可以调用 message 吗？
- 它有 toLowerCase 这个属性吗？
- 假如能， toLowerCase 可以调用吗？
- 假如这两个值都是可调用的，它们返回什么？
这些问题的答案通常是我们在编写 JavaScript 时牢记在心的东西，我们必须希望所有细节都正确。
假设 message 按以下方式定义：
- const message = "Hello World!";
- TypeError: message is not a function
当我们运行我们的代码时，我们的 JavaScript 运行时选择做什么的方式是通过确定值的范例——它具有 什么样的行为和功能。这 TypeError就是暗指的一部分- 它说字符串 "Hello World!" 不能作为函数调用。
TypeScript就用诸多特性为我们解决了困扰我们的问题，我接下来将先容他们：
静态范例检查
回想一下 TypeError 我们之前尝试将 string 作为函数调用的情况。 大多数人不喜欢在运行他们的代码 时出现任何范例的错误 - 这些被以为是错误！当我们编写新代码时，我们会尽量避免引入新的错误。
抱负情况下，我们可以有一个工具来帮助我们在代码运行之前发现这些错误。这就是像 TypeScript 这样 的静态范例检查器所做的。 静态范例系统描述了当我们运行步伐时我们的值的形状和行为。像 TypeScript 这样的范例检查器，告诉我们什么时间事情大概会出轨。
非非常故障
例如，规范说尝试调用不可调用的东西应该抛堕落误。也许这听起来像是“显着的行为”，但您可以想象 访问对象上不存在的属性也应该抛堕落误。相反，JavaScript 给了我们差异的行为并返回值 undefined。
最终，静态范例系统要求必须调用哪些代码，应该在其系统中标记，即使它是不会立即抛堕落误的“有 效”JavaScript。好比：在 TypeScript 中，以下代码会产生关于 location 未定义的错误：
TypeScript 可以在我们的步伐中捕捉许多正当的错误。
显式范例
引入一个案例：
hello.ts
- function greet(person, date) {
- console.log(`Hello ${person}, today is ${date}!`);
- }
-
- greet("hyyyyy");
有了这个，TypeScript 可以告诉我们其他 greet 大概被错误调用的情况。例如修改一下 hello.ts 代 码：
- function greet(person: string, date: Date) {
- console.log(`Hello ${person}, today is ${date.toDateString()}!`);
- }
嗯？TypeScript 在我们的第二个参数上报告了一个错误，这是为什么呢？ 也许令人惊讶的是， Date() 在 JavaScript 中调用会返回一个 string 。可以使用 new Date() 满足我们 的渴望,快速修复错误：
- function greet(person: string, date: Date) {
- console.log(`Hello ${person}, today is ${date.toDateString()}!`);
- } greet("hyyyy", new Date());
什么是 TypeScript 降级编译？
TypeScript 降级编译是指将 TypeScript 代码编译为较低版本的 JavaScript 代码（如 ES5、ES3 等），以确保代码可以在旧版欣赏器或环境中运行。
- 为什么需要降级编译？
- 新版 JavaScript（如 ES6+）引入了许多新特性（如箭头函数、类、模块等），但这些特性在旧版欣赏器（如 IE11）或某些环境中不被支持。
- 通过降级编译，可以将这些新特性转换为旧版 JavaScript 语法，从而确保代码的兼容性。
ypeScript 编译器（tsc）的作用
TypeScript 编译器（tsc）是 TypeScript 的核心工具，负责将 TypeScript 代码编译为 JavaScript 代码。它支持以下功能：
- 将 TypeScript 语法转换为 JavaScript 语法。
- 支持将代码降级到指定的 JavaScript 版本（如 ES5、ES3）。
- 提供范例检查和错误提示。
目的版本（target）
在 TypeScript 编译中，target 是一个关键设置选项，用于指定编译后的 JavaScript 目的版本。例如：
- es3：将代码编译为 ES3 语法（兼容性最好，但代码体积较大）。
- es5：将代码编译为 ES5 语法（兼容大多数旧版欣赏器）。
- es6（或 es2015）：将代码编译为 ES6 语法（支持现代欣赏器）。
- esnext：将代码编译为最新版本的 JavaScript。
严格模式
差异的用户使用 TypeScript 在范例检查器中，希望检查的严格程度差异。
有些人正在寻找更宽松的验证体验，它可以帮助仅验证其步伐的某些部分，并且仍然拥有不错的工具。这是 TypeScript 的默认体验， 此中范例是可选的，推理接纳最宽松的范例，并且不检查潜伏的 null / undefined 值，就像 tsc 面临错 误时如何编译生成JS文件一样。假如你要迁移现有的 JavaScript，这大概是抱负的第一步。
相比之下，许多用户更喜欢让 TypeScript 尽大概多地立即验证，这就是该语言也提供严格性设置的原 因。这些严格性设置将静态范例检查，从开关（无论您的代码是否被检查）变革为更接近于拨号的东西。你把这个拨盘调得越远，TypeScript 就会为你检查越多。这大概需要一些额外的工作，但总的来 说，从长远来看，它是物有所值的，并且可以实现更彻底的检查和更正确的工具。假如大概，新的代码 库应该始终打开这些严格性检查。
TypeScript 有几个可以打开或关闭的范例检查严格标记，除非尚有阐明，否则我们所有的示例都将在启 用所有这些标记的情况下编写。在命令行里设置 strict ，或在 tsconfig.json 中设置 "strict": true 将它打开。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
