Type ‘string[]’ is not assignable to type ‘[{ original: string; }]’

If you are working with TypeScript, you might have come across the error message “Type ‘string[]’ is not assignable to type ‘[{ original: string; }]’”. This error occurs when you try to assign an array of strings to a variable that expects an array of objects with a specific structure.

Let’s explore a few solutions to resolve this error:

Solution 1: Use a Type Assertion

One way to resolve this error is by using a type assertion to explicitly tell TypeScript the expected type of the variable. You can use the angle bracket syntax or the ‘as’ keyword to perform the type assertion.

    const originalArray: string[] = ['item1', 'item2', 'item3'];
    const newArray = originalArray as [{ original: string; }];
  

In the code snippet above, we are asserting that the ‘originalArray’ variable should be treated as an array of objects with the ‘original’ property of type string. This allows TypeScript to infer the correct type and resolves the error.

Solution 2: Use Array.map() to Transform the Array

Another solution is to use the Array.map() method to transform each string in the array into an object with the required structure. This way, you can create a new array that matches the expected type.

    const originalArray: string[] = ['item1', 'item2', 'item3'];
    const newArray = originalArray.map((item) => ({ original: item }));
  

In the code snippet above, we are using the Array.map() method to iterate over each string in the ‘originalArray’ and create a new array with objects that have the ‘original’ property.

Solution 3: Define an Interface or Type Alias

If you frequently encounter this error in your codebase, it might be helpful to define an interface or type alias for the expected structure. This way, you can easily reuse it throughout your code.

    interface MyType {
      original: string;
    }
    
    const originalArray: string[] = ['item1', 'item2', 'item3'];
    const newArray: MyType[] = originalArray.map((item) => ({ original: item }));
  

In the code snippet above, we define an interface called ‘MyType’ that has the ‘original’ property of type string. We then use this interface to annotate the type of the ‘newArray’ variable, ensuring that it matches the expected structure.

By using one of these solutions, you can overcome the error “Type ‘string[]’ is not assignable to type ‘[{ original: string; }]’”. Choose the solution that best fits your specific use case and coding style.

Happy coding!