`Object.entries().map()` 不会在打字稿上保留类型。 如何改进我的界面以使其正常工作？ 或解决方法？

Question

I have this interface that i am working with:

export interface NPMPackage {
  name: string;
  description: string;
  'dist-tags': {
    [tag: string]: string;
  };
  versions: {
    [version: string]: {
      name: string;
      version: string;
      dependencies?: {
        [packageName: string]: string;
      };
    };
  };
}

and this is my code:

let dependencies =  npmPackage.versions[version].dependencies;
dependencies = Object.entries(dependencies).map( ([name, version]) => ({
    name,
    version: version.replace(/[^\w\s]/gi, ''),
}));

that returns these errors:

Type '{ name: string; version: string; }[]' is not assignable to type '{ [packageName: string]: string; }'. Index signature is missing in type '{ name: string; version: string; }[]'.

No overload matches this call. Overload 1 of 2, '(o: { [s: string]: string; } | ArrayLike): [string, string][]', gave the following error. Argument of type '{ [packageName: string]: string; } | undefined' is not assignable to parameter of type '{ [s: string]: string; } | ArrayLike'. Type 'undefined' is not assignable to type '{ [s: string]: string; } | ArrayLike'. Overload 2 of 2, '(o: {}): [string, any][]', gave the following error. Argument of type '{ [packageName: string]: string; } | undefined' is not assignable to parameter of type '{}'. Type 'undefined' is not assignable to type '{}'.

without the dependencies function it works with no errors.

if i add dependencies:any and change the versions variable without manipulating it like this:

    let dependencies =  npmPackage.versions[version].dependencies;
    // lets make it pretty. 
    dependencies = Object.entries(dependencies).map( ([name, version]) => ({
        name,
        version,
    }));

it works.

basically what i am trying to do is to add the dependencies method to change the structure of my object. the structure of the objects is passed to the new variable dependencies . what is the proper solution for these cases with typescript? is that considered a good practice when typehinting?

The api returns the data as described, but i want to send it with a different structure for the react frontend app.

also. the thing that i do not understand is - that the variable is a string as stated in the interface, so why doesn't it work?

reproducible

Answer 1

I want to change the structure of my object. The structure of the objects is passed to the new variable dependencies .

No, it's not. You're assigning it to the old variable dependencies , which is inferred to have the old structure as its type.

what is the proper solution for these cases with typescript?

Use two different variables for different objects with different structures. One is a object mapping strings to strings, the other is an array of objects. So write

const dependenciesObj = npmPackage.versions[version].dependencies;
// lets make it pretty. 
const dependenciesArr = Object.entries(dependencies).map( ([name, version]) => ({
    name,
    version,
}));