在TS中有非常怪異的類型兼容的問題 : 如下

1 2 3 4 5 6 7 8 9 10 11 12 13

interface??LengthWish{ ????length?:?number; } class?A{ ????length?:?number; ????constructor(){ ????????this.length?=?2; ????} } //定義一個LengthWish類型的變量 let?_l?:?LengthWish?=?new?A(); console.log(`length?value?is?:?${?_l.length?}`);

在C#/Java等高級語言語言中, 可以這這么理解 : A 尚未繼承 LengthWish , 所以這個會報錯 .?

看到結果是不是相當差異,TS這貨在這點上完全不按OOP的套路出牌啊.

原理是 , 接口LengthWish中有成員字段length , 而類A中正好也有一個length字段并且類型(number)與接口一致,所以 ... 額

繼續擴展 , 如下:

1 2 3 4 5 6 7 8

interface??LengthWish{ ????length?:?number; } //定義一個LengthWish類型的變量 let?_l?:?LengthWish?=?null; let?_c?=?{?length?:?5?,?count?:?10?}; _l?=?_c; console.log(`length?value?is?:?${?_l.length?}`);

結果如下:

不過count字段也跑進_l變量里面了:

既然count存在于_l中,我們就可以把它打印出來.其實是可以打印出來的 , 測試代碼如下:

編譯和結果:

很顯然 , 雖然_l里面有count字段 , 但是他屬于LengthWish類型,沒有count字段,這就是兼容坑爹之處.

函數:

編譯也會報錯:

E:\WebS\MyFirst\com>tsc greeter.ts
greeter.ts(5,1): error TS2322: Type '(x: number, y: number) => number' is not assignable to type '(x: number) => number'.

但是:

可以這么理解加了Function對比參數 , 沒加Function按Object理解 (注 無論加不加Function 他們都是Function類型的 ,? 可以斷點查看)

類:

只有實例成員會被比較

正解如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

class?A{ ????length?:?number; ????constructor(?length?:?number?){ ????????this.length?=?length; ????} } class?B{ ????length?:?number; ????constructor(?length?:?number?,?c?:?string?){ ????????this.length?=?length; ????} } let?a?:?A?=?new?A(2); let?b?:?B?=?new?B(3,'cc'); b?=?a; a?=?b;

①注意成語一定要是一樣的訪問修飾符: 如下就會編譯報錯

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

class?A{ ????private?length?:?number; ????constructor(?length?:?number?){ ????????this.length?=?length; ????} } class?B{ ????length?:?number; ????constructor(?length?:?number?,?c?:?string?){ ????????this.length?=?length; ????} } let?a?:?A?=?new?A(2); let?b?:?B?=?new?B(3,'cc'); b?=?a; a?=?b;

編譯結果如下(private 和 public??? length的訪問修飾符):

②注意成員名稱要一樣,一下會報錯:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

class?A{ ????_length?:?number; ????constructor(?length?:?number?){ ????????this._length?=?length; ????} } class?B{ ????length?:?number; ????constructor(?length?:?number?,?c?:?string?){ ????????this.length?=?length; ????} } let?a?:?A?=?new?A(2); let?b?:?B?=?new?B(3,'cc'); b?=?a; a?=?b;

編譯結果(_length 和 length):

泛型兼容:

1 2 3 4 5 6 7

interface?LengthWish<T>{ } let?x?:?LengthWish<number>; let?y?:?LengthWish<string>; x?=?y; y?=?x;

編譯成功 , 可以理解為T可表任何類型.

總之不建議瞎搞兼容 , 還是按照OOP的思想來編寫代碼

本文轉自Aonaufly51CTO博客，原文鏈接：?http://blog.51cto.com/aonaufly/1955763，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的TypeScript 类型兼容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。