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

Myths

• 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

Class

Utility types

Labelled Tuples

Recursive Types

Narrowing

Type Manipulation

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

Tricky Types

Generics

Type Guards

Declaration Merging

Operators

Template literal types

TypeScript in runtime - Error Handling

Create types for .map() for Objects

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