Typically, each select menu's item has ID and label . The ID is responsible to communicate with other components, services, or server-side. The label is responsible to display text for users.

This post explains how to manage constants for the menu items which has ID and mapping for its label. It uses TypeScript's as const feature which is introduced since v3.4.

In TypeScript, a tuple is an array, but its length and items are fixed. You can define a tuple with as const directive on the array literal. ( as const directive needs TypeScript 3.4+)

Create colors.ts and define colorIDs tuple as following;

export const colorIDs = ['green', 'red', 'blue'] as const;
    
A Tuple type can be converted to its item's union type. In this case, you can get 'green' | 'red' | 'blue' type from the tuple.
Add a line to colors.ts like below;

export const colorIDs = ['green', 'red', 'blue'] as const;
type ColorID = typeof colorIDs[number]; // === 'green' | 'red' | 'blue'
    
Got confusing? Don't worry. It's not magic.
colorIDs[number] means "fields which can be access by number", which are 'green' , 'red', or 'blue' . 
So typeof colorIDs[number] becomes the union type 'green' | 'red' | 'blue'. 
Because colorLabels has no explicit type, you cannot notice even if you missed to define red 's label.  
Let's make sure that colorLabels has a complete label set of all colors!  ColorID can help it.
TypeScript gives us Record type to define Key-Value map object. The key is ColorID and the value is string. So colorLabels 's type should be Record<ColorID, string> .

export const colorIDs = ['green', 'red', 'blue'] as const;
type ColorID = typeof colorIDs[number];
export const colorLabels: Record<ColorID, string> = {
  green: 'Green',
  red: 'Red',
  blue: 'Blue',
} as const;
    
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { colorIDs, colorLabels } from './colors';
@Component({
  selector: 'app-root',
  template: `
    <label for="favoriteColor">Select Favorite Color:&nbsp;</label>
    <select id="favoriteColor" [formControl]="favoriteColorControl">
      <option *ngFor="let id of colorIDs" [ngValue]="id">
        {{ colorLabels[id] }}
      </option>
    </select>
    <div>Selected color ID: {{ favoriteColorControl.value }}</div>
export class AppComponent {
  readonly colorIDs = colorIDs;
  readonly colorLabels = colorLabels;
  readonly favoriteColorControl = new FormControl(this.colorIDs[0]);
    
As far as I know, there isn't an advantage technically.  But I prefer union types because enum is not an ECMAScript's standard syntax. 

After transpilation, output code with a tuple and an object is similar to the original TS code, but output code with enum is different from the original TS code a lot. 

I think a big value of TypeScript is the mindset; it is a superset of ECMAScript. So I don't want to use enum.
I hear what you're saying! But that's similar to buying a bigger car and never putting anything in the extra space because it wasn't available in your standard car.
I think that the choice of adopting Typescript as a language comes with the acceptance of a build step, the outcome of which is up to the compiler.
          
Please check the playground link. String enums are just regular objects. You can see in the output of the Playground. 

typescriptlang.org/play?#code/KYOw... 
Thank you! I agree on it is simpler than I posted version.

In other hand, I think the ordering is important in this usecase. Object fields is easily sorted by code editing so it is not safe to keep the ordering.

This is why I want to manage IDs as a tuple. How do you think?
    
Want to contribute to open source and help make the Angular community stronger?
All the angular code is freely available on GitHub.
You're welcome to jump in!
    Once unpublished, all posts by angular will become hidden and only accessible to themselves.
    If angular is not suspended, they can still re-publish their posts from their dashboard.
  
Note:      Unpublish all posts
    Once unpublished, this post will become invisible to the public and only accessible to Suguru Inatomi.
  <p>They can still re-publish the post if they are not suspended.</p>
      Unpublish Post
      Make all posts by angular less visible
        angular consistently posts content that violates DEV Community's
        code of conduct because it is harassing, offensive or spammy.
      <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p>
      <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2023.</p>