Побудуйте об’єкт функції із властивостями в TypeScript

Я хочу створити об'єкт функції, який також має деякі властивості. Наприклад, у JavaScript я б зробив:

var f = function() { }
f.someValue = 3;

Тепер у TypeScript я можу описати тип цього як:

var f: { (): any; someValue: number; };

Однак насправді я не можу його побудувати, не вимагаючи акторського складу. Як от:

var f: { (): any; someValue: number; } =
    <{ (): any; someValue: number; }>(
        function() { }
    );
f.someValue = 3;

Як би ви побудували це без акторського складу?

Отже, якщо вимога полягає у простому побудуванні та призначенні цієї функції на "f" без приведення, ось можливе рішення:

var f: { (): any; someValue: number; };

f = (() => {
    var _f : any = function () { };
    _f.someValue = 3;
    return _f;
})();

По суті, він використовує самостійно виконуваний літерал функції, щоб "побудувати" об'єкт, який відповідатиме цьому підпису до того, як буде виконано призначення. Єдина дивина полягає в тому, що внутрішнє оголошення функції повинно мати тип 'any', інакше компілятор плаче, що ви присвоюєте властивість, яка ще не існує в об'єкті.

EDIT: Трохи спростив код.

Оновлення: Ця відповідь була найкращим рішенням у попередніх версіях TypeScript, але в нових версіях доступні кращі варіанти (див. Інші відповіді).

Прийнята відповідь працює і може знадобитися в деяких ситуаціях, але має мінус, оскільки не забезпечує безпеку типу для будівництва об’єкта. Цей прийом принаймні видасть помилку типу, якщо ви спробуєте додати невизначене властивість.

interface F { (): any; someValue: number; }

var f = <F>function () { }
f.someValue = 3

// type error
f.notDeclard = 3

Зараз це легко досягти (машинопис 2.x) за допомогою Object.assign(target, source)

приклад:

Магія тут полягає в тому, що Object.assign<T, U>(t: T, u: U)набирається для повернення перехрестя T & U .

Забезпечення того, що це переходить до відомого інтерфейсу, також є прямим. Наприклад:

interface Foo {
  (a: number, b: string): string[];
  foo: string;
}

let method: Foo = Object.assign(
  (a: number, b: string) => { return a * a; },
  { foo: 10 }
); 

які помилки через несумісне введення тексту:

Помилка: foo: номер не може бути призначений foo: string
Помилка: номер не може бути призначений для рядка [] (тип повернення)

Застереження: вам може знадобитися polyfill Object.assign якщо вони націлені на старі браузери.

TypeScript призначений для обробки цього випадку шляхом злиття оголошень :

Ви також можете бути знайомі з практикою JavaScript щодо створення функції, а потім подальшого розширення функції, додаючи властивості до функції. TypeScript використовує злиття оголошень для створення подібних визначень безпечним для типу способом.

Злиття декларації дозволяє нам сказати, що щось є одночасно функцією та простором імен (внутрішній модуль):

function f() { }
namespace f {
    export var someValue = 3;
}

Це зберігає набір тексту і дозволяє писати як, так f()і f.someValue. Під час написання .d.tsфайлу для існуючого коду JavaScript використовуйте declare:

declare function f(): void;
declare namespace f {
    export var someValue: number;
}

Додавання властивостей до функцій часто є заплутаним або несподіваним шаблоном у TypeScript, тому намагайтеся уникати цього, але це може знадобитися при використанні або перетворенні старішого коду JS. Це один з єдиних випадків, коли було б доречним змішати внутрішні модулі (простори імен) із зовнішніми.

Не можу сказати, що це дуже просто, але це точно можливо:

interface Optional {
  <T>(value?: T): OptionalMonad<T>;
  empty(): OptionalMonad<any>;
}

const Optional = (<T>(value?: T) => OptionalCreator(value)) as Optional;
Optional.empty = () => OptionalCreator();

якщо вам цікаво, це з моєї суті з версією TypeScript / JavaScriptOptional

Як ярлик можна динамічно призначати значення об’єкта за допомогою доступу ['властивість']:

var f = function() { }
f['someValue'] = 3;

Це обходить перевірку типу. Однак це досить безпечно, тому що ви повинні навмисно отримати доступ до власності таким же чином:

var val = f.someValue; // This won't work
var val = f['someValue']; // Yeah, I meant to do that

Однак, якщо ви дійсно хочете, щоб тип перевіряв значення властивості, це не спрацює.

Оновлена ​​відповідь: з часу додавання типів перетину через & , можна "об'єднати" два виведені типи на льоту.

Ось загальний помічник, який читає властивості якогось об’єкта fromта копіює їх над об’єктом onto. Він повертає той самий об'єкт, ontoале з новим типом, що включає обидва набори властивостей, тому правильно описує поведінку середовища виконання:

function merge<T1, T2>(onto: T1, from: T2): T1 & T2 {
    Object.keys(from).forEach(key => onto[key] = from[key]);
    return onto as T1 & T2;
}

Цей помічник низького рівня все ще виконує твердження типу, але за типом конструкції він безпечний для типу. З цим помічником на місці ми маємо оператора, який ми можемо використовувати для вирішення проблеми OP з повною безпекою типу:

interface Foo {
    (message: string): void;
    bar(count: number): void;
}

const foo: Foo = merge(
    (message: string) => console.log(`message is ${message}`), {
        bar(count: number) {
            console.log(`bar was passed ${count}`)
        }
    }
);

Клацніть тут, щоб спробувати на майданчику TypeScript . Зверніть увагу, що ми обмежувались fooтипом Foo, тому результат mergeповинен бути повним Foo. Отже, якщо ви перейменуєте barнаbad то ви отримаєте помилку типу.

Примітка. Однак тут є ще одна діра типу. TypeScript не надає способу обмежити параметр типу "не функцією". Таким чином, ви можете заплутатися і передати свою функцію як другий аргумент merge, і це не буде працювати. Отже, поки це не може бути оголошено, ми повинні ловити це під час виконання:

function merge<T1, T2>(onto: T1, from: T2): T1 & T2 {
    if (typeof from !== "object" || from instanceof Array) {
        throw new Error("merge: 'from' must be an ordinary object");
    }
    Object.keys(from).forEach(key => onto[key] = from[key]);
    return onto as T1 & T2;
}

Старе питання, але для версій TypeScript, починаючи з 3.1, ви можете просто призначити властивість, як це було б у звичайному JS, якщо ви використовуєте оголошення функції або constключове слово для вашої змінної:

function f () {}
f.someValue = 3; // fine
const g = function () {};
g.someValue = 3; // also fine
var h = function () {};
h.someValue = 3; // Error: "Property 'someValue' does not exist on type '() => void'"

Довідково -інформаційний приклад .

Це відходить від сильного набору тексту, але ви можете це зробити

var f: any = function() { }
f.someValue = 3;

якщо ви намагаєтеся обійти гнітюче сильне друкування, як це було, коли я знайшов це запитання. На жаль, це випадок виходу TypeScript із цілком дійсного JavaScript, тому вам слід сказати TypeScript відступити.

"Ваш JavaScript є цілком дійсним TypeScript" вважає помилковим. (Примітка: з використанням 0,95)