Using TypeScript: Functions incorporating properties

Question

Using TypeScript: Functions incorporating properties

Recently, I made an interesting discovery in JavaScript:

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

foo.bar = "FOOBAR";

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

This got me thinking: How would I represent this type of object/function in TypeScript, especially when passing it to another function as a parameter?

As expected, trying to access the property throws an error...

type Foo = () => void;

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

Any suggestions besides resorting to declaring it as any?

typescript

Answer 1

Answer №1

To enhance the Foo type, consider adding a call signature and a bar property:

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

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

Alternatively, you can express it using intersection:

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

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

Check out this playground to see it in action.

Answer 2

To enhance the Foo type, consider adding a call signature and a bar property:

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

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

Alternatively, you can express it using intersection:

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

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

Check out this playground to see it in action.

Answer 3

Answer №2

To represent this concept, you can use an interface with a call signature:

interface FunctionWithBar {
    (): void;     // This allows the function to be called without any parameters and return nothing
    bar: string;  // It also includes a property named `bar` of type string
}

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

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

foo.bar = "FOOBAR";

example(foo);

Explore in Playground

Answer 4

To represent this concept, you can use an interface with a call signature:

interface FunctionWithBar {
    (): void;     // This allows the function to be called without any parameters and return nothing
    bar: string;  // It also includes a property named `bar` of type string
}

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

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

foo.bar = "FOOBAR";

example(foo);

Explore in Playground

Answer 5

Answer №3

If you want to experiment with combining functions and namespaces in TypeScript, consider the following example:

function greet() {
  console.log("Hello");
}
namespace greetings {
  export const goodbye = "Goodbye";
}

greet(); // outputs "Hello"
console.log(greetings.goodbye); // outputs "Goodbye"

function testFn(f: typeof greetings) {
  console.log(f.goodbye); // Accessing the 'goodbye' property through the parameter
}

Answer 6

If you want to experiment with combining functions and namespaces in TypeScript, consider the following example:

function greet() {
  console.log("Hello");
}
namespace greetings {
  export const goodbye = "Goodbye";
}

greet(); // outputs "Hello"
console.log(greetings.goodbye); // outputs "Goodbye"

function testFn(f: typeof greetings) {
  console.log(f.goodbye); // Accessing the 'goodbye' property through the parameter
}

Using TypeScript: Functions incorporating properties

Answer №1

Answer №2

Answer №3

Similar questions

How to Dynamically Enable or Disable a Button in Angular 2 Based on Text Field Values

Encountering a Npm ERR! when deploying Angular 6 to Heroku due to missing Start script

Managing plain text and server responses in Angular 2: What you need to know

How is it possible to utilize type assertions with literals like `false`?

Issue: Typescript/React module does not have any exported components

What are the steps for creating a custom repository with TypeORM (MongoDB) in NestJS?

Returning a value with an `any` type without proper validation.eslint@typescript-eslint/no-unsafe-return

Best practices for organizing an array of objects in JavaScript

Creating a TypeScript shell command that can be installed globally and used portably

Introducing Vee Validate 3.x and the ValidationFlags data type definition

Discovering the best method to retrieve user details (email address) following a successful login across all pages or components within Angular

When attempting to utilize yarn link, I receive an error message indicating that the other folder is not recognized as a module

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

Encountering difficulty when trying to define the onComplete function in Conf.ts. A type error is occurring, stating that '(passed: any) => void' is not compatible with type '() => void'.ts(2322)'

Error: Loki cannot be used as a constructor

Having trouble deleting JavaScript object properties within a loop?

How to process response in React using Typescript and Axios?

Customizing form validation in React using Zod resolver for optional fields

Embedded Facebook SDK posts appearing only after performing a hard refresh

The implementation of TypeScript 3.5 resulted in a malfunction where the imported namespace was unable to locate the Enum during runtime