Typescript tutorials: union types and literal types in typescript

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

with typescript now we have a better control over our code, and we can express
the things in more typed manner but some time we need a different behavior lets
say I have an API which sends me data and sometimes its send me an object and
some times a message in 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

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)

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

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

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

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

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 restriction as our function accepts
string we can pass anything to it
however, it’s wrong right we need a way
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

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

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

smartcodehub is a platform where you can quicky create a fully functional and highly customizable hand written full stack application directly from your browser

--

--

--

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

Maintainable Options Parameters for Functions in JavaScript

FizzBuzz: Multiple ways to implement and their performance

How to upload files in angular 7, 8, 9, 10 and 11 using ngx-uploader-directive?

upload files using angular

Mongoose $in operator

Better JavaScript — Function Calls

More Easy React Tricks We Should Know

Create a Hi-Low Card Game with React and JavaScript

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

Mutate a code like a boss — with Angular schematics

Custom Typescript Transformers with Angular v11, v12 and v13

Managing local state with Subject and BehaviorSubject in Angular