TypeScript Union Type and Distributive Conditional Types

When conditional types act on a generic type, they become distributive when given a union type.

So, in order to support Union Type, use Conditional Type because it works as loop.

Generic Type with Single Type without Distributive Conditional Type

Generic Type with Union Type without Distributive Conditional Type (This doesn't work)

Notice that conditional type is not use in line 96 so ObjectFieldNames function couldn't retrieve field names in line 102.

Generic Type with Union Type and Distributive Conditional Type

You can think Union type as array, so conditional type will iterate for each type in Union.

For example, notice that PersonType | UserType is used as Union Type in line 113, and field names of both types are listed in Popup window as shown in below screenshot.

PersonType | UserType | EventType is used as Union Type in line 115, so Popup window showed more fields in the following screenshot.

for example PersonType | UserType | EventType, then ObjectFieldNames<T> is keyof PersonType | keyof UserType | keyof EventType

TypeScript Covariance and Contravariance

I want to share a small part of wikipedia description firstly then will continue with example codes.

Assume that we work with below types.

Animal is Supertype.

Dog and Cat are Subtype.


Covariance means that Subtypes can be assigned to Supertypes. This is also known as Polymorphism or Subtyping. So Covariance = Polymorphism = Subtyping

In other words, Dog(Subtype) can be assigned to Animal(Subtype) or Dog(Subtype)

Generic types are also covariant.

Continue reading

TypeScript Narrowing Function Return Type Part 1

Narrowing return type of function is a little bit strange in TypeScript. So I share use cases below from bad to good 🙂

Use Cases

Usage 1 – Bad usage

Notice that even I call foo(0) in line 8, when I hover mouse on foo in line 8, popup shows val parameter type as string | number union type. But it should show as number. So it is not narrowing parameter and return type of function.

Usage 2 – Bad usage

This usage narrows parameter and return type of function as literal type. But we need to narrow to type of parameter not value of parameter as literal type. Popup shows generic parameter type as 0, that's why, parameter and return type becomes 0.

Usage 3 – Good usage (function overloads)

Continue reading

TypeScript Conditional Types Good Usage Part 2

The aim of this code is simply to show related fields in data field dependent on eventType.

When ChangePassword is selected in eventType filed, then userName, oldPassword and newPassword are becoming as required fields.

When ForgotPassword is selected in eventType field, then userName is just becoming required.

const msg1 = publishMessage?.({
    eventType: 'ChangePassword',
    data: {
        userName: '',
        oldPassword: '',
        newPassword: '',
    subject: '',
    topic: '',

const msg2 = publishMessage?.({
    eventType: 'ChangePassword_Success',
    data: {
        emailSubject: 'Password Verification code is ######',
        emailMessage: '',
    subject: '',
    topic: '',

const msg3 = publishMessage?.({
    eventType: 'ForgotPassword',
    data: {
        userName: ''
    subject: '',
    topic: '',

const msg4 = publishMessage?.({
    eventType: 'ForgotPassword_Success',
    data: {
        resetPasswordVerificationCode: '',
        emailSubject: '',
        emailMessage: ''
    subject: '',
    topic: '',
Continue reading

TypeScript Creating Union Type from a Union Type

type TodoAction =
    | { type: 'INIT' }
    | { type: 'ADD_TODO', text: string }
    | { type: 'REMOVE_TODO', id: string }
    | { type: 'SET_COMPLETED', id: string };
type KeysOfUnion<T extends { type: any }> = 
   T extends { type: infer K } ? {} extends Omit<Extract<T, { type: K }>, 'type'> ? never : K : never;

function dispatch(actionType: KeysOfUnion<TodoAction>) { throw new Error('Not implemented') };

Continue reading

TypeScript Separate Union Type Fields

My aim is to create a function which has two parameters. First one is union value of type field in Action and second parameter should force developer to use specific object in Action.

For example, assume that we have this function function dispatch(actionType, payload){}

dispatch('SIGN_OUT', { type: 'SIGN_OUT', userName: '' });


dispatch('SIGN_IN_FAILURE', { type: 'SIGN_IN_FAILURE', error: '' });

type Action =
    | { type: 'INIT' }
    | { type: 'SYNC' }
    | { type: 'SIGN_UP', userName: string, password: string, attributeList: Array<any> }
    | { type: 'SIGN_IN', userName: string, pasword: string }
    | { type: 'SIGN_IN_SUCCESS', accessToken: string }
    | { type: 'SIGN_IN_FAILURE', error: string }
    | { type: 'SIGN_OUT', userName: string }
    | { type: 'FORGOT_PASSWORD', userName: string }
    | { type: 'FORGOT_PASSWORD_SUCCESS', verificationCode: string }
    | { type: 'CHANGE_PASSWORD', userName: string, oldPassword: string, newPassword: string }
    | { type: 'CONFIRM_REGISTRATION', userName: string, confirmationCode: string }
    | { type: 'RESEND_CONFIRMATION_CODE', userName: string }
    | { type: 'DELETE_USER', userName: string }
    | { type: 'GET_SESSION', userName: string }
    | { type: 'GET_SESSION_SUCCESS', session: string };

type TodoAction =
    | { type: 'INIT' }
    | { type: 'ADD_TODO', text: string }
    | { type: 'REMOVE_TODO', id: string }
    | { type: 'SET_COMPLETED', id: string };
Continue reading

Azure Cosmos DB Emulator and Storage Emulator

Azurite emulator provides a free local environment for testing your Azure blob, queue storage, and table storage applications. Find more details in https://docs.microsoft.com/en-us/azure/storage/common/storage-use-azurite?tabs=docker-hub

Cosmosdb emulator provides a local environment that emulates the Azure Cosmos DB service for development purposes. Using the Azure Cosmos DB Emulator, you can develop and test your application locally. You can develop applications using Azure Cosmos DB Emulator with the SQLCassandraMongoDBGremlin/Graph, and Table API accounts. Currently the data explorer in the emulator fully supports viewing SQL data only; the data created using MongoDB, Gremlin/Graph and Cassandra client applications it is not viewable at this time. 

Creating docker-compose.yml file

version: '3.4'

    container_name: cosmosdb
    image: "mcr.microsoft.com/cosmosdb/linux/azure-cosmos-emulator"
    tty: true
    restart: always
    mem_limit: 3g
    cpu_count: 2
        - "8081:8081"
        - "10251:10251"
        - "10252:10252"
        - "10253:10253"
        - "10254:10254"
        - vol_cosmos:/data/db

    container_name: azurite
    image: "mcr.microsoft.com/azure-storage/azurite"
    restart: always
        - "10000:10000"
        - "10001:10001"
        - "10002:10002"
        - vol_cosmos:/data

Continue reading