Answer a Question
Sign In

Prefer Enum Over Multiple String Constants

Wednesday, October 23, 2019

Having "magic" strings in your code can lead to issues whereas using an enumeration that is the single source of truth for the string value can harden your codebase.

Instructions

  • Do:

    use string and integer enumerations for constant values

  • Avoid:

    using string and numeric constant values repeatedly

  • Why:

    enumeration values are a single source of truth

  • Why:

    enumeration members are type-checked by the TypeScript compiler

Avoid

avoid using integer constants

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps { }
interface AppState {
  user: {
    displayName: string,
    accessLevel: number
  };
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        displayName: 'Brian',
        accessLevel: 2
      }
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.user.displayName} />
        {this.state.user.accessLevel > 1 && <a href="/admin">admin</a>}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

avoid using string constants

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps { }
interface AppState {
  user: {
    displayName: string,
    accessLevel: string
  };
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        displayName: 'Brian',
        accessLevel: 'admin'
      }
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.user.displayName} />
        {this.state.user.accessLevel === 'admin' && <a href="/admin">admin</a>}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Do

use enumerations for constant values

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

enum AccessLevel {
  User,
  Editor,
  Admin
}

interface AppProps { }
interface AppState {
  user: {
    displayName: string,
    accessLevel: AccessLevel
  };
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        displayName: 'Brian',
        accessLevel: AccessLevel.Admin
      }
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.user.displayName} />
        {this.state.user.accessLevel === AccessLevel.Admin && <a href="/admin">admin</a>}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
Brian Love
Brian is a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. He regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, Brian enjoys skiing, hiking, and being in the outdoors. Brian recently launched lookout.dev where you can find best practices and expert advice on topics ranging from TypeScript, Angular, React, Node.js and more.
Google Developers Expert

Whoa 🤚 You need to sign in to join the discussion.

Don't worry, if you start a comment, we'll save it for when you return. 😉