Type入门(JavaScript的超集)-译

 

你是否听过 TypeScript?

TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口。TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的。

为什么会有 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 非常易学和易于理解

语言特性

  • 接口
  • 模块
  • 类型注解
  • 编译时类型检查
  • Arrow 函数 (类似 C# 的 Lambda 表达式)

JavaScript 与 TypeScript 的区别

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

支持的编辑器

现如今,Visual Studio 2012 支持 TypeScript 模块/语法高亮,但需要安装 TypeScript 插件。而类似 Sublime Text, Vim and Emacs 编辑器支持语法高亮。

在 VS 2012 编辑器中,还提供了重构(Refactor)和 转到定义(Go To Definition)等功能。

Note: TypeScipt不依赖任何 IDE,你可以在任何应用中将 TypeScript 编译成 JavaScript。

如何获取

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

Note: 请关闭其他应用程序来避免安装时的一些问题。

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

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

如何编译 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 被自动编译,你可以了解下 Sholo.TypeScript.Build , Web Essentials 2012.

TypeScript 项目/文件 模板

如果你在 Visual Studio 2012 上安装了插件,你会看到如下模板:

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 文件中有如下内容将会被自动编译:

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

你也可以在线Try一下:Playground

更多阅读资料

总结

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

英文原文

作者:X-Space 
出处:http://www.cnblogs.com/xspaceworld/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 
 

你是否听过 TypeScript?的更多相关文章

  1. [译] TypeScript入门指南(JavaScript的超集)

    你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父 ...

  2. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  3. [转载]TypeScript 入门指南

    之前有听过,但未使用过,而最近在用nodejs,angularjs做一些前端项目,想到了这个来,正是学习TypeScript的时候,看介绍貌似和coffeescript相似,也JavaScript的转 ...

  4. 译文:TypeScript新手指南

    你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...

  5. TypeScript 入门指南

    你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...

  6. Nodemon 如何实时监听 TypeScript 项目下的文件并热部署?

    首先你的项目要安装ts-node和nodemon: npm i -D ts-node nodemon 在package.json文件中配置运行脚本: "dev": "no ...

  7. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  8. TypeScript

    TypeScript: Angular 2 的秘密武器(译)   本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch? ...

  9. 转职成为TypeScript程序员的参考手册

    写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...

随机推荐

  1. [ACM] POJ 2418 Hardwood Species (Trie树或map)

    Hardwood Species Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 17986   Accepted: 713 ...

  2. iOS学习笔记---简单的学习总结

    1.xcode6.0官方的版本必须是OS X10.9.4而以上的版本安装前: 2,xcode6.0正式版创建命令行项目时,无法选择swift语言:可是创建iOS应用项目时能够选择swift语言. 3, ...

  3. HDU1532 Drainage Ditches 【最大流量】

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. 实现 mouse-drag 的图标拖动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. SEO要领:8文章主持技巧(两)

    续篇:搜索引擎优化要领:8条辅助技巧(一) 四.检查你的robots.txt文件 与谷歌的蜘蛛通信的经常用法是使用robots.txt文件. 这是一个文本文件.同意你告诉搜索引擎,你的站点的网页上抓取 ...

  6. 我的MYSQL学习心得(七)

    原文:我的MYSQL学习心得(七) 我的MYSQL学习心得(七) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...

  7. iOS开发分析&quot;秘密&quot;App内容页面的效果(两)

    @我前几天写的"秘密"的Cell制品的效果,想要的效果还是有差距,并且扩展性非常不好,于是重写封装,把总体视图都放到scrollView中,基本是和secret app 一模一样的 ...

  8. Call to undefined function mssql_connect()错误解决

    原文:Call to undefined function mssql_connect()错误解决 同事用php+mssql修改一个系统,却一直配置不了环境.遂做了一个测试,一般情况下我们会注意php ...

  9. Swift # 柯里化函数

    前言 此次文章,讲述的是Swift的一个新特性(柯里化函数),可能很多iOS开发人员是第一次听这个词汇,包括我自己也是,自己也用了几天时间才总结出来,希望能帮助到各位咯,个人感觉偏向有开发经验的码友, ...

  10. Java数据结构与算法(3) - ch04栈(栈和转置)

    栈的基本特性是后进先出,最简单的用途是用于转置,还有其他诸如括号匹配,中序表达式(A+B*(C-D/(E+F)) --> ABCDEF+/-*+)和后续表达式(345+*612+/- --> ...