如何在 Typescript 的接口中将联合（或其他）类型设置为强制键名

Question

I want to union type as enum of keys for some interface for snippeting in vscode. Assume that some union types,

// myunion.d.ts
declare module 'some_module' {
  export type TargetDirectory = 'action'|'nav'|'content'
}

And make predefined interface for build preset

// preset.d.ts
import 'some_module'
declare module 'some_module' {
export interface BuildPreset {
    ...,
    predefinedTarget: { [ key: TargetDirectory]: string } // Seems not work with this code, No snippet error
  }
}

If I declare some variable with BuildPreset interface, in predefinedTarget field, all values 'action', 'nav', 'content' should exists and no other values should not. It should be like below,

const inter1: BuildPreset = { // This is Okay
  ...,
  predefinedTarget: {
    'action': 'a/b/c/',
    'nav': 'e/f/g',
    'content': 'h/i/j',
  }
}
const inter2: BuildPreset = { // key 'action' is missing -- ERROR
  ...,
  predefinedTarget: {
    'nav': 'A/B/C/',
    'content': 'D/E/F',
  }
}
const inter3: BuildPreset = { // Key 'other' is not possible - ERROR
  ...,
  predefinedTarget: {
    'action': 'a/b/c/',
    'nav': 'e/f/g',
    'content': 'h/i/j',
    'other': 'k/l/m/'
  }
}

I have lots of possible values of TargetDirectory , so code snippet should check it for preventing mistake. How can I make this possible modifying both myunion.d.ts and preset.d.ts ? I think I need to totally modify both d.ts file. Please help me.

Answer 1

For unions, The syntax is [key in TargetDirectory] . You are writing it as [key: TargetDirectory] , which is incorrect.

The syntax [key: ...] is to specify what primitive type the key should be, such as string , number , or symbol .

type TargetDirectory = 'action' | 'nav' | 'content';

interface BuildPreset {
  predefinedTarget: {
    [key in TargetDirectory]: string;
  }
}

const inter1: BuildPreset = { // This is Okay
  predefinedTarget: {
    'action': 'a/b/c/',
    'nav': 'e/f/g',
    'content': 'h/i/j',
  }
}
const inter2: BuildPreset = { // key 'action' is missing -- ERROR
  predefinedTarget: {
    'nav': 'A/B/C/',
    'content': 'D/E/F',
  }
}
const inter3: BuildPreset = { // Key 'other' is not possible - ERROR
  predefinedTarget: {
    'action': 'a/b/c/',
    'nav': 'e/f/g',
    'content': 'h/i/j',
    'other': 'k/l/m/'
  }
}

Demo in TypeScript playground .

You may find more information here in the docs .

So no, you don't need to completely modify 2 files. Only 1 line in preset.d.ts will do.