Typescript is not checking map types with spread operator

Asked

Viewed 41 times

2

The following code compiles without any type of Warning. It is some configuration that is wrong/missing?

interface CategoryInfo {
  name: {
    portuguese: string
    english: string
    spanish: string
  }
  icon: string
  categoryId: number
  active: boolean
  benefits: number
  subscribers: number
  createdAt: string
  updatedAt: string
  deletedAt?: string
}

export function formatFetchCategoriesResponse(
  response: CategoryInfo[]
): CategoryInfo[] {
  return response.map((category) => ({
    ...category,
    aPropertyThatDoesntExists: 'Anything',
  }))
}
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/*"]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "ant-design-vue/types",
      "@nuxtjs/axios",
      "@nuxtjs/auth-next"
    ]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

1 answer

-1

I checked a code of mine that basically has the same thing as you, and mine shows his typing.

api.get('stocks').then((response) => {
  const stocksDataOrdered = response.data.data.map((stock: StocksProps) => {
  return {
    ...stock,
    favorited: favoritedIds.length !== 0 ? favoritedIds.includes(stock.id) : false,
  }
}).sort((stockA: StocksProps, stockB: StocksProps) =>
     stockA.name.localeCompare(stockB.name))
      .sort((stockA: StocksProps, stockB: StocksProps) => 
        stockB.favorited - stockA.favorited)

   setStocks(stocksDataOrdered);
   setLoading(false);
});

So is my configuration of tsconfig.json to the React Native.

tsconfig.json


{
  "compilerOptions": {
    "target": "esnext",                       
    "module": "commonjs",                    
    "lib": ["es6"],                           
    "allowJs": true,                          
    "jsx": "react-native",                    
    "noEmit": true,                        
    "isolatedModules": true,                  
    "strict": true,                          
    "noImplicitAny": false,                
    "moduleResolution": "node",               
    "allowSyntheticDefaultImports": true,    
    "esModuleInterop": true                   
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}
  • 1

    It’s "working" because the typing is like any. https://codesandbox.io/s/typescript-forked-fjk6v?file=/src/index.ts:324-341

  • Wait, mine’s not like any, or did you mean yours is?

  • @Michaelpacheco Do like this, create a typing for your category on the map.

  • By sandbox ta showing that the typing is any. Putting the typing on the map might work but this is a very simple type inference that should work without the need for explicit typing

Browser other questions tagged

You are not signed in. Login or sign up in order to post.