有没有办法从 JS 原生函数继承一个类？
例如，我有一个这样的 JS 函数：
function Xarray()
{
Array.apply(this, arguments);
//some stuff for insert, add and remove notification
}
Xarray.prototype = new Array();
我试图将其转换为 Typescript，但我失败了！！
export class Xarray implements Array {
}
编译器要求我定义所有Array接口属性。我知道如果我需要这个，我必须在 TSXarray.prototype = new Array();中扩展。Array
如何在 TS 中扩展 JS 原生对象？
从 TypeScript 1.6 开始，您可以扩展 Array 类型，请参阅What's new in TypeScript
这是一个例子：
class MyNewArray<T> extends Array<T> {
getFirst() {
return this[0];
}
}
var myArray = new MyNewArray<string>();
myArray.push("First Element");
console.log(myArray.getFirst()); // "First Element"
如果你要发射到 ES5 或更低版本，请使用以下代码：
class MyNewArray<T> extends Array<T> {
constructor(...items: T[]) {
super(...items);
Object.setPrototypeOf(this, MyNewArray.prototype);
}
getFirst() {
return this[0];
}
}
在这里阅读更多关于为什么这是必要的。
我认为没有办法继承现有的接口，如 Array，
export class Xarray implements Array {
}
您应该创建一个函数并使用其原型继承它。Typescript 也将接受它，这类似于 javascript。
function Xarray(...args: any[]): void; // required in TS 0.9.5
function Xarray()
{
Array.apply(this, arguments);
// some stuff for insert, add and remove notification
}
Xarray.prototype = new Array();
更新：这个讨论得很好，并在jqfaq.com上提供了最好的解决方案。
//a dummy class it to inherite array.
class XArray {
constructor() {
Array.apply(this, arguments);
return new Array();
}
// we need this, or TS will show an error,
//XArray["prototype"] = new Array(); will replace with native js arrray function
pop(): any { return "" };
push(val): number { return 0; };
length: number;
}
//Adding Arrray to XArray prototype chain.
XArray["prototype"] = new Array();
//our Class
class YArray extends XArray {
///Some stuff
}
var arr = new YArray();
//we can use the array prop here.
arr.push("one");
arr.push("two");
document.writeln("First Elemet in array : " + arr[0]);
document.writeln("</br>Array Lenght : " + arr.length);
希望，这可能对你有帮助！！！
是的，可以在 TS 中扩展本机 JS 对象，但是扩展内置类型（包含在 lib.d.ts 中的类型）如 Array 存在问题。阅读这篇文章以了解解决方法： http: //typescript.codeplex.com/workitem/4
因此，可以通过以下方式定义在稍后阶段扩展本机类型对象的类型接口：
/// <reference path="lib.d.ts"/>
interface Array {
sort: (input: Array) => Array;
}
使用一个具体的例子，你可以对数组中的一些元素进行排序，这些元素在接口中定义了一个排序函数，然后在一个对象上实现它。
class Math implements Array {
sort : (x: Array) => Array {
// sorting the array
}
}
var x = new Math();
x.sort([2,3,32,3]);
在研究这个时，我看到了 Ben Nadel 的一篇关于扩展 JavaScript 数组同时保持原生括号表示功能的优秀文章。在对如何成功地将其转换为 TypeScript 产生了一些初步的困惑之后，我创建了一个可以被子类化的完全工作的 Collection 类。
它可以做 Array 可以做的所有事情，包括括号索引、在循环结构中使用（for、while、forEach）、映射等。
主要实现点是
implements Array位使用示例：
var foo = new Foo({id : 1})
var c = new Collection();
c.add(foo)
c.length === 1; // => true
foo === c[0]; // => true
foo === c.find(1); // => true
我把它作为一个 gist 提供，完成了测试和一个子类的示例实现，但我在这里展示了完整的源代码：
/*
* Utility "class" extending Array with lookup functions
*
* Typescript conversion of Ben Nadel's Collection class.
* https://gist.github.com/fatso83/3773d4cb5f39128b3732
*
* @author Carl-Erik Kopseng
* @author Ben Nadel (javascript original)
*/
export interface Identifiable {
getId : () => any;
}
export class Collection<T extends Identifiable> implements Array<T> {
constructor(...initialItems:any[]) {
var collection = Object.create(Array.prototype);
Collection.init(collection, initialItems, Collection.prototype);
return collection;
}
static init(collection, initialItems:any[], prototype) {
Object.getOwnPropertyNames(prototype)
.forEach((prop) => {
if (prop === 'constructor') return;
Object.defineProperty(collection, prop, { value: prototype[prop] })
});
// If we don't redefine the property, the length property is suddenly enumerable!
// Failing to do this, this would fail: Object.keys([]) === Object.keys(new Collection() )
Object.defineProperty(collection, 'length', {
value: collection.length,
writable: true,
enumerable: false
});
var itemsToPush = initialItems;
if (Array.isArray(initialItems[0]) && initialItems.length === 1) {
itemsToPush = initialItems[0];
}
Array.prototype.push.apply(collection, itemsToPush);
return collection;
}
// Find an element by checking each element's getId() method
public find(id:any):T;
// Find an element using a lookup function that
// returns true when given the right element
public find(lookupFn:(e:T) => boolean):T ;
find(x:any) {
var res, comparitor;
if (typeof x === 'function') {
comparitor = x;
} else {
comparitor = (e) => {
return e.getId() === x;
}
}
res = [].filter.call(this, comparitor);
if (res.length) return res[0];
else return null;
}
// Add an element
add(value:T);
// Adds all ements in the array (flattens it)
add(arr:T[]);
add(arr:Collection<T>);
add(value) {
// Check to see if the item is an array or a subtype thereof
if (value instanceof Array) {
// Add each sub-item using default push() method.
Array.prototype.push.apply(this, value);
} else {
// Use the default push() method.
Array.prototype.push.call(this, value);
}
// Return this object reference for method chaining.
return this;
}
remove(elem:T):boolean;
remove(lookupFn:(e:T) => boolean):boolean ;
remove(x:any):boolean {
return !!this._remove(x);
}
/**
* @return the removed element if found, else null
*/
_remove(x:any):T {
var arr = this;
var index = -1;
if (typeof x === 'function') {
for (var i = 0, len = arr.length; i < len; i++) {
if (x(this[i])) {
index = i;
break;
}
}
} else {
index = arr.indexOf(x);
}
if (index === -1) {
return null;
}
else {
var res = arr.splice(index, 1);
return res.length ? res[0] : null;
}
}
// dummy declarations
// "massaged" the Array interface definitions in lib.d.ts to fit here
toString:()=> string;
toLocaleString:()=> string;
concat:<U extends T[]>(...items:U[])=> T[];
join:(separator?:string)=> string;
pop:()=> T;
push:(...items:T[])=> number;
reverse:()=> T[];
shift:()=> T;
slice:(start?:number, end?:number)=> T[];
sort:(compareFn?:(a:T, b:T) => number)=> T[];
splice:(start?:number, deleteCount?:number, ...items:T[])=> T[];
unshift:(...items:T[])=> number;
indexOf:(searchElement:T, fromIndex?:number)=> number;
lastIndexOf:(searchElement:T, fromIndex?:number)=> number;
every:(callbackfn:(value:T, index:number, array:T[]) => boolean, thisArg?:any)=> boolean;
some:(callbackfn:(value:T, index:number, array:T[]) => boolean, thisArg?:any)=> boolean;
forEach:(callbackfn:(value:T, index:number, array:T[]) => void, thisArg?:any)=> void;
map:<U>(callbackfn:(value:T, index:number, array:T[]) => U, thisArg?:any)=> U[];
filter:(callbackfn:(value:T, index:number, array:T[]) => boolean, thisArg?:any)=> T[];
reduce:<U>(callbackfn:(previousValue:U, currentValue:T, currentIndex:number, array:T[]) => U, initialValue:U)=> U;
reduceRight:<U>(callbackfn:(previousValue:U, currentValue:T, currentIndex:number, array:T[]) => U, initialValue:U)=> U;
length:number;
[n: number]: T;
}
当然，不需要 , 和 方法上的位Identifiable，find但remove我仍然提供它们，因为一个完整的示例比没有任何自身方法的准系统集合更有用。
返回对象的构造函数隐式替换 的this调用者的值super()。生成的构造函数代码必须捕获super()返回的任何内容并将其替换为this.
内置类使用 ES6new.target进行修复，但 ES5 代码无法确保 new.target 具有调用构造函数的值。
这就是为什么你的额外方法消失了——你的对象有错误的原型。
您需要做的就是在调用super().
export class RoleSet extends Array {
constructor() {
super();
Object.setPrototypeOf(this, RoleSet.prototype);
}
private containsRoleset(roleset:RoleSet){
if (this.length < roleset.length) return false;
for (var i = 0; i < roleset.length; i++) {
if (this.indexOf(roleset[i]) === -1) return false;
}
return true;
}
public contains(item: string | RoleSet): boolean {
if (item) {
return typeof item === "string" ?
this.indexOf(item) !== -1 :
this.containsRoleset(item);
} else {
return true;
}
}
}
请注意，这个诅咒将折磨你的孩子和你孩子的孩子，直到代码结束；您必须在每一代继承链中进行修复。
如果您已经有一个有效的Xarray实现，我看不出在 typescript 中重新创建它的意义，它最终将编译回 JavaScript。
但我确实看到了能够Xarray在 TypeScript 中使用的意义。
为了实现这一点，您只需为您的Xarray. 你甚至不需要一个具体的接口实现，因为你现有的 js 实现将作为一个实现。
interface Xarray{
apply(...arguments : any[]) : void;
//some stuff for insert, add and ...
}
declare var Xarray: {
new (...items: any[]): Xarray;
(...items: any[]): Xarray;
prototype: Array; // This should expose all the Array stuff from ECMAScript
}
完成此操作后，应该能够通过声明的变量使用您自定义的类型，而无需在 TypeScript 中实际实现它。
var xArr = new Xarray();
xArr.apply("blah", "hehe", "LOL");
您可能会在此处查找参考以查看他们如何键入ECMAScript Array API：
http ://typescript.codeplex.com/SourceControl/changeset/view/2bee84410e02#bin/lib.d.ts
在您的情况下，一个不错的选择是使用这种模式：
function XArray(array) {
array = array || [];
//add a new method
array.second = function second() {
return array[1];
};
//overwrite an existing method with a super type pattern
var _push = array.push;
array.push = function push() {
_push.apply(array, arguments);
console.log("pushed: ", arguments);
};
//The important line.
return array
}
然后你可以这样做：
var list = XArray([3, 4]);
list.second() ; => 4
list[1] = 5;
list.second() ; => 5
但请注意：
list.constructor ; => Array and not XArray
是的，您可以增加 Builtin 类型并以不需要 XArray 的所有用具的方式进行操作，如其他答案中所述，并且更接近您在 javascript 中的操作方式。
Typescript 允许多种方式来做到这一点，但对于像 Array 和 Number 这样的内置类型，您需要使用“合并”并声明全局命名空间来增加类型，请参阅文档
所以对于 Array 我们可以添加一个可选的元数据对象和一个 get first 成员
declare global {
interface Array<T> {
meta?: any|null ,
getFirst(): T
}
}
if(!Array.prototype.meta )
{
Array.prototype.meta = null
}
if(!Array.prototype.getFirst )
{
Array.prototype.getFirst = function() {
return this[0];
}
}
我们可以这样使用：
let myarray: number[] = [ 1,2,3 ]
myarray.meta = { desc: "first three ints" }
let first: number = myarray.getFirst()
Number 也是如此，我想添加一个不受余数限制的模函数 %
declare global {
interface Number {
mod(n:number): number
}
}
if(!Number.prototype.mod )
{
Number.prototype.mod = function (n: number) {
return ((this % n) + n) % n;
}
}
我们可以像这样使用它：
let foo = 9;
console.log("-9.mod(5) is "+ foo.mod(5))
对于我们可能想要添加 API 的函数，即使其表现得像一个函数和一个对象，我们可以使用混合类型（参见文档）
// augment a (number) => string function with an API
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
//helper function to get my augmented counter function with preset values
function getCounter(): Counter {
let counter = <Counter>function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
}
像这样使用它：-
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
为了克服原生 Array 类的扩展问题，我利用了装饰器。
function extendArray(constructor: Function) {
Object.getOwnPropertyNames(constructor.prototype)
.filter(name => name !== 'constructor')
.forEach(name => {
const attributes = Object.getOwnPropertyDescriptor(constructor.prototype, name);
Object.defineProperty(Array.prototype, name, attributes);
});
}
@extendArray
export class Collection<T> extends Array<T> {
constructor(...args: T[]) {
super(...args);
}
// my appended methods
}顺便说一句，如果使用装饰器工厂，这个装饰器可以变得更通用（对于其他本地类）。
不知道对此有多不满，但例如我需要创建一个 BulletTypes 数组，以便我可以循环浏览它们。我所做的是以下内容：
interface BulletTypesArray extends Array<BulletType> {
DefaultBullet?: Bullet;
}
var BulletTypes: BulletTypesArray = [ GreenBullet, RedBullet ];
BulletTypes.DefaultBullet = GreenBullet;
显然你也可以制作一个通用接口，比如interface SuperArray<T> extends Array<T>.