typescript連接配接mysql_TypeScript 中接口詳解

在 TypeScript 中，接口是用作限制作用的，在編譯成 JavaScript 的時候，所有的接口都會被擦除掉，因為 JavaScript 中并沒有接口這一概念。

先看看一個簡單的例子：

function printLabel(labelledObj: { label: string }) {

console.log(labelledObj.label);

}

var myObj = { size: 10, label: "Size 10 Object" };

printLabel(myObj);

那麼在該方法中，labelledObj 的類型就是 {label: string}，看上去可能有點複雜，但我們看見看看下面 myObj 的聲明就知道，這是聲明了一個擁有 size 屬性(值為 10)和 label 屬性(值為 "Size 10 Object")的對象。是以方法參數 labelledObj 的類型是 {label: string} 即表明參數擁有一個 string 類型的 label 屬性。

但是，這麼寫的話，這個方法看上去還是有點讓人糊塗。那麼就可以用接口(interface)來定義這個方法的參數類型。

interface LabelledValue {

label: string;

}

function printLabel(labelledObj: LabelledValue) {

console.log(labelledObj.label);

}

var myObj = { size: 10, label: "Size 10 Object" };

printLabel(myObj);

可選屬性有些時候，我們并不需要屬性一定存在，就可以使用可選屬性這一特性來定義。

interface SquareConfig {

color?: string;

width?: number;

}

function createSquare(config: SquareConfig): { color: string; area: number } {

var newSquare = { color: "white", area: 100 };

if (config.color) {

newSquare.color = config.color;

}

if (config.width) {

newSquare.area = config.width * config.width;

}

return newSquare;

}

var mySquare = createSquare({ color: "black" });

那麼我們就傳入了實作一個 SquareConfig 接口的對象入 createSquare 方法。

既然完全是可有可無的，那麼為什麼還要定義呢？對比起完全不定義，定義可選屬性有兩個優點。1、如果存在屬性，能限制類型，這是十分關鍵的；2、能得到文法智能提示，假如誤将方法體中 color 寫成 collor，那麼編譯是不通過的。

方法類型

在 JavaScript 中，方法 function 是一種基本類型。在面向對象思想中，接口的實作是靠類來完成的，而 function 作為一種類型，是不是能夠實作接口呢？答案是肯定的。

在 TypeScript 中，我們可以使用接口來限制方法的簽名。

interface SearchFunc {

(source: string, subString: string): boolean;

}

var mySearch: SearchFunc;

mySearch = function(source: string, subString: string) {

var result = source.search(subString);

if (result == -1) {

return false;

}

else {

return true;

}

}

上面代碼中，我們定義了一個接口，接口内限制了一個方法的簽名，這個方法有兩個字元串參數，傳回布爾值。在第二段代碼中我們聲明了這個接口的實作。

需要注意的是，編譯器僅僅檢查類型是否正确(參數類型、傳回值類型)，是以參數的名字我們可以換成别的。

var mySearch: SearchFunc;

mySearch = function(src: string, sub: string) {

var result = src.search(sub);

if (result == -1) {

return false;

}

else {

return true;

}

}

這樣也是能夠編譯通過的。

數組類型

在上面我們在接口中定義了方法類型，那麼，數組類型又應該如何定義呢？很簡單。

interface StringArray {

[index: number]: string;

}

var myArray: StringArray;

myArray = ["Bob", "Fred"];

那麼 myArray 就是一個數組，并且索引器是 number 類型，元素是 string。

在接口的定義裡面，索引器的名字一般為 index(當然也可以改成别的，但一般情況下都是保持名字為 index)。是以改成

interface StringArray {

[myIndex: number]: string;

}

var myArray: StringArray;

myArray = ["Bob", "Fred"];

也是 ok 的。

需要注意的是，索引器的類型隻能為 number 或者 string。

interface Array{

[index: number]: any;

}

interface Dictionary{

[index: string]: any;

}

上面兩段都是可以編譯通過的。

最後還有一點要注意的是，如果接口已經是數組類型的話，接口中定義的其它屬性的類型都必須是該數組的元素類型。例如：

interface Dictionary {

[index: string]: string;

length: number; // error, the type of 'length' is not a subtype of the indexer

}

那麼将無法編譯通過，需要将 length 改成 string 類型才可以。

使用類實作接口

一般情況下，我們還是習慣使用一個類，實作需要的接口，而不是像上面直接用接口。

interface ClockInterface {

currentTime: Date;

}

class Clock implements ClockInterface {

currentTime: Date;

constructor(h: number, m: number) { }

}

在 TypeScript 中，使用 class 關鍵字來聲明了，這跟 EcmaScript 6 是一樣的。

另外，我們可以使用接口來限制類中定義的方法。

interface ClockInterface {

currentTime: Date;

setTime(d: Date);

}

class Clock implements ClockInterface {

currentTime: Date;

setTime(d: Date) {

this.currentTime = d;

}

constructor(h: number, m: number) { }

}

在 TypeScript 中，我們可以為接口定義構造函數。

interface ClockInterface {

new (hour: number, minute: number);

}

接下來天真的我們可能會接着這麼寫：

interface ClockInterface {

new (hour: number, minute: number);

}

class Clock implements ClockInterface {

currentTime: Date;

constructor(h: number, m: number) { }

}

這是不行的！！！因為構造函數是 static(靜态)的，而類僅能夠實作接口中的 instance(執行個體)部分。

那麼這個接口中定義的構造函數豈不是沒作用？既然 TypeScript 提供了這項功能，那麼肯定不會是沒作用的。聲明的方法比較特殊：

interface ClockStatic {

new (hour: number, minute: number);

}

class Clock {

currentTime: Date;

constructor(h: number, m: number) { }

}

var cs: ClockStatic = Clock;

var newClock = new cs(7, 30);

正常情況下我們是寫 new Clock 的，這裡就将 Clock 類指向了 ClockStatic 接口。需要注意的是，newClock 變量的類型是 any。

繼承接口

像類一樣，接口也能實作繼承，使用的是 extends 關鍵字。

interface Shape {

color: string;

}

interface Square extends Shape {

sideLength: number;

}

var square = {};

square.color = "blue";

square.sideLength = 10;

當然也能繼承多個接口。

interface Shape {

color: string;

}

interface PenStroke {

penWidth: number;

}

interface Square extends Shape, PenStroke {

sideLength: number;

}

var square = {};

square.color = "blue";

square.sideLength = 10;

square.penWidth = 5.0;

需要注意的是，盡管支援繼承多個接口，但是如果繼承的接口中，定義的同名屬性的類型不同的話，是不能編譯通過的。

interface Shape {

color: string;

test: number;

}

interface PenStroke {

penWidth: number;

test: string;

}

interface Square extends Shape, PenStroke {

sideLength: number;

}

那麼這段代碼就無法編譯通過了，因為 test 屬性的類型無法确定。

同時使用上面所述的類型

如果僅能單一使用某種類型，那麼這接口也未免太弱了。但幸運的是，我們的接口很強大。

interface Counter {

(start: number): string;

interval: number;

reset(): void;

}

var c: Counter;

c(10);

c.reset();

c.interval = 5.0;

這樣就使用到三種類型了，分别是方法(接口自己是個方法)、屬性、方法(定義了方法成員)。

以上所述就是本文的全部内容了，希望大家能夠喜歡。