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 型を拡張できます。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オブジェクトを拡張することは可能ですが、Arrayなどの組み込み型（lib.d.tsに含まれているもの）を拡張する際に問題があります。回避策については、この投稿をお読みください：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]);
これを調査しているときに、ネイティブのブラケット表記機能を維持しながら JavaScript 配列を拡張するに関する Ben Nadel の優れた投稿に出くわしました。これを TypeScript に正常に変換する方法について最初に混乱した後、サブクラス化できる完全に機能する Collection クラスを作成しました。
ブラケットによるインデックス付け、ループ構築 (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ありませんが、独自のメソッドを持たない必要最小限の Collection よりも本格的な例の方が使いやすいので、それらを提供します。
すでに機能しているXarray実装がある場合、それをtypescriptで再作成しても意味がありません。これは、最終的にはJavaScriptにコンパイルされます。
Xarrayしかし、TypeScriptでinを使用できることには意味があります。
これを実現するには、のインターフェイスが必要ですXarray。既存のjs実装が1つとして機能するため、インターフェイスの具体的な実装を用意する必要はありません。
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");
http://typescript.codeplex.com/SourceControl/changeset/view/2bee84410e02#bin/lib.d.ts：http://typescript.codeplex.com/SourceControl/changeset/view/2bee84410e02#bin/lib.d.ts _ ECMAScript Array API_
あなたの場合、次のパターンを使用することをお勧めします。
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
ネイティブ 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>。