How do I install TypeScript and set up a new project?

Install TypeScript with npm install -D typescript inside your project directory. Run npx tsc --init to generate a default tsconfig.json file. You can then run npx tsc to compile .ts files into standard JavaScript.

What is the difference between interface and type in TypeScript?

Both define object shapes, but interface supports declaration merging and is idiomatic for object-oriented designs. Type aliases ( type ) handle unions, intersections, primitives, and tuple types that interfaces cannot express.

When should I choose unknown over any?

Choose unknown whenever a value comes from an untrusted source like external user input or a network request. TypeScript requires narrowing or type checks before you can call methods on an unknown variable, whereas any bypasses all safety checks.

Build / Code / TypeScript

TypeScript Basics

Q: Why does TypeScript infer string instead of a specific literal?

Variables declared with let can be reassigned, so TypeScript widens their type to general primitives like string . To retain an exact literal type, declare the variable with const or append the as const assertion. let wide = 'hello' ; // type: string const narrow = 'hello' ; // type: 'hello'

A beginner guide to TypeScript covering static types, variables, functions, and the compiler workflow.

TL;DR

Annotate variables with primitive types like string and number.
Define typed function parameters and explicit void or return shapes.
Run tsc to compile typed code down to clean JavaScript.

Jump to section

Primitive Types
Variables and Arrays
Functions and Parameters
Compiler and Config
Tips
Warnings
In Practice
FAQ

Primitive Types

string

Represents textual data wrapped in quotes or backticks.

const username: string = 'Alex';
const greeting: string = `Hello, ${username}`;

number

Handles integers, floating-point decimals, and special numeric values.

let count: number = 42;
const price: number = 19.99;
const hex: number = 0xff;

boolean

Stores binary true or false values for conditions.

let isComplete: boolean = false;
const hasAccess: boolean = true;

unknown

Represents any value safely by requiring type checks.

let rawInput: unknown = '{"id": 1}';
if (typeof rawInput === 'string') {
  console.log(rawInput.trim());
}

Variables and Arrays

Type Inference

Infers the type automatically from the assigned value.

let score = 100; // inferred as number
// score = 'high'; // Error: Type 'string' invalid

Array Syntax

Declares typed collections with square brackets.

const scores: number[] = [85, 92, 78];
const names: Array<string> = ['Ada', 'Linus'];

Tuple Types

Defines fixed-length arrays with specific element types in order.

let record: [number, string] = [1, 'Active'];
record = [2, 'Pending'];

readonly modifier

Prevents mutation of array elements after creation.

const values: readonly number[] = [1, 2, 3];
// values.push(4); // Error: push does not exist

Functions and Parameters

Typed Parameters

Enforces type safety on function inputs and outputs.

function add(x: number, y: number): number {
  return x + y;
}

Optional Parameters

Marks arguments that can be omitted with a question mark.

function greet(name: string, title?: string): string {
  return title ? `${title} ${name}` : name;
}

Default Parameters

Provides fallback values for omitted function arguments.

function multiply(a: number, factor: number = 2) {
  return a * factor;
}

void Return

Signifies that a function returns no meaningful value.

function logEvent(message: string): void {
  console.log(`[LOG]: ${message}`);
}

Compiler and Config

tsc --init

Generates a starter tsconfig.json file in your project.

# Initialize TypeScript config
npx tsc --init

tsc --watch

Compiles project files automatically when changes are saved.

# Start watch mode
npx tsc --watch

strict mode

Turns on all strict compiler checks simultaneously.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022"
  }
}

Tips

Rely on TypeScript type inference when assigning values to const or let variables to keep your codebase expressive and clean.
Enable the strict flag in tsconfig.json early to prevent subtle runtime bugs and missing null checks.

Warnings

Avoid using the any type because it completely disables compile-time type checking for that value.
Remember that TypeScript type annotations vanish at runtime, meaning you still need typeof checks to validate dynamic API responses.

In Practice

Demonstrates typed variables, arrays, optional parameters, and return types in a practical cart calculation.

Declare a tuple and typed arrays to hold product identifiers and prices.
Write a typed function calculating totals with an optional tax parameter.
Calculate discount adjustments using inferred numeric types.
Return a formatted string ensuring type correctness at compile time.

const items: [string, number][] = [
  ['Notebook', 14.5],
  ['Gel Pen', 2.5],
];

function calculateCartTotal(
  list: [string, number][],
  taxRate: number = 0.08
): number {
  const subtotal = list.reduce(
    (sum, [, price]) => sum + price, 0
  );
  return subtotal * (1 + taxRate);
}

const total = calculateCartTotal(items);
console.log(`Total: $${total.toFixed(2)}`);

FAQ

Variables declared with let can be reassigned, so TypeScript widens their type to general primitives like string. To retain an exact literal type, declare the variable with const or append the as const assertion.

let wide = 'hello';       // type: string
const narrow = 'hello';   // type: 'hello'