title: How to make a subtype of string in typescript
body: <p>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 <code>MapEditor</code>. The state of Map Editor is like </p>
  
  <pre><code>export interface IMapEditorState {
     mousePos: IPoint;
     countries: {[k: string]: ICountry};
     continents: { [k: string]: IContinent };
  }
  </code></pre>
  
  <p><code>countries</code> and <code>continents</code> are objects. The interface for country looks like </p>
  
  <pre><code>//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;
  }
  </code></pre>
  
  <p>Now I make a reducer function. For all the types of action I used two props <code>name</code> and <code>data</code>. <code>name</code> will always be a <code>string</code> and data will a type depending on <code>name</code></p>
  
  <pre><code>type ActionTypes = {name: "removeCountry", data: string} | {name: "addCountry", data: ICountry};
  const reducer = (state: IMapEditorState, action: ActionTypes) =&gt; {
     ...
  }
  </code></pre>
  
  <p>Now see the first type in <code>ActionTypes</code> which is <code>{name: "removeCountry", data: string}</code>. In the dispatch method a I will use <code>{name: "removeCountry"}</code> the compiler will force to pass <code>data</code> as <code>string</code> but <strong>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 <code>{[k: string]: ICountry}</code> in <code>IMapEditorState</code> or the <code>name</code> in <code>ICountry</code></strong>.</p>
  
  <p>Is there any way that I could create a subtype of a string called <code>CountryName</code> and use it </p>
  
  <pre><code>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};
  </code></pre>
  
  <p>I will very thankful if you help me and kindly give your view on my data structure if got idea what is the game. </p>