npm install typescript --save-dev
npm tsc
TypeScript is a superset of JavaScript that adds static typing, interfaces, and compile-time error checking. It compiles down to plain JavaScript.
let age: number = 25;
let name: string = 'Alice';
let isOnline: boolean = true;
let notSure: any = 'Could be anything';
let nothingHere: null = null;
let notDefined: undefined = undefined;
let symbolValue: symbol = Symbol('unique');
let bigIntValue: bigint = 9007199254740991n;
let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ['apple', 'banana'];
let mixed: (string | number)[] = ['one', 2, 'three'];
let person: [string, number];
person = ['John', 30]; // ✅
person = [30, 'John']; // ❌ Error
enum Direction {
Up = 1,
Down,
Left,
Right
}
let move: Direction = Direction.Up;
enum Status {
Success = 'SUCCESS',
Error = 'ERROR'
}
type ID = string | number;
let userId: ID = 123;
type Callback = () => void;
interface User {
name: string;
age: number;
isAdmin?: boolean; // optional
readonly id: number; // readonly
}
const user: User = { name: 'Bob', age: 25, id: 1 };
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const dog: Dog = { name: 'Fido', breed: 'Labrador' };
function greet(name: string): string {
return `Hello, ${name}`;
}
const add = (a: number, b: number): number => a + b;
function log(message: string, userId?: string) {
console.log(message, userId ?? 'Guest');
}
function multiply(a: number, b: number = 2) {
return a * b;
}
function sum(...numbers: number[]): number {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
return a + b;
}
type Status = 'success' | 'error' | 'loading';
type UserInfo = { name: string };
type AdminInfo = { admin: boolean };
type AdminUser = UserInfo & AdminInfo;
type Alignment = 'left' | 'center' | 'right';
let align: Alignment = 'left';
function identity<T>(value: T): T {
return value;
}
let num = identity<number>(42);
let str = identity('Hello');
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
console.log(arg.length);
}
interface GenericIdentityFn<T> {
(arg: T): T;
}
const myIdentity: GenericIdentityFn<number> = identity;
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
greet() {
console.log(`Hello, I'm ${this.name}`);
}
}
const alice = new Person('Alice');
alice.greet();
class Car {
public brand: string;
private speed: number;
protected year: number;
constructor(brand: string, speed: number, year: number) {
this.brand = brand;
this.speed = speed;
this.year = year;
}
}
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log('Moving...');
}
}
class Dog extends Animal {
makeSound() {
console.log('Woof!');
}
}
interface Vehicle {
start(): void;
}
class Bike implements Vehicle {
start() {
console.log('Bike starting...');
}
}
let someValue: unknown = 'Hello TypeScript';
let strLength: number = (someValue as string).length;
let input: string | null = null;
let result = input ?? 'Default';
const user = { profile: { name: 'Alice' } };
console.log(user.profile?.name); // Alice
console.log(user.address?.street); // undefined
namespace Utils {
export function log(msg: string) {
console.log(msg);
}
}
Utils.log('Hello');
// math.ts
export function add(a: number, b: number) {
return a + b;
}
// app.ts
import { add } from './math';
console.log(add(2, 3));
// logger.ts
export default class Logger {
log(msg: string) {
console.log(msg);
}
}
// main.ts
import Logger from './logger';
const logger = new Logger();
logger.log('Info');
async function fetchData(): Promise<string> {
return 'Data loaded';
}
fetchData().then(console.log);
interface User {
id: number;
name: string;
}
async function getUser(id: number): Promise<User> {
// Simulate fetch
return { id, name: 'User' };
}
interface Config {
readonly apiKey: string;
}
type Point = Record<'x' | 'y', number>;
const origin: Point = { x: 0, y: 0 };
function isString(value: any): value is string {
return typeof value === 'string';
}
function process(value: string | number) {
if (isString(value)) {
console.log(value.toUpperCase());
} else {
console.log(value.toFixed(2));
}
}
interface Dictionary {
[key: string]: string;
}
const dict: Dictionary = { hello: 'world' };
type Flags = { [K in 'option1' | 'option2']: boolean };
const flags: Flags = { option1: true, option2: false };
type NonNullable<T> = T extends null | undefined ? never : T;
type SafeString = NonNullable<string | null>; // string
let value: unknown;
value = 5; // OK
// console.log(value.length); // Error
let anyValue: any;
anyValue = 5;
console.log(anyValue.length); // No error, but risky
function throwError(msg: string): never {
throw new Error(msg);
}
function sealed(target: any) {
Object.seal(target);
Object.seal(target.prototype);
}
@sealed
class SealedClass {}
interface Todo {
title: string;
description: string;
completed: boolean;
}
// Partial
type PartialTodo = Partial<Todo>;
// Required
type RequiredTodo = Required<PartialTodo>;
// Pick
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
// Omit
type TodoWithoutDesc = Omit<Todo, 'description'>;
// ReturnType
function f() {
return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;
// Parameters
type Params = Parameters<(a: number, b: string) => void>;
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // "name" | "age"
const person = { name: 'Alice', age: 30 };
type PersonType = typeof person; // { name: string; age: number }
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
const max: number = 100;
if (max > 50) {
console.log('Large');
}
const isEven: boolean = 10 % 2 === 0 ? true : false;
const color: string = 'red';
switch (color) {
case 'red':
console.log('Stop');
break;
default:
console.log('Go');
}
for (let i: number = 0; i < 5; i++) {
console.log(i);
}
let count: number = 0;
while (count < 5) {
console.log(count++);
}
const arr: number[] = [1, 2, 3];
for (const num of arr) {
console.log(num);
}
const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key);
}
const nums: number[] = [1, 2, 3];
// Map
const doubled: number[] = nums.map((n) => n * 2);
// Filter
const evens: number[] = nums.filter((n) => n % 2 === 0);
// Reduce
const sum: number = nums.reduce((acc, curr) => acc + curr, 0);
const readOnlyNums: ReadonlyArray<number> = [1, 2, 3];
// readOnlyNums.push(4); // Error
const set: Set<number> = new Set([1, 2, 3]);
set.add(4);
set.delete(1);
const map: Map<string, number> = new Map();
map.set('one', 1);
map.get('one'); // 1
const car: { type: string; mileage?: number } = {
type: 'Toyota'
};
interface StringArray {
[index: number]: string;
}
const myArray: StringArray = ['Bob', 'Fred'];
interface Square {
color: string;
width: number;
}
// const redSquare = { color: "red", width: 100, height: 100 }; // Error if strict
namespace Geometry {
export interface Point {
x: number;
y: number;
}
export function distance(p1: Point, p2: Point): number {
return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
}
}
// tsconfig.json { "compilerOptions": { "moduleResolution": "node" } }
const [first, second]: [number, number] = [1, 2];
const { name: userName, age }: { name: string; age: number } = {
name: 'Alice',
age: 30
};
const arr1: number[] = [1, 2];
const arr2: number[] = [...arr1, 3, 4];
const greeting: string = `Hello, ${name}`;
const square = (x: number): number => x * x;