如何在打字稿中创建字符串的子类型

Question

I making a game called risk using typescript and react hooks. The game is played on some kind of a map. So first of all I have design I MapEditor . The state of Map Editor is like

export interface IMapEditorState {
   mousePos: IPoint;
   countries: {[k: string]: ICountry};
   continents: { [k: string]: IContinent };
}

countries and continents are objects. The interface for country looks like

//The "name" property and above key will be same in `{[k: string]: ICountry};` will be same
export interface ICountry {
   name: string;
   border: IDot[];
   neighbours: string[];
   completed: boolean;
}

Now I make a reducer function. For all the types of action I used two props name and data . name will always be a string and data will a type depending on name

type ActionTypes = {name: "removeCountry", data: string} | {name: "addCountry", data: ICountry};
const reducer = (state: IMapEditorState, action: ActionTypes) => {
   ...
}

Now see the first type in ActionTypes which is {name: "removeCountry", data: string} . In the dispatch method a I will use {name: "removeCountry"} the compiler will force to pass data as string but it couldn't be any string which I don't want. I want that I should only be able to pass string which is key of {[k: string]: ICountry} in IMapEditorState or the name in ICountry .

Is there any way that I could create a subtype of a string called CountryName and use it

export interface IMapEditorState {
   mousePos: IPoint;
   countries: {[k: CountryName]: ICountry};
   continents: { [k: string]: IContinent };
}
export interface ICountry {
   name: CountryName;
   border: IDot[];
   neighbours: string[];
   completed: boolean;
}
type ActionTypes = {name: "removeCountry", data: CountryName} | {name: "addCountry", data: ICountry};

I will very thankful if you help me and kindly give your view on my data structure if got idea what is the game.

Answer 1

If you want to be able to do these checks at compile time, you'll have to make a list of all possible country names:

type CountryName = 'cName1' | 'cName2' | 'cName3';

Or, if you can define an initial object of all possible countries, you can declare it as const (so that TS doesn't generalize its strings), and then take its keys via keyof :

const initialCountries = {
    cName1: {
        name: 'cName1',
        completed: false
        // ...
    },
    cName2: {
        name: 'cName2',
        completed: false
    },
    cName3: {
        name: 'cName3',
        completed: false
    },
} as const;
type CountryName = keyof typeof initialCountries;

Result for CountryName is "cName1" | "cName2" | "cName3" "cName1" | "cName2" | "cName3" "cName1" | "cName2" | "cName3" .

Then you can define IMapEditorState using the above CountryName :

export interface ICountry {
    name: CountryName;
    border: IDot[];
    neighbours: string[];
    completed: boolean;
}
export interface IMapEditorState {
    mousePos: IPoint;
    countries: { [k: CountryName]: ICountry };
    continents: { [k: string]: IContinent };
}

And then the following will compile:

const initalIMapEditorState: IMapEditorState = {
    countries: initialCountries,
    // ...
};

and then you can use CountryName wherever else you need to:

type ActionTypes = {name: "removeCountry", data: CountryName} | {name: "addCountry", data: ICountry};

Answer 2

Typescript 4.1.5:

In my case I needed to mark a stringified date in this format "YYYY-MM-DD" as an ISODate rather than just a string. I used this approach, I think it's more effective than this answer if the number of valid strings is more than just a few:

interface ISODateDifferentiator extends String {
  [key: string]: unknown;
}
export type ISODate = ISODateDifferentiator & string; 

export const ValidateIsoDate = (date: string): date is ISODate => {
  return date.match(/^\d{4}-\d{2}-\d{2}$/) !== null;
} 

You get the desired Type 'string' is not assignable to type 'ISODate'. when doing an unsafe assignment but can convert using the typeguard function. You also still get the string method auto-completion.