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

Pipe for Angular that allows for searching full sentences regardless of the order of the words

Tips for selecting objects based on property in Typescript?

What are the best practices for utilizing an array of routes?

Is it possible to verify if the @Output is correctly wired up within an Angular component?

Can a type alias be created for more than one parameter of a class or function with multiple type parameters?

Issue: "The argument provided must be a specific string, not a string or an array of strings."

Refresh the information in the <ion-datetime> component by utilizing the formGroup

Utilizing import for Ionic3 to export const with logic

Refresh a page automatically upon pressing the back button in Angular

Leveraging NPM workspaces in combination with Expo and Typescript

Typescript: Removing signatures with a filter

Error: The identifier HTMLVideoElement has not been declared

Enforcing object keys in Typescript based on object values

Swap out the default URL in components with the global constant

Exploring Objects with Union Types in TypeScript

Tips for updating ion-select option to correspond with the object by utilizing the object's identifier as the value

Retrieve class attributes within callback function

What is the best way to limit a property and template literal variable to identical values?

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

Backend communication functions seamlessly within the service scope, yet encounters obstacles beyond the service boundaries