TypeScript interface default value on string property

Question

I have an interface that looks like this

export interface IAppSection {
  key: string;
  order: number;
  header: string;
  content: string;
  modifiedAt: string;
  modifiedByEmployeeId: number;
  change: 'added' | 'removed' | 'updated' | 'none';
}

What I'd like to do is have change default as none when the object this interface relates to is stored.

I have tried change: 'added' | 'removed' | 'updated' | 'none' = 'none' but this does not work.

I am sure I am doing something wrong here and would really appreciate some feedback on how I can achieve this.

Answer 1

You can't do this with interfaces. Interfaces are completely erased at runtime and can't impact runtime behaviour; this is by design. You can create a class instead and assign a default value to the field, or you can create a function that will assign the defaults.

We could even construct a function that helps us create such functions with defaults:

interface IAppSection {
  key: string;
  order: number;
  header: string;
  content: string;
  modifiedAt: string;
  modifiedByEmployeeId: number;
  change: 'added' | 'removed' | 'updated' | 'none';
}

function withDefaults<T>() {
  return function <TDefaults extends Partial<T>>(defs: TDefaults) {
    return function (p: Pick<T, Exclude<keyof T, keyof TDefaults>> & Partial<TDefaults>) :T {
      let result: any = p;
      for (let k of Object.keys(defs)) {
        result[k] = result[k] || defs[k];
      }
      return result;
    }
  }
}

const appSection = withDefaults<IAppSection>()({
  change: 'none'
})