你是否听过 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 插件。而类似 Sublime Text, Vim and Emacs 编辑器支持语法高亮。 在 VS 2012 编辑器中,还提供了重构和 Go To Definition 等功能。

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

如何获取

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

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

下面是通过 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,希望你能喜欢或者觉得对你有帮助。

英文原文OSCHINA原创翻译

http://www.3kk.com/list74/

译文:TypeScript新手指南的更多相关文章

  1. (译文)开始学习Webpack-应用TypeScript,配置热加载和Source Map

    项目初始化:采用TypeScript 我们的版本是: $ node --version v8.5.0 $ npm --version 5.5.1 npm版本升级了,因为npm最近带来了新特性,本地会生 ...

  2. VSCode搭建node + typescript开发环境

    我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...

  3. UX基础 - OmniGraffle新手指南

    原文地址:http://beforweb.com/node/202,大半夜找到,作为使用手册 我发现一事儿,就是最近这些年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以S ...

  4. 编译TypeScript(TypeScript转JavaScript)

    1.配置tsconfig.json文件 tsconfig.json文件配置说明 { "compilerOptions": { //生成相关说明,TypeScript编译器如何编译. ...

  5. 转载 《我用 TypeScript 语言的七个月》

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  6. 使用 TypeScript,React,ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)

    译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...

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

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

  8. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  9. TypeScript Vs2013 下提示Can not compile modules unless '--module' flag is provided

    VS在开发TypeScript程序时候,如果import了模块有的时候会有如下提示: 这种情况下,只需要对当前TypeScript项目生成设置为AMD规范即可!

随机推荐

  1. .NET 中各种混淆(Obfuscation)的含义、原理、实际效果和不同级别的差异(使用 SmartAssembly)

    长文预警!!! UWP 程序有 .NET Native 可以将程序集编译为本机代码,逆向的难度会大很多:而基于 .NET Framework 和 .NET Core 的程序却没有 .NET Nativ ...

  2. GCD 深入理解(二)

    转自@nixzhu的GitHub主页(译者:Riven.@nixzhu),原文<Grand Central Dispatch In-Depth: Part 2/2> 欢迎来到GCD深入理解 ...

  3. gradle 构建包含源码配置

    参考配置: apply plugin: "idea" apply plugin: "groovy" apply plugin: "eclipse&qu ...

  4. win7下安装ubuntu14.04lts 双系统

    首先,在win7下的硬盘管理 压缩出一块空闲的分区,即压缩卷之后,不做任何操作. 并且确保该空闲卷是“基本”类型     不是的话,参考http://www.jianshu.com/p/2f07312 ...

  5. 什么是spark(六)Spark中的对象

    Spark中的对象 Spark的Conf,极简化的场景,可以设置一个空conf给sparkContext,在执行spark-submit的时候,系统会默认给sparkContext赋一个SparkCo ...

  6. STM32F4XX启动文件分析

    STM32F4XX启动文件分析 - STM32F4XX启动文件下载地址 导读:STM32F4XX启动文件的作用 初始化设置SP,即栈指针 初始化设置PC指针指向复位中断处理函数,即PC = Reset ...

  7. golang的https服务器

    先生成ssl证书 openssl genrsa - openssl req - 然后,大概这样 package main import ( "log" "net/http ...

  8. (转)JavaMail中的Flag(邮件状态)

    本文转载自:http://blog.csdn.net/chjttony/article/details/6005594 标记邮件就是把邮件标记为已读,删除等操作,需要使用Flags类,它mail.ja ...

  9. java代码---charAt()和toCharry()的用法

    总结:charAt()是返回字符型,把字符串拆分成某个字符,返回指定位置的字符.可以把字符串看成char型数组 package com.sads; ///输出一个大写英文字母的 public clas ...

  10. offset()和position()

    网上百度都有的说明是 offset():获取匹配元素在当前视口的相对偏移. position():获取匹配元素相对父元素的偏移. 如果单纯写这两句话,这个博客毫无意义 这里我写下他俩的使用情况,希望对 ...