Understand the types - TypeScript

Complete Workshop by Vilva Athiban


What is TypeScript

  • Superset of JS
  • Made of: Language, Language server & Compiler
  • Compiles to JavaScript

Why TypeScript

Developer Experience

  • In-Editor Docs
  • Understand Adjacent code
  • Less memory (of Dev)
  • Easy Refactoring
  • AutoComplete

App Benefits

  • Fewer Runtime errors
  • Possibility of catching bugs during Dev time
  • Stable Contract & Richness of data
  • Updating "Breaking changes of Libraries" made easy
  • Auto-generating Docs


  • Zero runtime errors
  • Better Performance
  • Auto-Optimized code

Basic Types

Type Inferance & Explicit types

String, number and boolean

Arrays and Tuples

Functions and Objects

Literal Types

Union Types & Enums

Other types

  • null
  • undefined
  • bigint
  • symbol

Advanced Types

Interfaces & Type Alias

Function Signature Overloading

Type Assertions


Utility types

Labelled Tuples

Recursive Types


Type Manipulation

  • keyof Type
  • typeof Type
  • Indexed Access
  • Condition Type
  • Mapped Type

Tricky Types


Type Guards

Declaration Merging


Template literal types

TypeScript in runtime - Error Handling

Create types for .map() for Objects

JS, TS Configuration & Declaration files

Babel & TypeScript

React Loves TypeScript

Migrate React App to TypeScript

Step 1: Lethargic conversion

  • Change all files from .js to .ts
  • Don't change any functionality or logic
  • Allow implicit Any

Step 2: Explicit Any

  • Assign types (atleast any) to every required piece of code

Step 3: Strict mode

  • Enable Strict mode
  • Replace Any with types

Auto-Generate Types with GraphQL

Add types to GraphQL queries in the App

Step 1: Setup GraphQL Codegen

Step 2: Write your Queries & Mutations

Step 3: Run Codegen and use the types directly

Read types of OSS Libs


Fun time

Understand the Types - TypeScript

By Vilva Athiban

Understand the Types - TypeScript

  • 151