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

英文原文

[译] TypeScript入门指南(JavaScript的超集)的更多相关文章

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

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

  2. [转载]TypeScript 入门指南

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

  3. TypeScript 入门指南

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

  4. TypeScript 入门指南 【大白话】

    前言 聊聊为何要学习TypeScript? 从开发角度来讲, TypeScript 作为强类型语言,对属性有类型约束.在日常开发中少了减少了不必要的因参数类型造成的BUG,当你在使用同事封装好的函数时 ...

  5. 【译】JWT(JSON Web Token) 入门指南

    JWT 入门指南 原文地址:https://blog.angular-university.io/angular-jwt/ 这篇文章是两篇手把手教你如何在Angular应用(也适用于企业级应用)中实现 ...

  6. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  7. Webpack 入门指南 - 3. Hello, Angular2!

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

  8. 使用TypeScript如何提升JavaScript编程效果?

    TypeScript是个什么鬼?和JavaScript有什么关系? TypeScript是由微软开发的一种可快速入门的开源的编程语言,是JavaScript的一个超集,且向这个语言添加了可选的静态类型 ...

  9. TypeScript学习指南--目录索引

    关于TypeScript: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeS ...

随机推荐

  1. libevent和基于libevent的网络编程

    1 libevent介绍和安装 介绍 libevent是一个轻量级的基于事件驱动的高性能的开源网络库,并且支持多个平台,对多个平台的I/O复用技术进行了封装,当我们编译库的代码时,编译的脚本将会根据O ...

  2. Navicat for PostgreSQL 必须知道的十大功能

    Navicat for PostgreSQL 是一套易于使用的图形化 PostgreSQL 数据库管理工具.可使用强劲的 SQL 编辑器创建和运行查询.函数和使用多功能的数据编辑工具管理数据.Navi ...

  3. C#使用结构来传递多个参数

    当参数超过5个时,建议用结构来传递多个参数. 示例代码如下: public struct MyStruct { public string str; public int number; } clas ...

  4. 日志处理--Logo4Net与文件的并发处理

    本文参考自:http://www.cnblogs.com/jiekzou/ 多线程操作同一个文件时会出现并发问题.解决的一个办法就是给文件加锁(lock),但是这样的话,一个线程操作文件时,其它的都得 ...

  5. js 触发select onchange事件

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...

  6. Ubuntu安装wps for linux

    1.WPS For Linux 2013 还是只提供了32位版本,我用的是 64位 Ubuntu,如果您也是64位系统,还需要提前安装一些32位的库文件. sudo apt-get install i ...

  7. tcp,第一个例子,客户端,服务端

    1.客户端 package cd.itcast.xieyi; import java.io.IOException; import java.io.OutputStream; import java. ...

  8. 【转】DCC32的参数详解

    完整的内容如下: // DCC32编译器的设置说明. // Dcc32 [options] filename [options] // DCC32 [操作选项] 文件名称 [操作选项] // -A&l ...

  9. How to create Lookup Worker Filtered by Legal Entity[AX2012]

    1. Add a new method in hcmWorker table, and add this script : public static client void lookupWorker ...

  10. Python之MySql操作

    1.安装驱动 输入命令:pip install MySQL-python 2.直接使用驱动 #coding=utf-8 import MySQLdb conn= MySQLdb.connect( ho ...