0% found this document useful (0 votes)
10 views10 pages

TypeScript Complete Cheat Sheet Guide

TypeScript is a strongly typed superset of JavaScript that enhances JavaScript applications with static typing, tooling, and scalability. The document provides a comprehensive overview of TypeScript, including its features, installation, basic types, and best practices, along with comparisons to JavaScript. It also covers advanced topics such as generics, utility types, and TypeScript integration with React and the DOM.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views10 pages

TypeScript Complete Cheat Sheet Guide

TypeScript is a strongly typed superset of JavaScript that enhances JavaScript applications with static typing, tooling, and scalability. The document provides a comprehensive overview of TypeScript, including its features, installation, basic types, and best practices, along with comparisons to JavaScript. It also covers advanced topics such as generics, utility types, and TypeScript integration with React and the DOM.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

TypeScript — The Complete Mega

Cheat Sheet
TypeScript is a strongly typed superset of JavaScript developed
by Microsoft. It adds static typing, tooling, and scalability to
JavaScript applications. This document matches the same
formatting, depth, and completeness as the HTML, CSS, and
React mega cheat sheets.

1. What is TypeScript?
TypeScript is JavaScript plus types. It compiles down to plain
JavaScript.

Why TypeScript?

 Static type checking


 Better IDE support
 Fewer runtime bugs
 Easier refactoring

TypeScript Timeline

Version Year
Initial Release 2012
TS 3.x 2018
TS 4.x 2020
TS 5.x 2023+
2. TypeScript vs JavaScript
Feature JavaScript TypeScript
Types ❌ ❌
Compile step ❌ ❌
Tooling Basic Advanced
Scalability Medium High

3. Installing TypeScript
npm install -g typescript
tsc --version

4. TypeScript Compiler (tsc)


tsc [Link]
tsc --watch

5. [Link]
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"strict": true,
"jsx": "react-jsx"
}
}

6. Basic Types
string
number
boolean
null
undefined
any
unknown
void
never

Example:
let name: string = "Rishabh";
let age: number = 25;

7. Type Inference
let count = 10; // inferred as number

8. Arrays & Tuples


let numbers: number[] = [1, 2, 3];
let user: [string, number] = ["John", 30];
9. Objects
type User = {
name: string;
age: number;
};

10. Enums
enum Role {
Admin,
User,
Guest
}

11. Functions
function add(a: number, b: number): number {
return a + b;
}

Optional & Default Params:


function greet(name: string = "Guest") {}

12. Type Aliases


type ID = string | number;

13. Interfaces
interface User {
id: number;
name: string;
}

Interface vs Type

 Interfaces can be merged


 Types are more flexible

14. Union Types


let value: string | number;

15. Intersection Types


type Admin = User & { role: string };

16. Literal Types


let status: "success" | "error";
17. Type Narrowing
if (typeof value === "string") {}

18. Type Assertions


const input = [Link]("app") as HTMLDivElement;

19. Optional Chaining & Nullish Coalescing


user?.profile?.name;
value ?? "default";

20. Generics
function identity<T>(value: T): T {
return value;
}

21. Generic Interfaces


interface ApiResponse<T> {
data: T;
error?: string;
}
22. Utility Types
Partial<T>
Required<T>
Readonly<T>
Pick<T, K>
Omit<T, K>
Record<K, T>

23. Advanced Utility Types


Exclude<T, U>
Extract<T, U>
NonNullable<T>
ReturnType<T>
Parameters<T>

24. Index Signatures


interface Dictionary {
[key: string]: string;
}
25. Classes
class Person {
constructor(public name: string) {}
}

26. Access Modifiers


public
private
protected
readonly

27. Abstract Classes


abstract class Shape {
abstract area(): number;
}

28. Implements Keyword


class UserService implements Service {}

29. Modules
export function fn() {}
import { fn } from './file';
30. Namespaces (Legacy)
namespace Utils {}

31. TypeScript with React


const [count, setCount] = useState<number>(0);

32. TypeScript with DOM


[Link]<HTMLButtonElement>('button');

33. Strict Mode


"strict": true

Includes:

 noImplicitAny
 strictNullChecks

34. Common TypeScript Errors


 Property does not exist
 Type not assignable
 Possibly undefined
35. Best Practices
 Avoid any
 Prefer interfaces for objects
 Enable strict mode
 Use utility types

36. TypeScript Interview Cheat Sheet


 Type vs Interface
 unknown vs any
 Generics
 Utility types

37. TypeScript Boilerplate


export {};

38. Final Notes


TypeScript enables:

 Safer code
 Scalable apps
 Better developer experience

You might also like