TypeScript系列教程01入门介绍

Posted 2022-03-08 孙叫兽

目录

什么是TypeScript?

TypeScript 的过去与现在?

JavaScript 与 TypeScript 的区别?

类型批注

第一个 TypeScript 实例

编译器

IDE 和编辑器支持

---

什么是TypeScript?

TypeScript 是 javascript 的一个严格超集；

由于 TypeScript 是 JavaScript 的严格超集，任何现有的 JavaScript 代码都是符合 TypeScript 标准的；

通俗的讲，就是你可以在`.ts`文件内写JavaScript代码；

TypeScript 在 JavaScript的基础上，添加了可选的静态类型，和使用看起来像基于类的面向对象编程语法操作 Prototype。

TS 支持 ECMAScript 6 标准。

TypeScript 设计目标是开发大型应用，然后转译成 JavaScript。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 的过去与现在?

TypeScript最初被大家认识，是从Angular开始的，那时候官方感觉Angular1.X不能够满足一个项目的多人员开发需求，所以升级到2.X版本的时候；出现了断层，直接上了TypeScript，语法都是大不相同，同时使用Angular作为项目名；

Angular 1.X 使用 Angular.js的名字，在国内被很多布道者抛弃了；很多培训班开始还教Angular，后来因为改版比较大，老师需要重新研究，所以基本都是暂停开课了，后来因为市场需求比较小，也就慢慢不可相对应的Angular课了。

当时Angular被喷惨了，现在趋势来看，Google的Angular团队的决定还是非常赞的！当初那些喷TypeScript的人，又开始捧TypeScript了；

我们一定要有自己的判断，不要人云亦云；很多技术人员说是要努力接受新事物，但是触及自己利益，与自身利益相冲突的时候，很多人选择守住自己的一亩三分地，小伙伴们一定不要有这种心态啊！

JavaScript 与 TypeScript 的区别?

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

类型批注

TypeScript 在编译时启动类型检查通过类型批注来判断是否符合。类型批注是可选的，而且可以忽略。

function Add(left: number, right: number): number 
	return left + right;

 

• 基本类型的批注是 number、bool 和 string。
• 而弱或动态类型的结构则是 any 类型。

类型批注可以被导出到一个单独的“声明文件”，以让使用类型已被编译为 JavaScript 的 TypeScript 脚本中的类型信息仍可用。批注可以为一个现有的 JavaScript 库声明，就像已经为 Node.js 和 jQuery 所做的那样。

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

第一个 TypeScript 实例

以下实例我们使用 TypeScript 来输出 Hello World!:

const hello: string = "Hello World!";
console.log(hello);

编译器

TypeScript 编译器，叫做 tsc，本身也是用 TypeScript 写成的。

可以将 TypeScript 编译为可以在任何 JavaScript 引擎（如浏览器）中执行的标准 JavaScript。

• 编译器包也包含了脚本解释器，用来执行编译器。

• 同时也有个 Node.js 包，在 Node.js 平台执行。

另外还有一个用 JavaScript 写的 alpha 版本的客户端编译器，它在页面加载时，实时执行 TypeScript 代码。

这种编译器的当前版本默认支持 ECMAScript 5。

一个选项是允许以 ECMAScript 2015 为目标，以利用该版本独有的语言特性（比如生成器）。类尽管是 ECMAScript 2015 标准的一部分，在这两个模式下都可以使用。

IDE 和编辑器支持

主流的编辑器，均支持TypeScript；

• Visual Studio Code
  • 它支持 TypeScript，同时也支持其他几个语言，同时提供了调试和自动代码补全的功能。
• JetBrains
  • 在他们的 IDE 系列中支持 TypeScript，而且已经发行了具有部分支持的 phpStorm 6 和 WebStorm 6 以及 IntelliJ IDEA。
  • 同时他们的 Visual Studio 扩展 ReSharper 8.1 也支持。
• Atom
  • 也有一个 TypeScript 插件， 由 Basarat 开发，支持代码补全、跳转、格式化和快速完成。