In TypeScript, if all the keys in an interface are optional, then not reporting an error when an unexpected field is provided

Question

In TypeScript, if all the keys in an interface are optional, then not reporting an error when an unexpected field is provided

Why doesn't TypeScript report an error when an unexpected field is provided in an interface where all keys are optional? Here is the code snippet:

// This is an interface which all the key is optional
interface AxiosRequestConfig {
  url?: string;
  method?: string;
  baseURL?: string;
  headers?: any;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: any;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  responseType?: ResponseType;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: ((status: number) => boolean) | null;
  maxBodyLength?: number;
  maxRedirects?: number;
  socketPath?: string | null;
  httpAgent?: any;
  httpsAgent?: any;
}

"a" field is unexpected, why TypeScript does not report an error ?

type test= {
  [key:string]: (...args:any[])=> AxiosRequestConfig
}

const serviceMap: test = { 
  getOperationLogListByConditions(conditions: any) {
    const { 
      currentPageIndex,
      createTimeStart,
      createTimeEnd,
      ...rest
    } = conditions

    return {
      url: '/operateLog/page',
      method: 'GET',
      params: {
        ...rest,
        pageNo: currentPageIndex,
        createTimeStart: encodeURIComponent(createTimeStart),
        createTimeEnd: encodeURIComponent(createTimeEnd)
      },
      a:"" // "a" field is unexpected, why TypeScript does not report an error ?
    }
  }

I am unsure why this is happening, please provide some insight! The TypeScript version being used is 4.1.2.

typescript interface

Answer 1

Answer №1

The validation process for excess properties is not activated when dealing with return types, which explains why no error message is displayed for the extra field a. The optional nature of all properties in AxiosRequestConfig is irrelevant. explore playground

In contrast, the excess property check is enforced for expressions and variables in assignment statements, as well as for argument and parameter types in function calls.

interface Props1 {
  age: number;
}

// Excess property check triggered due to expression assignment
let x: Props1 = {age: 1, test: "tutu"}; 

function returnProps1(): Props1 {
  let props = {age: 1, test: "tutu"};
  // Return type does not trigger excess property check
  return props
}

The excess property check also applies to "fresh" object literal assignments. However, freshness can be lost through type assertion and widening. In your scenario, the freshness is compromised by type assertion since the returned type is not specified in your function definition.

const serviceMap: test = { 
  getOperationLogListByConditions(conditions: any) {
    const { 
      currentPageIndex,
      createTimeStart,
      createTimeEnd,
      ...rest
    } = conditions
    
    // Freshness of object literal lost due to type assertion
    // No excess property check triggered
    return {
      url: '/operateLog/page',
      method: 'GET',
      params: {
        ...rest,
        pageNo: currentPageIndex,
        createTimeStart: encodeURIComponent(createTimeStart),
        createTimeEnd: encodeURIComponent(createTimeEnd)
      },
      a:"" // Unexpected "a" field without TypeScript error reporting
    }
  }

To maintain object literal freshness, one solution is to specify the return type in the function definition.

const serviceMap: Test = { 
  getOperationLogListByConditions(conditions: any): 
  AxiosRequestConfig {
    const { 
      currentPageIndex,
      createTimeStart,
      createTimeEnd,
      ...rest
    } = conditions

    // No type assertion
    // Object literal remains fresh
    // Excess property check triggered
    return {
      url: '/operateLog/page',
      method: 'GET',
      params: {
        ...rest,
        pageNo: currentPageIndex,
        createTimeStart: encodeURIComponent(createTimeStart),
        createTimeEnd: encodeURIComponent(createTimeEnd)
      },
      a:"" // Error message should be displayed
    }
  }
}

check out playground

Answer 2

The validation process for excess properties is not activated when dealing with return types, which explains why no error message is displayed for the extra field a. The optional nature of all properties in AxiosRequestConfig is irrelevant. explore playground

In contrast, the excess property check is enforced for expressions and variables in assignment statements, as well as for argument and parameter types in function calls.

interface Props1 {
  age: number;
}

// Excess property check triggered due to expression assignment
let x: Props1 = {age: 1, test: "tutu"}; 

function returnProps1(): Props1 {
  let props = {age: 1, test: "tutu"};
  // Return type does not trigger excess property check
  return props
}

The excess property check also applies to "fresh" object literal assignments. However, freshness can be lost through type assertion and widening. In your scenario, the freshness is compromised by type assertion since the returned type is not specified in your function definition.

const serviceMap: test = { 
  getOperationLogListByConditions(conditions: any) {
    const { 
      currentPageIndex,
      createTimeStart,
      createTimeEnd,
      ...rest
    } = conditions
    
    // Freshness of object literal lost due to type assertion
    // No excess property check triggered
    return {
      url: '/operateLog/page',
      method: 'GET',
      params: {
        ...rest,
        pageNo: currentPageIndex,
        createTimeStart: encodeURIComponent(createTimeStart),
        createTimeEnd: encodeURIComponent(createTimeEnd)
      },
      a:"" // Unexpected "a" field without TypeScript error reporting
    }
  }

To maintain object literal freshness, one solution is to specify the return type in the function definition.

const serviceMap: Test = { 
  getOperationLogListByConditions(conditions: any): 
  AxiosRequestConfig {
    const { 
      currentPageIndex,
      createTimeStart,
      createTimeEnd,
      ...rest
    } = conditions

    // No type assertion
    // Object literal remains fresh
    // Excess property check triggered
    return {
      url: '/operateLog/page',
      method: 'GET',
      params: {
        ...rest,
        pageNo: currentPageIndex,
        createTimeStart: encodeURIComponent(createTimeStart),
        createTimeEnd: encodeURIComponent(createTimeEnd)
      },
      a:"" // Error message should be displayed
    }
  }
}

check out playground

In TypeScript, if all the keys in an interface are optional, then not reporting an error when an unexpected field is provided

Answer №1

Similar questions

Encountering compilation issues when transitioning from Angular 7 to Angular 8

A guide to using Angular to emphasize text based on specific conditions met

Utilize the index of a for loop to manipulate an Angular string

When using create-react-app with JEST to run tests, TypeScript errors are not displayed

Managing a MySQL database in NodeJS using Typescript through a DatabaseController

What steps should I take to troubleshoot this Angular issue within a Visual Studio 2022 project that utilizes the Standalone Angular template?

TypeScript does not properly validate the types of defaultProps

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

Tips for maintaining the active state of an item within a component that loops through a dataset

Having trouble accessing a custom factory within a directive in Angular using TypeScript

Using React with Typescript to display components generated from the `map` function

Avoid invoking a TypeScript class like a regular function - _classCallCheck prevention

Prevent click events on disabled tabs in PrimeNG tabMenu

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

Broadcasting TypeScript Data Structures via Socket.IO

What is the process of converting an Array that is nested within an Object?

Prevent users from clicking buttons until all mandatory fields are filled out using react-hook-form

TS2322 error: Attempting to assign type 'any' to type 'never' is invalid

Issue with the drag functionality of Framer Motion carousel causing malfunction