TypeScript 学习笔记5:Custom Types

原文链接：https://leanpub.com/essentialtypescript/read#leanpub-auto-custom-types

1. 使用interface定义新的类型

1.1. 定义interface

interface Todo {    name: string;    completed: boolean;}

1.2. 使用interface

var todo: Todo = {    name: "Pick up drycleaning",    completed: false};

1.3. 遵守interface 协议

var t1: Todo = {};var t2: Todo = {    name: "Pick up drycleaning"};

这两个变量定义不合法，编译器会报错。因为，它们没有遵守 interface Todo 规定的协议，属性不完整。

1.4. 强制类型转换

var t1 = <Todo>{};

这种写法告诉编译器 t1 符合 Todo 接口。虽然它不符合，但编译器不会报错。

1.5. optional 属性

interface Todo {    name: string;    completed?: boolean;}var t2: Todo = {    name: "Pick up drycleaning"};

completed 后面有个问号，指明：

  1. completed 属性可有可无；

  2. 如果有这个属性，必须是boolean类型。

所以，t2 没有completed属性，但它是符合 Todo 接口的。

1.6. 在接口中定义function

interface ITodoService {    add(todo: Todo): Todo;    delete(todoId: number): void;    getAll(): Todo[];    getById(todoId: number): Todo;}

注意，函数名前面不用写 function 。

2. 使用interface描述function

2.1. 定义函数 interface 

function 本身就是Object，函数体是它的一个属性，当然，它也可以有其他的属性。

interface jQuery {    (selector: string): HTMLElement;    version: number;}

说明：

  1. 这个interface定义一个function接口，它模拟了 jQuery(selector) 这个函数。

  2. 注意第二行，定义了一个没有名字的函数，括号中是参数声明，后面是返回值类型。没想通为什么要这么写，先背下来，反正就得这么写。

  3. 第三行定义了一个属性 —— version。

2.2. 使用函数interface

说明：

  1. 上图中，第七行定义了一个函数，函数名是 $，它遵从 jQuery 接口。

  2. 第11行使用刚刚定义的 $ 函数，获取 id="container" 的DOM element。

  3. 第12行，此时，TypeScript 可以推断出element的类型。

3. 给已有的interface添加属性

下面的代码模拟了 jQuery 的 data() 方法：

interface jQueryElement {    data(name: string): any;    data(name: string, data: any): jQueryElement;}interface jQuery {    (selector: (string | any)): jQueryElement;    fn: any;    version: number;}var $ = <jQuery>function(selector) {    // Find DOM element};var todo = { name: "Pick up drycleaning" };var element = $('#my-element');element.data('todo', todo);var savedTodo = element.data('todo');

第8行，fn:any ，这是jQuery提供的一种plugin模式。

如果我们加上如下代码，会给 jQueryElement 添加 todo() 方法：

$.fn.todo = function(todo?: Todo) {    if(todo) {        $(this).data('todo', todo);    }    else {        return $(this).data('todo');    }}

但是，只添加这些代码是不够的，因为，没有人知道 jQueryElement 添加了 data() 方法。我们需要把它添加到 interface jQueryElement 中：

interface jQueryElement {    data(name: string): any;    data(name: string, data: any): jQueryElement;    todo(): Todo;    todo(todo: Todo): jQueryElement;}

但是，我们不希望这么做，如果这么做，就不叫plugin了，因为，每添加一个方法，都要修改jQueryElement的源代码。

可以这么写：

interface jQueryElement {    data(name: string): any;    data(name: string, data: any): jQueryElement;}interface jQueryElement {    todo(): Todo;    todo(todo: Todo): jQueryElement;}

这不会造成 interface jQueryElement 的重复定义，第二个定义只是给第一个定义添加了两个method。我们可以添加无数个 interface jQuery 定义。

4. enum

interface Todo {    name: string;    state: number; /* New=1, Active=2, Complete=3, Deleted=4 */}

Todo 有四种状态，可以用number来表示。但我们希望它有更好的可读性，因为，遇到下面的代码，不容易猜测它的意图：

function deletTodo(todo: Todo) {    if(todo.state != 3) {        throw "Can't delete incomplete task!";    }}

可以使用 enum 关键字，定义新的类型：

enum TodoState {    New = 1,    Active = 2,    Complete = 3,     Deleted = 4}interface Todo {    name: string;    state: TodoState; }function deletTodo(todo: Todo) {    if(todo.state != TodoState.Complete) {        throw "Can't delete incomplete task!";    }}

5. 匿名类型

回顾一下前面写的 totalLength 函数：

function totalLength(x: (string | any[]), y: (string | any[])): number {    var total: number = x.length + y.length;    return total;}

这个参数列表并不完美，其实，我们只是希望传入的参数带有 number 类型的 length 属性，可以这么写：

function totalLength(x: {length: number}, y: {length: number}): number {    var total: number = x.length + y.length;    return total;}

{ length: number }  定义了一个匿名的 interface。

6. Indexer

第2行代码，它给 [ ] 定义了明确的signature，有了这个定义，最后一行才会出现上下文提示，TypeScript 才知道 comments 变量是个 string[ ] 。