鍍金池/ 教程/ HTML/ 介紹
初始化項(xiàng)目結(jié)構(gòu)
聯(lián)合類(lèi)型
介紹
介紹
介紹
編譯選項(xiàng)
TypeScript 1.6
介紹
介紹
發(fā)展路線(xiàn)圖
介紹
在MSBuild里使用編譯選項(xiàng)
可迭代性
TypeScript 1.3
介紹
介紹
TypeScript 1.1
變量聲明
即將到來(lái)的Angular 2框架是使用TypeScript開(kāi)發(fā)的。 因此Angular和TypeScript一起使用非常簡(jiǎn)單方便
tsconfig.json
介紹
介紹
介紹
在MSBuild里使用編譯選項(xiàng)
使用TypeScript的每日構(gòu)建版本
新建工程
枚舉
三斜線(xiàn)指令
結(jié)合ASP.NET v5使用TypeScript
TypeScript里的this
介紹
TypeScript 1.4
編碼規(guī)范
介紹
模塊解析
ASP.NET 4
架構(gòu)概述
介紹
介紹
ASP.NET Core
TypeScript 1.8
介紹
介紹
創(chuàng)建簡(jiǎn)單工程
TypeScript 1.7
TypeScript 1.5
NPM包的類(lèi)型
支持TypeScript的編輯器

介紹

當(dāng)使用外部JavaScript庫(kù)或新的宿主API時(shí),你需要一個(gè)聲明文件(.d.ts)定義程序庫(kù)的shape。 這個(gè)手冊(cè)包含了寫(xiě).d.ts文件的高級(jí)概念,并帶有一些例子,告訴你怎么去寫(xiě)一個(gè)聲明文件。

指導(dǎo)與說(shuō)明

流程

最好從程序庫(kù)的文檔而不是代碼開(kāi)始寫(xiě).d.ts文件。 這樣保證不會(huì)被具體實(shí)現(xiàn)所干擾,而且相比于JS代碼更易讀。 下面的例子會(huì)假設(shè)你正在參照文檔寫(xiě)聲明文件。

命名空間

當(dāng)定義接口(例如:“options”對(duì)象),你會(huì)選擇是否將這些類(lèi)型放進(jìn)命名空間里。 這主要是靠主觀(guān)判斷 -- 如果使用的人主要是用這些類(lèi)型來(lái)聲明變量和參數(shù),并且類(lèi)型命名不會(huì)引起命名沖突,則放在全局命名空間里更好。 如果類(lèi)型不是被直接使用,或者沒(méi)法起一個(gè)唯一的名字的話(huà),就使用命名空間來(lái)避免與其它類(lèi)型發(fā)生沖突。

回調(diào)函數(shù)

許多JavaScript庫(kù)接收一個(gè)函數(shù)做為參數(shù),之后傳入已知的參數(shù)來(lái)調(diào)用它。 當(dāng)用這些類(lèi)型為函數(shù)簽名的時(shí)候,不要把這些參數(shù)標(biāo)記成可選參數(shù)。 正確的思考方式是“(調(diào)用者)會(huì)提供什么樣的參數(shù)?”,不是“(函數(shù))會(huì)使用到什么樣的參數(shù)?”。 TypeScript 0.9.7+不會(huì)強(qiáng)制這種可選參數(shù)的使用,參數(shù)可選的雙向協(xié)變可以被外部的linter強(qiáng)制執(zhí)行。

擴(kuò)展與聲明合并

寫(xiě)聲明文件的時(shí)候,要記住TypeScript擴(kuò)展現(xiàn)有對(duì)象的方式。 你可以選擇用匿名類(lèi)型或接口類(lèi)型的方式聲明一個(gè)變量:

匿名類(lèi)型var

declare let MyPoint: { x: number; y: number; };

接口類(lèi)型var

interface SomePoint { x: number; y: number; }
declare let MyPoint: SomePoint;

從使用者角度來(lái)講,它們是相同的,但是SomePoint類(lèi)型能夠通過(guò)接口合并來(lái)擴(kuò)展:

interface SomePoint { z: number; }
MyPoint.z = 4; // OK

是否想讓你的聲明是可擴(kuò)展的取決于主觀(guān)判斷。 通常來(lái)講,盡量符合library的意圖。

類(lèi)的分解

TypeScript的類(lèi)會(huì)創(chuàng)建出兩個(gè)類(lèi)型:實(shí)例類(lèi)型,定義了類(lèi)型的實(shí)例具有哪些成員;構(gòu)造函數(shù)類(lèi)型,定義了類(lèi)構(gòu)造函數(shù)具有哪些類(lèi)型。 構(gòu)造函數(shù)類(lèi)型也被稱(chēng)做類(lèi)的靜態(tài)部分類(lèi)型,因?yàn)樗祟?lèi)的靜態(tài)成員。

