How to combine known interface properties with a custom index signature?

by

The question accepted by the owner (until now) is incorrect.

Here’s how you can do it:

You need to make the index signature a union type of all the types that can be contained in the interface:

interface IExample {
    hello?: string;
    moo?: boolean;
    [custom: string]: string | boolean | YourFunctionType;
}

interface YourFunctionType {
    (v?: any): boolean;
}

Please note that I’ve extracted your function type into a separate interface to improve readability.

Implications:

This means, that the explicitly defined properties are well supported by TS:

const test: IExample = <IExample>{};
test.hello.slice(2); // using a string method on a string --> OK
const isHello = test.hello === true; // ERROR (as expected): === cannot be applied to types string and boolean
const isMoo2 = test.moo === true; // OK

However all properties from the index signature now need to be checked using type guards which adds a little bit of a runtime overhead:

test.callSomething(); // ERROR: type 'string | boolean | YourFunctionType' has no compatible call signatures
if (typeof test.callSomething === 'function') { // alternatively you can use a user defined type guard, like Lodash's _.isFunction() which looks a little bit nicer
    test.callSomething(); // OK
}

On the other hand: the runtime overhead is necessary because it might be that test is accessed like this:

const propertyName: string = 'moo';
test[propertyName](); // ERROR: resolves to a boolean at runtime, not a function ...

// ... so to be sure that an arbitrary propertyName can really be called we need to check:
const propertyName2: string = 'arbitraryPropertyName';
const maybeFunction = test[propertyName2];
if (typeof maybeFunction === 'function') {
    maybeFunction(); // OK
}

More Related Contents:

  1. What does a TypeScript index signature actually mean?
  2. Expression ___ has changed after it was checked
  3. Interfaces vs Types in TypeScript
  4. Could not find a declaration file for module ‘module-name’. ‘/path/to/module-name.js’ implicitly has an ‘any’ type
  5. TypeScript conditional types – filter out readonly properties / pick only required properties
  6. Typescript: infer type of generic after optional first generic
  7. Define global constants
  8. Create an enum with string values
  9. Typescript: TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type
  10. TypeScript 2: custom typings for untyped npm module
  11. “parserOptions.project” has been set for @typescript-eslint/parser
  12. Exclude/overwrite npm-provided typings
  13. Extend (Update) third-party old type declaration interface with new one
  14. Derive union type from tuple/array values
  15. Is it possible to generate string literal combinations with template literal in TypeScript?
  16. Test for array of string type in TypeScript
  17. Can’t narrow the type of an object property even after checking it with a type guard
  18. Why do subtypes need to be assigned to a variable before being used as a function argument?
  19. Typescript narrowing of keys in objects when passed to function
  20. What do square brackets mean where a field should be in typescript?
  21. Flatten object with custom keys in Typescript
  22. TypeScript empty object for a typed variable
  23. ts An async function or method in ES5/ES3 requires the ‘Promise’ constructor
  24. How to declare a function that throws an error in Typescript
  25. Typescript: change function type so that it returns new value
  26. Why does a Typescript type conditional on `T extends undefined`, with T instantiated with `boolean`, resolve T to `never`?
  27. What exactly $event object do in Angular 2?
  28. new Typescript “satisfies” operator
  29. What are the differences between the private keyword and private fields in TypeScript?
  30. Narrowing a return type from a generic, discriminated union in TypeScript

Leave a Comment