42

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

enumeration members are type-checked by the TypeScript compiler

Code Examples

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'));

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'));
Brian Love

I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.

Google Developers Expert

Discussions are healthy ❤️