译文:TypeScript新手指南
你是否听过 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 不依赖任何 IDE,你可在任何应用中自行将 TypeScript 编译成 JavaScript。
如何获取
可通过以下两个方法来安装 TypeScript:
- 通过 Node.js 包管理器 (npm)
- 通过与 Visual Studio 2012 继承的 MSI. (Click here to download)
注意: 需要关闭其他应用程序来避免安装时的一些问题。
下面是通过 MSI 文件安装时的界面:
如果你只是想先看看 TypeScript 而已,可 click here.
如何编译 TypeScript
要在应用中使用 TypeScript 必须先编译,编译的结果是生成 js 文件,你可通过 TypeScript 编译器 tsc 来完成这个过程。
如果你在 Visual Studio 2012 中使用 TypeScript,它会自动将 ts 文件编译成 js 文件。
TypeScript 编译器模板被安装在如下路径:
1 |
C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0 |
或者是:
1 |
C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0 |
要编译 TypeScript 文件,可使用如下命令:
1 |
tsc filename.ts |
一旦编译成功,就会在相同目录下生成一个同名 js 文件,你也可以通过命令参数来修改默认的输出名称。
如果你希望 TypeScript 被自动编译,你可以了解下 Sholo.TypeScript.Build , Web Essentials 2012.
TypeScript 项目/文件 模板
一旦你在 Visual Studio 2012 上安装了插件,你会获得如下模板:
HTML Application with TypeScript

MVC – TypeScript Internet Application

TypeScript File

首个用 TypeScript 编写的 HTML 应用
现在我开始用 TypeScript 创建一个简单的 HTML 应用。
首先通过 File -> New-Project 新建项目:

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

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

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

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

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

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

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

你也可以在线玩玩:Playground
更多阅读资料
- TypeScript 微软官方网站 http://www.typescriptlang.org/
- TypeScript 在线玩- http://www.typescriptlang.org/Playground/
- TypeScript 源码 typescript.codeplex.com
- Anders Hejlsberg: Introducing TypeScript
总结
这篇文章中我们简单的介绍了如何使用 TypeScript,希望你能喜欢或者觉得对你有帮助。
http://www.3kk.com/list74/
译文:TypeScript新手指南的更多相关文章
- (译文)开始学习Webpack-应用TypeScript,配置热加载和Source Map
项目初始化:采用TypeScript 我们的版本是: $ node --version v8.5.0 $ npm --version 5.5.1 npm版本升级了,因为npm最近带来了新特性,本地会生 ...
- VSCode搭建node + typescript开发环境
我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...
- UX基础 - OmniGraffle新手指南
原文地址:http://beforweb.com/node/202,大半夜找到,作为使用手册 我发现一事儿,就是最近这些年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以S ...
- 编译TypeScript(TypeScript转JavaScript)
1.配置tsconfig.json文件 tsconfig.json文件配置说明 { "compilerOptions": { //生成相关说明,TypeScript编译器如何编译. ...
- 转载 《我用 TypeScript 语言的七个月》
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- 使用 TypeScript,React,ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)
译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...
- TypeScript: Angular 2 的秘密武器(译)
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- TypeScript为Zepto编写LazyLoad插件
平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...
- TypeScript Vs2013 下提示Can not compile modules unless '--module' flag is provided
VS在开发TypeScript程序时候,如果import了模块有的时候会有如下提示: 这种情况下,只需要对当前TypeScript项目生成设置为AMD规范即可!
随机推荐
- ASP.NET Core 中的Ajax全局Antiforgery Token配置
前言 本文基于官方文档 <在 ASP.NET Core 防止跨站点请求伪造 (XSRF/CSRF) 攻击>扩展另一种全局配置Antiforgery方法,适用于使用ASP.NET Core ...
- 剑指offer第四章
剑指offer第四章 1.二叉树的镜像 二叉树的镜像:输入一个二叉树,输出它的镜像 分析:求树的镜像过程其实就是在遍历树的同时,交换非叶结点的左右子结点. 求镜像的过程:先前序遍历这棵树的每个结点,如 ...
- 接口测试框架——第四篇-url、excel内容等
到现在为止,发送邮件(email_module).读excel(excel_module).发送requests(requests_module).常量(setting)我们都已经完成了,看看第一篇中 ...
- vue踩坑记录
一.element resetFields 方法报错 网上查的解决方案 resetForm(formName) { this.$nextTick(() => { this.$refs[formN ...
- Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- Java Language Changes for Java SE 9
Java9引入了module模块的概念,是类与接口和数据资源的一种封装,并可以声明与其他模块的依赖关系.这里总结一下Java9带来的新特性. 更简练的try-with-resources语句 fina ...
- FPGA时序约束一点总结
时序约束的一点总结. 打拍.掌握好时序. 手动分配位置,这个不是一定有效. 打破层级或者物理综合,或者自动加流水等综合优化参数调整. 根据实际情况使用异步时钟策略. 换速度更快的片子. 最也进接手一个 ...
- Excel信息提取之二
Sub 订单归纳() Dim sh1 As Worksheet, sh2 As Worksheet, sh3 As Worksheet Dim dic1 As Object, dic2 As Obje ...
- 汇编_压缩BCD码和非压缩BCD码
BCD码是表示十进制数的,非压缩BCD码是用8位表示的,其实只用低4位,高4位全为0. 例如,十进制数36,用非压缩BCD码表示为:0000 0011 0000 0110 ,这是两个字节. 压缩BCD ...
- 阻塞队列之六:LinkedBlockingDeque
一.LinkedBlockingDeque简介 java6增加了两种容器类型,Deque和BlockingDeque,它们分别对Queue和BlockingQueue进行了扩展. Deque是一个双端 ...

