🌱BeginnerTypeScript Basics
Basic Types
string, number, boolean, null, undefined, any, unknown, never, void and when to use each.
Overview
TypeScript's type system starts with primitive types that mirror JavaScript's runtime values, plus several special types for expressing edge cases.
The core primitives `string`, `number`, `boolean` match JavaScript's primitive values directly. `null` and `undefined` are their own types when `strictNullChecks` is on (the default with `strict: true`).
Beyond primitives, TypeScript adds:
- `any` opt out of type checking entirely; use sparingly
- `unknown` like `any` but forces you to check the type before using it; prefer over `any`
- `void` return type for functions that don't return a value
- `never` values that never occur (thrown errors, infinite loops, exhaustive checks)
- `object` any non-primitive value
- `bigint` and `symbol` corresponding to JS primitives
Key Points
- •`string`, `number`, `boolean` the core primitives (lowercase, not String/Number/Boolean)
- •`null` and `undefined` are distinct types with `strictNullChecks` on assign them explicitly
- •`any` disables type checking for that value avoid it, use `unknown` instead
- •`unknown` requires a type check before you can use the value (typeof, instanceof, type guard)
- •`void` is the return type of functions that return nothing (implicitly return `undefined`)
- •`never` is the type of values that never occur unreachable code, exhaustive switches, always-throwing functions
- •Use literal types for exact values: `const dir: "left" | "right" = "left"`
Examples
Primitive types
let username: string = "Alice";
let age: number = 30;
let isAdmin: boolean = false;
let score: number = 9.5; // numbers are always floats
// Type inference annotation often not needed
let city = "London"; // inferred as string
let count = 0; // inferred as number
// String, Number, Boolean (uppercase) are wrapper objects avoid
// let bad: String = "hello"; // works but not idiomatic
console.log(typeof username); // "string"
console.log(typeof age); // "number"
console.log(typeof isAdmin); // "boolean"null, undefined, void, and never
// null and undefined
let maybeNull: string | null = null;
maybeNull = "hello"; // now a string
// maybeNull = 42; // Error!
let notSet: string | undefined;
console.log(notSet); // undefined
// void function that returns nothing
function logMsg(msg: string): void {
console.log(msg);
// no return statement (or return;)
}
// never function that never returns normally
function fail(msg: string): never {
throw new Error(msg);
}
// never for exhaustive checks
type Direction = "north" | "south" | "east" | "west";
function move(dir: Direction): string {
switch (dir) {
case "north": return "Going north";
case "south": return "Going south";
case "east": return "Going east";
case "west": return "Going west";
default: {
const _: never = dir; // compile error if a case is missed
return _;
}
}
}any vs unknown
// any opts out of type checking entirely
let anything: any = 42;
anything = "hello";
anything.nonExistentMethod(); // No error TypeScript gave up
// unknown safe any
let value: unknown = JSON.parse('{"name":"Alice"}');
// Must narrow before using:
if (typeof value === "string") {
console.log(value.toUpperCase());
} else if (typeof value === "object" && value !== null) {
console.log("Got an object");
}
// This would be an error without narrowing:
// value.name // Error: Object is of type 'unknown'Common Mistakes
- Using `any` liberally every `any` is a hole in the type system; prefer `unknown` and narrow with type guards
- Confusing `void` and `undefined` `void` means "the return value won't be used"; a function returning `void` technically returns `undefined`
- Using uppercase `String`, `Number`, `Boolean` as types always use lowercase primitives
Note
The TypeScript mantra: never use `any` unless absolutely necessary (e.g., working with very old JS libraries). `unknown` gives you the same flexibility but forces you to prove what the type is before using it.
Exercises
Write TypeScript code to solve each exercise. Click Run to compile and execute it right here, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4