lookout.devlookout.dev
search
Share Knowledge
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

checkmark-circle
 Do

use string and integer enumerations for constant values

error-circle
 Avoid

using string and numeric constant values repeatedly

info-circle
 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
Meet Brian Love

Have a question or comment?