Ways to eliminate type errors when coding in TypeScript and prevent them from occurring in the following code

Question

Ways to eliminate type errors when coding in TypeScript and prevent them from occurring in the following code

const obj = {
  extend: (p: {
    property: string;
    methods: { name: string; call: string; params: number }[];
  }) => {
    obj[p.property] = {};
    p.methods.forEach((m) => {
      obj[p.property][m.name] = (params: any[]) =>
        m.call + "____" + params.length;
    });
  },
};

obj.extend({
  property: "Scope1",
  methods: [
    {
      name: "functionName",
      call: "function_name",
      params: 1,
    },
  ],
});
// Ways to prevent type errors from occurring in TypeScript. The code below may prompt type errors due to missing types.
console.log(obj["Scope1"].functionName(["firstParam"]));

The method to avoid type errors in the TypeScript implementation of obj extend is by ensuring proper typing for all properties and methods.

javascript typescript types

Answer 1

Answer №1

Your requirement for how the extend() function works is quite generic.

To ensure type safety and generic functionality, we can introduce an ObjectTemplate that satisfies the Typescript compiler. This way, we can dynamically assign values to objects in TypeScript.

type Args = {
    property: string;
    methods: { name: string; callFunc: string; numParams: number }[];
}

type ObjTemplate = {
  extend: (args: Args) => void;
  [k: string]: any
}

const obj: ObjTemplate = {
  extend: (p: Args) => {
    obj[p.property] = {};
    p.methods.forEach((m) => {
      obj[p.property][m.name] = (params: any[]) =>
        m.callFunc + "____" + params.length;
    });
  }
};

obj.extend({
  property: "Scope1",
  methods: [
    {
      name: "functionName",
      callFunc: "function_name",
      numParams: 1,
    },
  ],
});

console.log(obj["Scope1"].functionName(["firstParam"]));

Code Playground

Answer 2

Your requirement for how the extend() function works is quite generic.

To ensure type safety and generic functionality, we can introduce an ObjectTemplate that satisfies the Typescript compiler. This way, we can dynamically assign values to objects in TypeScript.

type Args = {
    property: string;
    methods: { name: string; callFunc: string; numParams: number }[];
}

type ObjTemplate = {
  extend: (args: Args) => void;
  [k: string]: any
}

const obj: ObjTemplate = {
  extend: (p: Args) => {
    obj[p.property] = {};
    p.methods.forEach((m) => {
      obj[p.property][m.name] = (params: any[]) =>
        m.callFunc + "____" + params.length;
    });
  }
};

obj.extend({
  property: "Scope1",
  methods: [
    {
      name: "functionName",
      callFunc: "function_name",
      numParams: 1,
    },
  ],
});

console.log(obj["Scope1"].functionName(["firstParam"]));

Code Playground

Answer 3

Answer №2

After reading through a discussion on typescript-interface-problem, I came across a solution that caught my attention.


export const customObject = {
  extend: <T extends string, O extends string>(data: {
    property: T;
    methods: { name: O; call: string; params: number }[];
  }): {
    [Prop in typeof data as Prop["property"]]: {
      [Prop in typeof data.methods[number] as Prop["name"]]: (
        ...args: any
      ) => Promise<any>;
    };
  } => {
    const obj = {} as any;
    data.methods.forEach((method) => {
      obj[method.name] = (...args: any) => {
        return Promise.resolve("success");
      };
    });

    const newObject = {
      [data.property]: obj,
    };

    return newObject;
  },
};

const extendedCustomObj = customObject.extend({
  property: "Scope1",
  methods: [
    {
      name: "functionName",
      call: "function_name",
      params: 1,
    },
  ],
});

Following the implementation of the above code snippet, we can observe the desired outcome.

https://i.sstatic.net/79YOU.png

Answer 4

After reading through a discussion on typescript-interface-problem, I came across a solution that caught my attention.


export const customObject = {
  extend: <T extends string, O extends string>(data: {
    property: T;
    methods: { name: O; call: string; params: number }[];
  }): {
    [Prop in typeof data as Prop["property"]]: {
      [Prop in typeof data.methods[number] as Prop["name"]]: (
        ...args: any
      ) => Promise<any>;
    };
  } => {
    const obj = {} as any;
    data.methods.forEach((method) => {
      obj[method.name] = (...args: any) => {
        return Promise.resolve("success");
      };
    });

    const newObject = {
      [data.property]: obj,
    };

    return newObject;
  },
};

const extendedCustomObj = customObject.extend({
  property: "Scope1",
  methods: [
    {
      name: "functionName",
      call: "function_name",
      params: 1,
    },
  ],
});

Following the implementation of the above code snippet, we can observe the desired outcome.

https://i.sstatic.net/79YOU.png

Ways to eliminate type errors when coding in TypeScript and prevent them from occurring in the following code

Answer №1

Answer №2

Similar questions

What is the process of determining if two tuples are equal in Typescript?

Utilizing multiple page objects within a single method in Cypress JS

How can you restrict a textbox input to accept only numerical values and decimals using ng-pattern?

What is causing an empty box to appear due to padding? Is there a way to conceal it

Updating a div using PHP elements

Document.querySelector failing to execute the if statement properly

Incorporating a stylish background image into an EJS template

Utilizing a default value for undefined object property in VueJS interpolation

What is the best way to set up TSLint to apply specific rules with one line and different rules with another line

What is the reason for Jest attempting to resolve all components in my index.ts file?

Using the power of underscore.js, effortlessly uncover the desired string within an array of objects

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

Creating an input in Vue3/Javascript that restricts input to only numbers seems to be a challenge

What is the distinction between using localStorage and storing individual files when clicking?

Create a collection of functions within an array that each return promises

Can $event be transferred from cshtml to Vue.component?

Typescript struggling to load the hefty json file

Instructions on how to send HTML content as a string to a different function for iteration?

Create a customized multibar chart in Angular using NVD3 that displays only a line graph on the dual y-axis, visualizing

Unable to authenticate client response using passportjs jwt