TypeScript 教程

🌙
手机阅读
本文目录结构
axihe

TypeScript 教程

html

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 的区别

https://a.axihe.com/edu/typescript/chaoji.png

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

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

类型批注

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

function Add(left: number, right: number): number {
	return left + right;
}
  • 基本类型的批注是 numberboolstring
  • 而弱或动态类型的结构则是 any 类型。

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

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

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

第一个 TypeScript 实例

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

// www.axihe.com
// 阿西河前端教程
const hello: string = "Hello World!";
console.log(hello);

https://a.axihe.com/edu/typescript/byW9OAfes7.png

编译器

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 开发,支持代码补全、跳转、格式化和快速完成。
axihe

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang