你是否听过 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. python面试题(十)

    Python中基本数据结构的操作 元组 列表 字典 集合 定义 新增 更改 删除 2.请尽可能列举python列表的成员方法,并给出一下列表操作的答案: (1)a=[1, 2, 3, 4, 5], a ...

  2. VBA遍历单元格

    Sub test() Dim str Dim i, j i = j = ).UsedRange.Rows.Count ).UsedRange.Columns.Count ).Cells(r, c).V ...

  3. BW模型数据删除

    删除数据一般可以按请求(Request)来删除,需要从顶层模型往下删:也可以完成删除,在模型中就没有删除的顺序.本例中采用完全删除,但是按照从顶层模型往下的顺序删除数据.   1.删除信息立方体数据 ...

  4. kong 了解

      Kong 是在客户端和(微)服务间转发API通信的API网关,通过插件扩展功能.Kong 有两个主要组件: Kong Server :基于nginx  的服务器,用来接收 API 请求. Apac ...

  5. springboot使用hibernate validator校验方式

    一.参数校验 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要 ...

  6. 在Mac和win7上分别安装了docker后,发现原来的vagrant都启动不了了

    在Mac和win7上分别安装了docker后,发现原来的vagrant都启动不了了 liugx@liugx vagrant$ vagrant up /opt/vagrant/embedded/gems ...

  7. linux保存的设置用户/组ID(set-user-ID)的测试

    直接贴代码和结果 // FileName: id.cpp #include <iostream> #include <unistd.h> using namespace std ...

  8. 基于INTEL FPGA硬浮点DSP实现卷积运算

    概述 卷积是一种线性运算,其本质是滑动平均思想,广泛应用于图像滤波.而随着人工智能及深度学习的发展,卷积也在神经网络中发挥重要的作用,如卷积神经网络.本参考设计主要介绍如何基于INTEL 硬浮点的DS ...

  9. java代码啊==indexOf()方法返回字符第一次出现的位置

    package com.s.x; public class Wang { public static void main(String[] args) { if ("woaini" ...

  10. java实现二叉树demo

    二叉树(BinaryTree)是n(n≥0)个结点的有限集,它或者是空集(n=0),或者由一个根结点及两棵互不相交的.分别称作这个根的左子树和右子树的二叉树组成.    这个定义是递归的.由于左.右子 ...