TypeScript Types
This lesson is a TypeScript code lab for Overview. Start with a small executable case, then inspect the values, static contract, runtime boundary, and failure behavior before introducing framework code.
Every example has an observable result and a small change to make. That discipline turns syntax into an engineering habit that survives refactors and real input.
What You Will Build
Five focused TypeScript programs that separate compile-time guarantees from runtime validation. Keep public boundaries narrow, test input changes deliberately, and return results a caller can use or verify.
Example 1: Use primitive annotations
This focused TypeScript Types program demonstrates one rule. Run it, change one input, and explain why the type contract and the runtime result still agree.
TypeScript
const title: string = "Types";
const attempts: number = 3;
const published: boolean = true;
console.log(title, attempts, published);Expected Result
Types 3 true
Try next: change the nearest boundary or missing-value case and make the new behavior explicit rather than relying on a silent fallback.
Example 2: Model finite states
This focused TypeScript Types program demonstrates one rule. Run it, change one input, and explain why the type contract and the runtime result still agree.
TypeScript
type Status = "draft" | "published" | "archived";
function label(status: Status): string {
return status.toUpperCase();
}
console.log(label("published"));Expected Result
PUBLISHED
Try next: change the nearest boundary or missing-value case and make the new behavior explicit rather than relying on a silent fallback.
Example 3: Keep a tuple position meaningful
This focused TypeScript Types program demonstrates one rule. Run it, change one input, and explain why the type contract and the runtime result still agree.
TypeScript
type Point = readonly [number, number];
const origin: Point = [0, 0];
console.log(origin[0] + "," + origin[1]);Expected Result
0,0
Try next: change the nearest boundary or missing-value case and make the new behavior explicit rather than relying on a silent fallback.
Example 4: Use a readonly array
This focused TypeScript Types program demonstrates one rule. Run it, change one input, and explain why the type contract and the runtime result still agree.
TypeScript
function total(values: readonly number[]): number {
return values.reduce((sum, value) => sum + value, 0);
}
console.log(total([4, 5, 6]));Expected Result
15
Try next: change the nearest boundary or missing-value case and make the new behavior explicit rather than relying on a silent fallback.
Example 5: Reject an impossible branch
This focused TypeScript Types program demonstrates one rule. Run it, change one input, and explain why the type contract and the runtime result still agree.
TypeScript
function unreachable(value: never): never {
throw new Error("unexpected value: " + value);
}
console.log("never is reserved for impossible paths");Expected Result
never is reserved for impossible paths
Try next: change the nearest boundary or missing-value case and make the new behavior explicit rather than relying on a silent fallback.
Example 6: Make the input visible
Start by naming the value the next line depends on. This keeps the lesson input explicit before we apply a transformation or call an external boundary. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
const lesson: string = "TypeScript Types";
console.log(lesson.toUpperCase());Expected Result
TYPESCRIPT TYPES
Try next: Replace the sample value with one from your own notes, predict the result, and then run it.
Example 7: Guard an empty boundary
A small guard makes the allowed and rejected path visible. We want a caller to receive an intentional result instead of discovering an unexplained failure later. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
function accepted(value: string | undefined): boolean {
return Boolean(value?.trim());
}
console.log(accepted("TypeScript Types"));Expected Result
true
Try next: Try an empty value as well as the normal value and describe why the two outcomes differ.
Example 8: Keep the transformation pure
This step returns a value instead of mixing the rule with display or storage work. That separation gives us a small unit we can run, test, and reuse. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
const double = (value: number): number => value * 2;
console.log(double(6));Expected Result
12
Try next: Call the same rule twice with different inputs and confirm that each result depends only on its input.
Example 9: Make a branch deliberate
Use a named branch where the business rule changes. A future reader should be able to point at the condition and state the result for both sides. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
const score: number = 7;
const result: string = score >= 5 ? "ready" : "review";
console.log(result);Expected Result
ready
Try next: Change the boundary value by one and explain exactly which branch becomes active.
Example 10: Use a collection without hidden mutation
Collections become safer when we can see which value is read, which value is derived, and whether the original collection remains owned by the caller. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
const lessons: readonly string[] = ["TypeScript Types", "boundary"];
console.log(lessons.join(" | "));Expected Result
TypeScript Types | boundary
Try next: Add one more item and predict the derived result before executing the code.
Example 11: Return a named outcome
A named outcome is easier to test than an implied side effect. We can now distinguish a successful path from a rejected path without guessing from console noise. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
type Outcome = { status: "ready"; lesson: string };
const outcome: Outcome = { status: "ready", lesson: "TypeScript Types" };
console.log(outcome.status);Expected Result
ready
Try next: Rename the outcome in your own words while preserving the same success and failure rule.
Example 12: Trace a small loop
Work through one value at a time. The point is not to memorize syntax; it is to see how the accumulator or output changes after each repeatable step. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
let total = 0;
for (const value of [1, 2, 3]) {
total += value;
}
console.log(total);Expected Result
6
Try next: Use a shorter collection first, then add one value and trace the extra iteration aloud.
Example 13: Keep display at the edge
The core rule prepares a value, while the outer line decides how to show it. That keeps the result usable by a UI, test, API, or command-line caller. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
function display(value: string): string {
return `Lesson: ${value}`;
}
console.log(display("TypeScript Types"));Expected Result
Lesson: TypeScript Types
Try next: Change only the display text and verify that the underlying rule and result stay unchanged.
Example 14: Test the closest boundary
A useful example includes the nearest boundary, not only the happy path. We are making the behavior inspectable before a real caller relies on it. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
function quantity(value: number): number {
if (value < 1) throw new Error("quantity must be positive");
return value;
}
console.log(quantity(1));Expected Result
1
Try next: Try the lowest supported value and then one value just outside the accepted range.
Example 15: Write a tiny regression check
A compact assertion turns the lesson into a repeatable promise. It helps us catch a changed rule before a larger program hides the source of the mistake. We are applying that habit while revisiting TypeScript Types.
Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.
TypeScript
const result: string = "TypeScript Types".toUpperCase();
if (result !== "TYPESCRIPT TYPES") throw new Error("contract failed");
console.log("contract holds");Expected Result
contract holds
Try next: Deliberately change the expected value once, observe the failed check, and then restore the correct contract.
Design Review and Worked Trace
TypeScript Types should make uncertainty visible instead of hiding it with casts. Name the input, trace the normal result, identify the boundary value, and decide which layer owns validation and failure behavior.
TypeScript protects compile-time relationships, but external JSON, browser input, environment values, and database rows still arrive at runtime. Validate those boundaries before a trusted domain function reads a property or makes a security decision.
- Run the normal input and record the exact observable result.
- Run an empty, malformed, or boundary input deliberately.
- Prefer a narrow union or result object over an unchecked cast.
- Keep mutation, I/O, and authorization at an explicit server-side boundary.
- Return a useful value or named failure a caller can test.
Professional TypeScript is readable under change: a future developer can locate the data contract, prove the normal path, and add one safe variant without reconstructing the entire module.
Common Mistakes
- Using
asoranyto silence a useful compiler warning instead of modelling the uncertainty. - Treating a type annotation as proof that a request, environment value, or storage row has been validated.
- Publishing a wide type or class surface when a caller needs only one small capability.
- Copying an example without changing an input to verify the contract and expected failure.
