Category: TypeScript

Sometimes, we want to create a TypeScript interface for objects with some known and some unknown property names.

In this article, we’ll look at how to create a TypeScript interface for objects with some known and some unknown property names.

How to create a TypeScript interface for objects with some known and some unknown property names?

To create a TypeScript interface for objects with some known and some unknown property names, we can use index signatures for the unknown properties.

For instance, we write

interface IObject {
  fixedKey1: string;
  fixedKey2: string;
  [key: string]:
    | string
    | {
        param1: number[];
        param2: string;
        param3: string;
      };
}

to add an index signature with [key: string].

This lets an object with the IObject accept any additional properties other than the ones added above.

And we set the type of the dynamic properties to string or

{
  param1: number[];
  param2: string;
  param3: string;
}

Conclusion

To create a TypeScript interface for objects with some known and some unknown property names, we can use index signatures for the unknown properties.

To fix TypeScript errors on withRouter after updating version with React Router, we can assign our own type for the route props.

For instance, we write

import { RouteComponentProps } from "react-router";

interface Props extends RouteComponentProps {
  thing: Thing | false;
  onAction?: () => void;
}

export default withRouter(({ thing, onAction, history }: Props) => {
  //...
});

to assign the { thing, onAction, history } parameter to the Props type which extends the RouteComponentProps interface provided by react-router.

This will let us add our own properties and types without the TypeScript compiler raising errors.

Sometimes, we want to fix the Typescript ‘Duplicate function implementation’ error.

In this article, we’ll look at how to fix the Typescript ‘Duplicate function implementation’ error.

How to fix the Typescript ‘Duplicate function implementation’ error?

To fix the Typescript ‘Duplicate function implementation’ error, we should make sure we didn’t define the same function multiple times.

For instance, we write

class C {
  public emit<T1>(event: string, arg1: T1): void;
  public emit<T1, T2>(event: string, arg1: T1, arg2: T2): void;
  public emit(event: string, ...args: any[]): void {
    // ...
  }
}

to add the emit method to class C with different signatures and return types to overload the method.

We only have the curly braces in the last line and we put our function implementation code in there.

Conclusion

To fix the Typescript ‘Duplicate function implementation’ error, we should make sure we didn’t define the same function multiple times.

Sometimes, we want to declare a type globally in a project with TypeScript.

In this article, we’ll look at how to declare a type globally in a project with TypeScript.

How to declare a type globally in a project with TypeScript?

To declare a type globally in a project with TypeScript, we can use the declare statement in a .d.ts file.

For instance, we add

declare module "my-module" {
  export declare class Something {
    public something: number;
  }
}

into a .d.ts file into our TypeScript project folder to declare the types for the my-module module.

We declare that it has class Something and it has the something number instance property.

Conclusion

To declare a type globally in a project with TypeScript, we can use the declare statement in a .d.ts file.

Sometimes, we want to get the type of a property of a TypeScript class using keyof operator.

In this article, we’ll look at how to get the type of a property of a TypeScript class using keyof operator.

How to get the type of a property of a TypeScript class using keyof operator?

To get the type of a property of a TypeScript class using keyof operator, we can use lookup types.

For instance, we write

type BarType = FooType["bar"];

to get the type of the bar property of an object of FooType with FooType["bar"].

And then we assign the returned type to BarType.

Conclusion

To get the type of a property of a TypeScript class using keyof operator, we can use lookup types.