Ways to indicate in Typescript that a value, if it exists, is not undefined

Question

Ways to indicate in Typescript that a value, if it exists, is not undefined

Is there a way to represent the following logic in TypeScript?

type LanguageName = "javascript" | "typescript" | "java" | "csharp"

type LanguageToWasmMap = {
  [key in LanguageName]: Exclude<LanguageName, key>
}

//I need this assignment to be successful
const languageNameToWasmNameMap: LanguageToWasmMap = {
  "javascript" : "typescript"
}

//I want this assignment to throw an error
const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
  "javascript" : undefined
}

Try it out on Typescript playground : Click Here

Upon further consideration, it seems logical to make the LanguageToWasmMap optional and perform a runtime check for undefined values.

typescript

Answer 1

Answer №1

Utilize Partial in TypeScript to specify that not all keys are required.

    type LanguageName = "javascript" | "typescript" | "java" | "csharp"
    
    type LanguageToWasmMap = {
      [key in LanguageName]: Exclude<LanguageName, key>
    }
    
    //I want the below to not raise an error
    const languageNameToWasmNameMap: Partial<LanguageToWasmMap> = {
      "javascript" : "typescript"
    }
    
    //I want the below to raise an error
    const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
      "javascript" : undefined
    }

playground

Answer 2

Utilize Partial in TypeScript to specify that not all keys are required.

    type LanguageName = "javascript" | "typescript" | "java" | "csharp"
    
    type LanguageToWasmMap = {
      [key in LanguageName]: Exclude<LanguageName, key>
    }
    
    //I want the below to not raise an error
    const languageNameToWasmNameMap: Partial<LanguageToWasmMap> = {
      "javascript" : "typescript"
    }
    
    //I want the below to raise an error
    const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
      "javascript" : undefined
    }

playground

Answer 3

Answer №2

To ensure flexibility, you can make certain properties optional by setting exactOptionalPropertyTypes=true in tsconfig. This will prevent the use of underfined for optional fields.

type LanguageName = "javascript" | "typescript" | "java" | "csharp"

type LanguageToWasmMap = {
  [key in LanguageName]?: Exclude<LanguageName, key> | never
}

//I want the below to not throw error
const languageNameToWasmNameMap: LanguageToWasmMap = {
  "javascript": "typescript"
}

//I want the below to throw error
const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
  "javascript": undefined
}

Playground

Answer 4

To ensure flexibility, you can make certain properties optional by setting exactOptionalPropertyTypes=true in tsconfig. This will prevent the use of underfined for optional fields.

type LanguageName = "javascript" | "typescript" | "java" | "csharp"

type LanguageToWasmMap = {
  [key in LanguageName]?: Exclude<LanguageName, key> | never
}

//I want the below to not throw error
const languageNameToWasmNameMap: LanguageToWasmMap = {
  "javascript": "typescript"
}

//I want the below to throw error
const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
  "javascript": undefined
}

Playground

Answer 5

Answer №3

After implementing the as keyword, it appears to resolve the issue at hand. However, I am uncertain if this approach may introduce any unforeseen consequences.

type ProgrammingLanguage = "javascript" | "typescript" | "java" | "csharp"

type LanguageMapping = {
  [key in ProgrammingLanguage]: Exclude<ProgrammingLanguage, key>
}

// The following should not generate an error
const languageMap = {
  "javascript": "typescript"
} as LanguageMapping

// The following should trigger an error
const languageMapWithUndefined = {
  "javascript": undefined
} as LanguageMapping

Interactive Playground

Answer 6

After implementing the as keyword, it appears to resolve the issue at hand. However, I am uncertain if this approach may introduce any unforeseen consequences.

type ProgrammingLanguage = "javascript" | "typescript" | "java" | "csharp"

type LanguageMapping = {
  [key in ProgrammingLanguage]: Exclude<ProgrammingLanguage, key>
}

// The following should not generate an error
const languageMap = {
  "javascript": "typescript"
} as LanguageMapping

// The following should trigger an error
const languageMapWithUndefined = {
  "javascript": undefined
} as LanguageMapping

Interactive Playground

Answer 7

Answer №4

Perhaps a solution could involve making the type generic, although it would require specifying the key twice:

    type LanguageName = "javascript" | "typescript" | "java" | "csharp"
    
    type LanguageToWasmMap<K extends LanguageName = LanguageName> = {
      [key in K]: Exclude<LanguageName, key>
    }
    
    // The intention is for the code below not to throw an error
    const languageNameToWasmNameMap: LanguageToWasmMap<"javascript"> = {
      "javascript" : "typescript"
    }
    
    // The goal here is for the code below to throw an error
    const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
      "javascript" : undefined
    }

Play

Answer 8

Perhaps a solution could involve making the type generic, although it would require specifying the key twice:

    type LanguageName = "javascript" | "typescript" | "java" | "csharp"
    
    type LanguageToWasmMap<K extends LanguageName = LanguageName> = {
      [key in K]: Exclude<LanguageName, key>
    }
    
    // The intention is for the code below not to throw an error
    const languageNameToWasmNameMap: LanguageToWasmMap<"javascript"> = {
      "javascript" : "typescript"
    }
    
    // The goal here is for the code below to throw an error
    const languageNameToWasmNameMapWithUndefined: LanguageToWasmMap = {
      "javascript" : undefined
    }

Play

Ways to indicate in Typescript that a value, if it exists, is not undefined

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Is there a way to showcase the data of each table row within the tr tag in an Angular 8 application?

Exploring the most effective strategies for creating a brand-new type in TypeScript?

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Top tips for accessing and modifying an immutable object within a component retrieved from an RXJS/NGRX store in Angular

A Guide to Implementing Inner CSS in Angular

Absent 'dist' folder in Aurelia VS2015 TypeScript project structure

What is the best way to iterate through the result of an HTTP request in Angular 11?

Angular 2 code test coverage

The Angular2 Router encounters an issue with the URL when it contains the "&

Using TypeScript with React: Automatically infer the prop type from a generic parameter

What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

What is the method for incorporating a customized button into the header of a Dynamic Dialog using PrimeNG?

There seems to be a mismatch in this Typescript function overloading - None of the over

The child element is triggering an output event that is in turn activating a method within the parent

Tips for referencing functions in TypeScript code

What is the best way to update the state of a response from an API call for a detailed object using React context, so that there is no need to retrigger the API call

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

What is the solution for combining multiple String Literal union types?

Tips for handling delayed HTTP API responses in Angular