Typescript tutorials: union types and literal types in typescript

Photo by Tatiana Rodriguez on Unsplash

What are union and literal types in typescript? one of the most asked typescript
interview questions

In this typescript tutorial, we will see what
union types and literal types in typescript are

The problem without union type

with typescript now we have better control over our code, and we can express
the things in more typed manner but sometimes we need a different behavior lets
say I have an API that sends me data and sometimes it sends me an object and
some times a message in a false case like not found or lousy request in that cases
I can not have one type of datatype right, so we have to use any type over their

function fetchrecords() {// we make our api call and in success call back 
let data:any = result//result is the return from the api
//
}

the code above looks working but if we dig more inside it we are moving away
from the essential behavior of typescript which is its type of support
so
now we have two problems one is we want our type to be dynamic like it can be
string also and a costume type lets say employee also
moreover, the other
is we want our data to be of the proper type (static type also)

Union type in Action

to solve this kind of problem we have union types in typescript
so let’s
see how our code looks when we apply union types to it

function fetch records() {
// we make our API call and in success call back
let data:Employee | string = result
//result is the return from the API //
}

so now the data can be of employee type or string type, and no other type is
valid other than these two types

Literal Types

Problem

now let’s take it a step ahead and see what literal types in typescript are

let’s say I have a function

function getJuice(fruit:string){
let fruitjuice = ''
//we make juice of it
return fruitjuice;
}

now the above function is simple to understand it takes a fruit makes its juice
and return the fruit juice
now let’s call it with some fruits

getJuice('Apple')
getJuice('Mango')
getJuice('computer')

now in the above code, you will see that apple and mango are valid fruits but
the computer is not, and we don’t have any restrictions as our function accepts
the string we can pass anything to it
however, it’s wrong right we need away
for the user only to enter valid items from a group of items lets to say the
fruit can only be ‘Apple,’ ‘Mango,’ ‘Orange.’
moreover, all other values
passed should be invalid in that case we use string literals as we are using
literal for string type
so now let’s see how our code will look like

Literal types in action

function getJuice(
){
let fruitjuice = ''
//we make juice of it
return fruitjuice;
}
getJuice('Apple')
getJuice('Mango')
getJuice('computer')

now the last line in the code ‘get juice(computer’)’ will throw an error

that is literal types
I hope it made your concept clear on what is literal
and union types

Thank you

--

--

--

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular,React,React-Native,

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

1. Var Declarations and Hoisting

Angular pluggable apps. Is it the right approach? - Part 1

Testing React Native Components with Jest

How to get PDF Metadata in Node.JS

Codewars — Solving the Multiples of 3 or 5 Problem Using JavaScript

How to convert Photoshop PSD to JPG in Node.JS

Intern to Dev Lead via learning React — Lara’s story

Assert vs. Require

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Neeraj Dana

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular,React,React-Native,

More from Medium

Typescript Tutorials: Webpack Typescript Configuration

React to Angular: Use Redux for State Management in Angular with TypeScript Part 2. NgRx store

How to Add Sentry to your Angular project with Graphql

Hasura, GraphQL, and Auto Code Generation With Angular