Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

Question

Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

When it comes to mapping object values with all primitive types, the process is quite straightforward:

type ObjectOf<T> = { [k: string]: T };

type MapObj<Obj extends ObjectOf<any>> = {
  [K in keyof Obj]: Obj[K] extends string ? Obj[K] : 'not string';
};

type Foo = MapObj<{
  a: 'string',
  b: 123,
}>; // Foo is { a: 'string', b: 'not string' }

However, things get tricky when unions are involved as object values in TypeScript:

type AllPaths = '/user' | '/post';

type Props<Path extends AllPaths> = MapObj<{
  path: Path,
}>;

function Fn<Path extends AllPaths>({ path }: Props<Path>) {
  const path2: AllPaths = path;
}

Encountering the error:

Type 'Path extends string ? Path : "not string"' is not assignable to type 'AllPaths'.
  Type 'Path | "not string"' is not assignable to type 'AllPaths'.
    Type '"not string"' is not assignable to type 'AllPaths'.
      Type 'Path extends string ? Path : "not string"' is not assignable to type '"/post"'.
        Type 'Path | "not string"' is not assignable to type '"/post"'.
          Type 'string & Path' is not assignable to type '"/post"'.

Even though each member of the union is a string, the output of MapObj does not remain as unions of strings. How can this issue be resolved?

TS Playground: https://www.typescriptlang.org/play?#code/C4TwDgpgBA8gRgKwgY2DAZgHgCoD4oC8UA3lANoDWAXFAM7ABOAlgHYDmAujdlAL4DcAKEGhIUALIBDMPASZZUCAA9gEFgBNasRCjRZJLELnxFigqOQDSUVlAoQQAe3TaEXV2UsdFKtZrqMrGxQAPweXlA0AOQsjsABzOxRQgLCotAAggA2WQAKksAAFlpEUQD0AK60EAxRUAA+UOVgjvTJaeDQuQyOYLSY+UU+qhpa2XkFxSYS0rKYZhZgkzSDhQA0gry4QoLoFSyoTI4sUABiLAOTw35jOau0uAAUpEtDvCs9fZdFuACUJOYoMhjvQoK9CgAmGjje6EMGTFKCIA

javascript typescript

Answer 1

Answer №1

My observation is that when you define

type Props<Path extends AllPaths> = MapObj<{ path: Path, }>;

in this way, it will only include the values '/user' | '/post'. However, TypeScript's static type checking may not fully recognize this, as the type is MapObj<{ path: Path, }> which represents a MapObj of a JavaScript Object.

One solution is to simply use as Path to make a compromise.

function Fn<Path extends AllPaths>({ path }: Props<Path>) {
  const path2: AllPaths = path as Path;
}

Alternatively, you can define a type for PathObj like this:

type AllPaths = '/user' | '/post';
type AllPathObj = {
  path: AllPaths,
}

type Props<PathObj extends AllPathObj> = MapObj<AllPathObj>;

function Fn<PathObj extends AllPathObj>({ path }: Props<PathObj>) {
  const path2: AllPaths = path;
}

Answer 2

My observation is that when you define

type Props<Path extends AllPaths> = MapObj<{ path: Path, }>;

in this way, it will only include the values '/user' | '/post'. However, TypeScript's static type checking may not fully recognize this, as the type is MapObj<{ path: Path, }> which represents a MapObj of a JavaScript Object.

One solution is to simply use as Path to make a compromise.

function Fn<Path extends AllPaths>({ path }: Props<Path>) {
  const path2: AllPaths = path as Path;
}

Alternatively, you can define a type for PathObj like this:

type AllPaths = '/user' | '/post';
type AllPathObj = {
  path: AllPaths,
}

type Props<PathObj extends AllPathObj> = MapObj<AllPathObj>;

function Fn<PathObj extends AllPathObj>({ path }: Props<PathObj>) {
  const path2: AllPaths = path;
}

Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

Answer №1

Similar questions

In the event that the API server is offline, what is the most effective way to notify users that the server is not accessible on the client-side?

What is the best way to change the folder name when hovering over it?

Transferring an ES6 class from Node.js to a browser environment

Has anyone else encountered the issue where the JavaScript for Bootstrap version 4.3.1 is malfunctioning on Firefox version 65.0.1?

Instructions on how to save HTML "innerHTML" along with attributes to a text document

Dynamically insert the ng-if attribute into a directive

How can you ensure an interface in typescript 3.0 "implements" all keys of an enum?

Errors may arise in Typescript when attempting to block the default behavior of DataGrid onRowEditStop

I am looking to have the datepicker automatically clear when the reset button is clicked

How can I resolve a promise that is still pending within the "then" block?

Checking dates in a JavaScript form

Dealing with checked input type='checkbox' in React - A guide

When I submit 'name' through Postman, ValidatorExpress notifies me that the input for 'name' is missing

Is it possible to have a synchronous function imported in typescript?

When using Node.js with Express and ssh2, my data structures remain intact without any resets when loading web pages

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Font size for the PayPal login button

The hover state of a div will not be lost if its parent element is not being hovered over

Should the null-forgiving operator be avoided when using `useRef`?

Adjusting the placement in Draw2D