Code chunks for "Discriminated unions in Typescript" articles

flowBasedAPI.ts

// 👎 (classic)
interface IService {
  a(): Promise;
  b(): Promise;
  c(): Promise;
}

// 🤟 (flow-based)
interface IService {
  a(): Promise<{
    b(): Promise<{
      c(): Promise;
    }>;
  }>;
}

IAsyncData.ts

// 🤟
type IAsyncData<T> =
  | { status: 'initial' }
  | { status: 'loading'; initial: true }
  | { status: 'loading'; initial: false; data: T }
  | { status: 'success'; data: T }
  | { status: 'error'; error: any };

// 👎
interface IAsyncData<T> {
  status: 'initial' | 'loading' | 'success' | 'error';
  data?: T;
  error?: any;
}

IAuthor_1.ts

interface IAuthor {
  name?: string;
  avatarUrl?: string;
}

IAuthor_2.ts

interface IAuthor {
  kind: 'anonym' | 'user'; // here we use regular union type
  name?: string;
  avatarUrl?: string;
}

IAuthor_3.ts

type IAuthor = {
  kind: 'user';
  name: string;
  avatarUrl: string;
} | { kind: 'anonym'; }

IComment.ts

interface IComment {
  id: string;
  postId: string;
  postedAt: Date;
  author: IAuthor;
}

IDocument.ts

// 👎
type IDocument = { 
  id: string; 
  createdAt: Date; 
  status: 'draft' | 'signed';
  signedAt?: Date;
};

// 🤟
type IDocument = { 
  id: string; 
  createdAt: Date;  
} & (
  | { status: 'signed'; signedAt: Date; }
  | { status: 'draft'; }
);

IValidationResult.ts

type IValidationResult<T> = 
  | { valid: 'true'; }
  | { valid: 'false'; errors: T; }

// for example
type ISignUpFormValidationResult = IValidationResult<{
  email: ('empty' | 'invalid_format' | 'already_taken' | ...)[];
  password: ('empty' | 'too_short' | 'too_simple' | ...)[];
}>

printAthorName.ts

const comment = await getCommentById(42);

// bad idea, but typescript stays silent
console.log(comment.author.name); // possibly undefined

// good idea
if (comment.author.kind === 'user') {
  if (comment.author.name != null) {
    console.log(comment.author.name);
  } else {
    // server error
    console.log('unknown');
    logDataIntegrityError(comment.author);
  }
} else {
  console.log('anonym');
}

printAthorName_2.ts

const comment = await getCommentById(42);

// typescript doesn't know whether the author is a user or an anonym here,
// so it throws an error
console.log(comment.author.name);
                           ~~~~ 
[Property 'name' does not exist on type '{ kind: "anonym"; }'.ts(2339)]

if (comment.author.kind === 'user') {
  // typescript understands that the author is a user in this scope,
  // so here is no error
  console.log(comment.author.name);
}

usingIntersection.ts

// 👎
type IAuthor = {
  kind: 'user';
  id: string;
  name: string;
  avatarUrl: string;
} | { 
  kind: 'anonym';
  id: string; // temporary id stored in cookies, for example
}

// 🤟
type IAuthor = { id: string; } // `id` is not duplicated in code anymore
  & (
    {
      kind: 'user';
      name: string;
      avatarUrl: string;
    } | { kind: 'anonym'; }
  )

versionAPI.ts

type IUser = {
  version: 1;
  permissions: ('view' | 'create' | 'edit')[];
  // ...
} | {
  version: 2;
  permissions: {
    view: boolean;
    create: boolean;
    edit: boolean;
  };
  // ...
};