博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
TypeScript 入门指南
阅读量:5977 次
发布时间:2019-06-20

本文共 2468 字,大约阅读时间需要 8 分钟。

  hot3.png

你是否听过 TypeScript?

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

为什么会有 TypeScript?   

JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概念,而 TypeScript 扩展了 JavaScript 实现了这些特性。TypeScript 主要特点包括:

  • TypeScript 是微软推出的开源语言,使用 Apache 授权协议

  • TypeScript 是 JavaScript 的超集. 

  • TypeScript 增加了可选类型、类和模块

  • TypeScript 可编译成可读的、标准的 JavaScript

  • TypeScript 支持开发大规模 JavaScript 应用

  • TypeScript 设计用于开发大型应用,并保证编译后的 JavaScript 代码兼容性

  • TypeScript 扩展了 JavaScript 的语法,因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改

  • TypeScript 文件扩展名是 ts,而 TypeScript 编译器会编译成 js 文件

  • TypeScript 语法与 JScript .NET 相同

  • TypeScript 易学易于理解

语法特性

  • 类 Classes

  • 接口 Interfaces

  • 模块 Modules 

  • 类型注解 Type annotations

  • 编译时类型检查 Compile time type checking 

  • Arrow 函数 (类似 C# 的 Lambda 表达式)

JavaScript 的 TypeScript 的区别

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

编辑器支持

Visual Studio 2012 支持 TypeScript 模块/语法高亮,这个需要安装 TypeScript 插件。而类似  编辑器支持语法高亮。 在 VS 2012 编辑器中,还提供了重构和 Go To Definition 等功能。

Refactor Goto Definition , HTML Application with TypeScript - Shemeer

注意: TypeScript 不依赖任何 IDE,你可在任何应用中自行将 TypeScript 编译成 JavaScript。

如何获取

可通过以下两个方法来安装 TypeScript:

  • 通过 Node.js 包管理器 () 

  • 通过与 Visual Studio 2012 继承的 MSI. () 

注意: 需要关闭其他应用程序来避免安装时的一些问题。

下面是通过 MSI 文件安装时的界面:

07215155_t6wu.gif

如果你只是想先看看 TypeScript 而已,可 .  

如何编译 TypeScript   

要在应用中使用 TypeScript 必须先编译,编译的结果是生成 js 文件,你可通过 TypeScript 编译器 tsc 来完成这个过程。

如果你在 Visual Studio 2012 中使用 TypeScript,它会自动将 ts 文件编译成 js 文件。

TypeScript 编译器模板被安装在如下路径:

    C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0

或者是:

    C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0

要编译 TypeScript 文件,可使用如下命令:

    tsc filename.ts

一旦编译成功,就会在相同目录下生成一个同名 js 文件,你也可以通过命令参数来修改默认的输出名称。

如果你希望 TypeScript 被自动编译,你可以了解下  ,  

TypeScript 项目/文件 模板

一旦你在 Visual Studio 2012 上安装了插件,你会获得如下模板:

HTML Application with TypeScript  

07215159_aX8b.png

MVC – TypeScript Internet Application

07215201_ayUV.png

TypeScript File

07215202_3mYC.png

首个用 TypeScript 编写的 HTML 应用

现在我开始用 TypeScript 创建一个简单的 HTML 应用。

首先通过 File -> New-Project 新建项目:

07215203_oRYI.png

输入必要信息,点击 Ok 按钮,创建后项目模板如下:

07215205_ZR7F.png

我们将看到 app.js 依赖于 app.ts,默认的 app.ts 文件包含类和构造函数等等,如下图:

07215205_H4qj.png

TypeScript 文件将会被编译为 JavaScript (app.js),下面是编译后的 JavaScript 代码:

07215206_EVwI.png

然后我们可以在页面中引用 JavaScript

07215207_eEtS.png

当你构建或者重新构建项目时,你将看到提示是否重新编译 TypeScript 的信息:

07215208_xihA.png

如果在 .??proj 文件中有如下内容将会被自动编译:

07215208_g5Kh.png

当你运行此应用时会在页面上显示当前的日期和时间

07215210_Ghig.gif

你也可以在线玩玩: 

Playground TypeScript - Shemeer

更多阅读资料    

  • TypeScript 微软官方网站  

  • TypeScript 在线玩-  

  • TypeScript 源码  

  •  

总结  

这篇文章中我们简单的介绍了如何使用 TypeScript,希望你能喜欢或者觉得对你有帮助。

,原创翻译

转载于:https://my.oschina.net/Weltch/blog/617554

你可能感兴趣的文章
绑定到异步的ObservableCollection
查看>>
使用beetle简单地实现高效的http基础服务
查看>>
坚果云开发团队分享高效代码审查经验
查看>>
不考虑线程安全的初级单例C++代码
查看>>
柯乐义SQLServer访问类
查看>>
Java 编程下 Overload 和 Override 的区别
查看>>
社区网站系统 jsGen
查看>>
(转)NandFlash详述
查看>>
Autodesk Infrastructure Map Server(AIMS)/MapGuide API 培训材料--第2章
查看>>
免费开发者兼容性测试工具Modern.IE
查看>>
线程什么时候需要同步,什么时候不需要同步?
查看>>
Struts2 自定义拦截器(方法拦截器)
查看>>
python三种字符串拼接效率对比
查看>>
并行开发——Parallel的使用 -摘自网络
查看>>
Html5用Canvas制作画图板
查看>>
SCI完全攻略:从构思到发表
查看>>
Android 命名规范 (提高代码可以读性)
查看>>
MsoShapeType /InlineShape枚举
查看>>
计算从1970年到现在累计的秒数
查看>>
Android 开发环境搭建以及工具(不断更新)
查看>>