TypeScript 介绍

好吧，我知道这一天迟早会到来。至少，我是这么推测的。几个月前，我去微软参加 MVP 峰会时，听了一场 Anders 的精彩演讲，我问他 C# 的未来是什么。他含糊地说了一些类似“JavaScript 是真正的跨平台语言”的话（我听对了吗？） 

你可以 从这里安装 TypeScript，然后在 Visual Studio 中尝试创建一个带有 TypeScript 的 HTML 应用程序。（开源爱好者们欢呼吧，VI、Sublime 和 Emacs 也支持 TypeScript）

 

TypeScript 中的快速 Hello World 

这是我用 TypeScript 编写的一个快速的 hello world 脚本。你可以看到 TypeScript 文件 (app.ts) 和生成的 app.js 文件。正如我所提到的，它的语法与 C# 非常相似。还有一个大惊喜——顾名思义，TypeScript 支持‘类型’。看看我下面的 HelloWorld 类，我有一个构造函数，它接受一个 HTMLElement，还有一个 sayHello 方法，它接受一个 string 类型的消息。我觉得拥有这些类型契约将是一个巨大的好处，因为这将帮助程序员为函数指定预期的类型。

 

这是 TypeScript 代码和生成的 JavaScript 代码。在 Visual Studio 中工作时，我注意到 Visual Studio 的 TypeScript 编辑器提供了类型推断，这很酷。看看我的 HelloWorld 类——非常自解释。

//Our TypeScript HelloWorld class

class HelloWorld {
    
    //A variable of type HTMLElement
    element: HTMLElement;

    //A Consctructor that accepts an element
    constructor (e: HTMLElement) { 
        this.element = e;
    }

    //A public method
    sayHello(message: string) {
        this.element.innerHTML = message;
    }

}

window.onload = () => {
    var e = document.getElementById('content');

    //Initiate HelloWorld Class
    var hello = new HelloWorld(e);
    hello.sayHello("Hello World");
};

太棒了。现在，这是生成的 JavaScript 代码，它等同于上面的 TypeScript 代码。生成得整洁干净。

var HelloWorld = (function () {
    function HelloWorld(e) {
        this.element = e;
    }
    HelloWorld.prototype.sayHello = function (message) {
        this.element.innerHTML = message;
    };
    return HelloWorld;
})();
window.onload = function () {
    var e = document.getElementById('content');
    var hello = new HelloWorld(e);
    hello.sayHello("Hello World");
};

你甚至可以在你的 TypeScript 类中使用作用域关键字——尝试将 `element` 变量设为 `private`，将 `sayHello` 方法设为 `public`。我还浏览了 TypeScript 规范，除了类型支持之外，这里还有一些我注意到的其他有趣的点。

函数类型

TypeScript 使用函数类型来处理回调。让我们修改上面的代码，加入一个回调。可以看到，我给 sayHello 方法添加了一个 notify 参数，其类型为

(feedback : string)=>any

这简单地表示一个函数，它接受一个 string 类型的输入参数，并返回‘any’类型的值给调用者（参见下面的‘any’类型）。在 sayHello 完成后，我们调用 notify(..) 回调，它将调用我们从 window.onload 传递给 sayHello 的 function(..)。这几乎就像在 C# 中传递一个委托类型的函数并将其回调一样。

//Our TypeScript class now with Callbacks

class HelloWorld {
    
    //A variable of type HTMLElement
    element: HTMLElement;

    //A Consctructor that accepts an element
    constructor (e: HTMLElement) { 
        this.element = e;
    }

    //A public method. See notify paramter is now taking a Function Type
    sayHello(message: string, notify: (feedback : string)=>any ) {
        alert(message);
        //Do some other complex stuff here
        notify("completed sayHello");
    }

}

window.onload = () => {
    var e = document.getElementById('content');

    //Initiate HelloWorld Class
    var hello = new HelloWorld(e);
    hello.sayHello("Hello World", function (feedback) {
            alert(feedback);
        }
    );
};

运行项目，打开 HTML 页面，你将看到第一个带有“hello world”的消息框，以及第二个带有“completed sayHello”消息的消息框。非常酷。我们已经学会了如何在 TypeScript 中编写类型安全的、优雅的回调，而不用担心闭包。

对象类型 

对象类型看起来像 { parameter1: type1, parameter2: type2, … }。例如：

{name: string, age: number}

你可以像这样给对象类型命名。

 interface Human 
   {
    name: string, 
    age: number
   }

定义了一个接口后，你就可以使用它作为契约，用于指定输入、返回类型、回调等，并获得完整的 IntelliSense 支持。请看下面的示例。

关于 TypeScript 中的基于类型的契约

TypeScript 有多种类型。这里有一个快速概述：

‘any’类型

“Any 类型是所有类型的超集”

• 示例
  • var x : any; // x 被显式类型化为 any
  • var y; // y 的类型默认为 any，因为没有指定其他类型

基本类型

TypeScript 支持 number、bool、string、null 和 undefined

• 示例
  • 数字
    • var num : number;
    • var num = 20; // num 变量将自动推断为 number 类型，与 var num : number = 20 相同
  • 字符串
    • var name : string;
    • var message=”hello”; // message 变量将自动推断为 string 类型
  • Bool
    • var isOpen : bool;
    • var isEnabled=true; // isEnabled 变量将自动推断为 bool 类型

‘void’类型

用作不返回任何值的函数的返回类型

对象类型

这包括类、接口、模块和字面量类型。这些对象类型包含一个或多个

• 属性
• 调用签名（与调用操作关联的参数和返回类型）
• 构造签名（与应用“new”运算符相关联的参数和返回类型）
• 索引签名
• 品牌（Brands 是给定对象类型所属的类别）

• 稍后将详细介绍。示例：
  • Object obj = {name : “Vinod”, age: 30 };
  • Function square = (x: number)=> x * x; // 几乎类似于 C# 中的 lambda 语法

结论

总的来说，我发现 C# 开发者和 TypeScript 之间有一种奇特的吸引力。我能够轻松上手，并在几个小时内掌握了基础知识。当然，在元级别上引入类型（已澄清：即，用于启用函数、输入参数、返回类型等的明确定义的契约），同时仍然保持 JavaScript 的动态特性是一件大事，因为这意味着更好的重构、更容易的维护和更好的文档。享受 TypeScript，我非常确定我很快会写更多关于它的内容。我爱上了 TypeScript。 在 Twitter 上关注我，而且一定要关注我的博客