Как правильно прописать интерфейс

171
09 февраля 2019, 18:20
PIXI.Point.prototype.Multiply = function (value: number) {
    this.x *= value;
    this.y *= value;
    return this;
};
const test = new PIXI.Point(1, 1);
console.log(test.Multiply(2));

Typescript ругается:

TS2339: Property 'Multiply' does not exist on type 'Point'.

Пробовал по другому тоже самое:

Answer 1

То, что вы пытаетесь сделать называется augmentation (расширение) и для классов это не поддерживается (и не будет поддерживаться). На эту тему было открыто большое количество issues еще с 1.x версий TypeScript, команда Microsoft отказалась интегрировать в компилятор возможность class augmentation, объяснив это тем, что мы не должны мутировать существующий прототип, а расширить его, наследуясь от него, поэтому функция parseAmbientExternalModuleDeclaration из компилятора позволяет расширять только интерфейсы. Это проблема тех библиотек, которые вместо интерфейсов используют классы.

Используя any вы теряете возможность статического анализа, но вариант, который вы привели на скриншоте является правильным:

class Point extends PIXI.Point { ... }
const test = new PIXI.Point(1, 2);

Только тут непонятно зачем вы создаете инстанс класса Point из пространства имен PIXI, используйте свой класс:

class Point extends PIXI.Point {
    public multiply() ....
}
const test = new Point();
console.log(test.multiply());

UPD:

Если вам все же чревато делать то, что вы пытаетесь сделать - мутировать прототип и тд, то можем прибегнуть к такому грязному хаку. Создаем папку fixed_declarations куда копируем index.d.ts из node_modules/@types/pixi.js. В этом же файле добавляем метод классу:

class Point extends PointLike {
    constructor(x?: number, y?: number);
    clone(): Point;
    equals(p: PointLike): boolean;
    multiply?(value: number): number;
}

После всего ставим пакеты cpy и cpy-cli:

yarn add -D cpy cpy-cli

В package.json в секцию scripts добавляем новые задачи:

"scripts": {
    "cpy": "cpy",
    "fix:pixi": "cpy ./fixed_declarations/index.d.ts ./node_modules/@types/pixi.js --rename=index.d.ts"
}

У вас должны быть задачи для билдов, вы просто выполняете эту задачу перед билдами "build": "yarn fix:pixi && webpack -p" (как пример).

READ ALSO
Как отделить просмотр галереи одной от другой, используя ImageLightbox.js?

Как отделить просмотр галереи одной от другой, используя ImageLightbox.js?

Для отображение фотографий использую скрипт ImageLightboxjs

164
await конструктор в javascript

await конструктор в javascript

у меня есть функция которая вызывает несколько раз конструктор типа

190
Как изменить количество элементов в owl carousel для мобильных?

Как изменить количество элементов в owl carousel для мобильных?

Никак не могу разобраться как изменить количество выводимых элементов в owl carousel для мобильных? Сейчас скрипт такойВывожу 5 элементов

180
Использовать debounce вместо setTimeout?

Использовать debounce вместо setTimeout?

Как переписать на debounce вместо setTimeout?

150