Машинописный текст: функции со свойствами

Недавно я обнаружил, что вы можете сделать это в JS:

function foo() {
  console.info("FOO");
}

foo.bar = "FOOBAR";

foo(); // logs "FOO"
console.info(foo.bar); // "FOOBAR"

Теперь мой вопрос: как я могу выразить этот тип объекта/функции в машинописном тексте, например. при передаче его в другую функцию в качестве параметра?

Это явно выдает ошибку...

type Foo = () => void;

function test(foo: Foo) {
  console.info(foo.bar); // Property 'bar' does not exist on type '() => void'.ts(2339)
}

Есть идеи, кроме как объявить это any?

typescript

13.12.2020 14:16

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Как заставить Remix работать с Mantine и Cloudflare Pages/Workers

Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

TypeScript против JavaScript

TypeScript vs JavaScript - в чем различия и какой из них выбрать?

Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage

Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...

Что такое ленивая загрузка в Angular и как ее применять

Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...

115

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете выразить это с помощью interface с позывным:

interface FunctionWithBar {
    (): void;     // <=== Makes this callable, in this case accepting no params
                  // and returning nothing
    bar: string;  // Also has a `bar` proprerty of type string
}

function example(f: FunctionWithBar) {
    f();
    console.info(f.bar);
}

function foo() {
    console.info("FOO");
}

foo.bar = "FOOBAR";

example(foo);

Ссылка на игровую площадку

13.12.2020 14:19

Ответ принят как подходящий

Вы можете добавить подпись вызова и свойство bar к типу Foo:

type Foo = {
    () : void;
    bar: string
}

function test(foo: Foo) {
  console.info(foo.bar); 
}

В качестве альтернативы напишите это как пересечение:

type FooFn = () => void;
type Foo2 = FooFn & {bar: string}

function test2(foo: Foo2) {
  console.info(foo.bar); 
}

Детская площадка

13.12.2020 14:21

Вы также можете попробовать объединить функцию с пространством имен, более машинописный подход, как показано ниже,

function foo() {
  console.info("FOO");
}
namespace  foo {
  export const bar = "FOOBAR";
}

foo(); // logs "FOO"
console.info(foo.bar); // "FOOBAR"

function test(f: typeof foo) {
  console.info(f.bar); // Property 'bar' now exists
}

Почему это «более машинописный» подход? Никогда раньше не использовал пространства имен...

— 14.12.2020 07:40

под этим я подразумеваю, что TS может объединять функцию с пространством имен, что является более «уникальным» для TS.

— 14.12.2020 12:52

14.12.2020 01:57