你可以使用typeof關(guān)鍵字來(lái)拿到類(lèi)靜態(tài)部分類(lèi)型,在寫(xiě)聲明文件時(shí),想要把類(lèi)明確的分解成實(shí)例類(lèi)型和靜態(tài)類(lèi)型時(shí)是有用且必要的。

下面是一個(gè)例子,從使用者的角度來(lái)看,這兩個(gè)聲明是等同的:

標(biāo)準(zhǔn)版

class A {
    static st: string;
    inst: number;
    constructor(m: any) {}
}

分解版

interface A_Static {
    new(m: any): A_Instance;
    st: string;
}
interface A_Instance {
    inst: number;
}
declare let A: A_Static;

這里的利弊如下:

  • 標(biāo)準(zhǔn)方式可以使用extends來(lái)繼承;分解的類(lèi)不能。也可能會(huì)在未來(lái)版本的TypeScript里做出改變:是否允許任意extends表達(dá)式
  • 都允許之后為類(lèi)添加靜態(tài)成員(通過(guò)合并聲明的方式)
  • 分解的類(lèi)允許增加實(shí)例成員,標(biāo)準(zhǔn)版不允許
  • 使用分解類(lèi)的時(shí)候,需要為多類(lèi)型成員起合理的名字

命名規(guī)則

一般來(lái)講,不要給接口加I前綴(比如:IColor)。 因?yàn)門(mén)ypeScript的接口類(lèi)型概念比C#或Java里的意義更為廣泛,IFoo命名不利于這個(gè)特點(diǎn)。

例子

下面進(jìn)行例子部分。對(duì)于每個(gè)例子,首先使用應(yīng)用示例,然后是類(lèi)型聲明。 如果有多個(gè)好的聲明表示方法,會(huì)列出多個(gè)。

參數(shù)對(duì)象

應(yīng)用示例

animalFactory.create("dog");
animalFactory.create("giraffe", { name: "ronald" });
animalFactory.create("panda", { name: "bob", height: 400 });
// Invalid: name must be provided if options is given
animalFactory.create("cat", { height: 32 });

類(lèi)型聲明

namespace animalFactory {
    interface AnimalOptions {
        name: string;
        height?: number;
        weight?: number;
    }
    function create(name: string, animalOptions?: AnimalOptions): Animal;
}

帶屬性的函數(shù)

應(yīng)用示例

zooKeeper.workSchedule = "morning";
zooKeeper(giraffeCage);

類(lèi)型聲明

// Note: Function must precede namespace
function zooKeeper(cage: AnimalCage);
namespace zooKeeper {
    let workSchedule: string;
}

可以用new調(diào)用也可以直接調(diào)用的方法

應(yīng)用示例

let w = widget(32, 16);
let y = new widget("sprocket");
// w and y are both widgets
w.sprock();
y.sprock();

類(lèi)型聲明

interface Widget {
    sprock(): void;
}

interface WidgetFactory {
    new(name: string): Widget;
    (width: number, height: number): Widget;
}

declare let widget: WidgetFactory;

全局或外部的未知代碼庫(kù)

應(yīng)用示例

// Either
import x = require('zoo');
x.open();
// or
zoo.open();

類(lèi)型聲明

declare namespace zoo {
  function open(): void;
}

declare module "zoo" {
    export = zoo;
}

模塊里的單一復(fù)雜對(duì)象

應(yīng)用示例

// Super-chainable library for eagles
import Eagle = require('./eagle');

// Call directly
Eagle('bald').fly();

// Invoke with new
var eddie = new Eagle('Mille');

// Set properties
eddie.kind = 'golden';

類(lèi)型聲明

interface Eagle {
    (kind: string): Eagle;
    new (kind: string): Eagle;

    kind: string;
    fly(): void
}

declare var Eagle: Eagle;

export = Eagle;

將模塊做為函數(shù)

應(yīng)用示例

// Common pattern for node modules (e.g. rimraf, debug, request, etc.)
import sayHello = require('say-hello');
sayHello('Travis');

類(lèi)型聲明

declare module 'say-hello' {
  function sayHello(name: string): void;
  export = sayHello;
}

回調(diào)函數(shù)

應(yīng)用示例

addLater(3, 4, x => console.log('x = ' + x));

類(lèi)型聲明

// Note: 'void' return type is preferred here
function addLater(x: number, y: number, callback: (sum: number) => void): void;

如果你想看其它模式的實(shí)現(xiàn)方式,請(qǐng)?jiān)?a rel="nofollow" >這里留言! 我們會(huì)盡可能地加到這里來(lái)。

上一篇:介紹下一篇:ASP.NET 4