Qs: TypeScript

One-Liners Every TypeScript Dev Should Know

TODO

TypeScript Fundamentals

TypeScript implements Structural Typing or Nominal Typing?

Structural Typing.

TypeScript: What's structural typing?

It means that types are compared based on their structure (shape).

If two types have the same properties and types of those properties, they are considered the same type, even if they have different names.

What's nominal typing ?

Nominal Typing compares types based on their names. In Java, for example, two classes with the same structure but different names are considered different types.

TypeScript: What are Abstract Classes?

Abstract classes are classes that cannot be instantiated directly and are used as blueprint for other classes.

They can have abstract methods (methods without implementation) and concrete methods (methods with implementation).

Derived classes (from the abstract class) must implement all abstract methods of the abstract class.

TypeScript, Browsers, and JavaScript Engines - True or False

The TypeScript compiler will also polyfill our code for older browsers - TRUE - TypeScript can add polyfills to support older browsers

Types in TypeScript are sets possible values data can have - TRUE - TypeScript types describe all the possible values data can have

TypeScript runs in the browser and in Node.js - FALSE - TypeScript code is delivered as JavaScript code after being compiled

Type errors are caught at runtime - FALSE - TypeScript only runs at compile or build time

Using TypeScript decreases web performance - FALSE - TypeScript does not affect performance, because types are not included in the final code

Interfaces

Interface vs Type: Are Interfaces A Kind Of Type?

An interface is a specific kind of type definition, an interface defines the shape of a value, just like many types do.

Anywhere you can use a type annotation, you can use an interface.

Interfaces are mainly for describing object shapes, with special features like declaration merging.

Feature
Interface
Type Alias

Declares a type

✔️ Yes

✔️ Yes

Structural typing

✔️ Yes

✔️ Yes

Type checking

✔️ Yes

✔️ Yes

Can represent any type (union, primitive, etc.)

❌ No

✔️ Yes

Primarily for object shapes

✔️ Yes

✔️ Not necessarily

Extends other interfaces/types

✔️ Yes

✔️ Yes (via intersection)

Implementation by classes

✔️ Yes

❌ No (cannot be implements)

Can be merged

✔️ Yes

❌ No

What happens when typescript finds two interfaces with the same name in a codebase?

It will merge them into a single interface.

Differences between abstract classes vs interfaces?

Abstract class = contract + behavior = interface + partial implementation.

Interface = contract = shape = blueprint = a purely structural contract describing the shape of an object. No implementation allowed. vs Abstract Class = uninstantiable implementation & contract = partially built toolkit = a class that cannot be instantiated and may contain both implemented and abstract members.

Interfaces = blueprint = contract = shape = what something looks like = what must exist, but gives no materials, no instructions, no behavior. vs Abstract Class = partially built toolkit = what something is and does = some tools are already there, and you must finish the rest.

Interface = “Here’s what it must look like—how you build it is up to you.” vs Abstract Class = “Here's some behavior and state you inherit; but you must complete the missing pieces.”

Feature
Abstract Class
Interface

Used for

Shared behavior + contract

Shape/contract only

Can contain implementation

✔️ Yes (methods & fields can have bodies)

❌ No (all methods are declarations only)

Allows state (fields)

✔️ Yes

❌ No (no instance fields)

Can extend a class

✔️ Yes (extend another abstract or concrete class)

✔️ Yes (extend classes via “type queries” on their instance shape)

Can extend interfaces

✔️ Yes

✔️ Yes

Constructor

✔️ Yes (including abstract constructors)

❌ No

Visibility modifiers (public, protected, private)

✔️ Yes

❌ No (all interface members are public)

Static members

✔️ Yes

❌ No

Multiple inheritance

❌ No (TS/JS don’t allow extending multiple classes)

✔️ Yes (a class can implement many interfaces)

Can be merged

❌ No

✔️ Yes (declaration merging)

Can represent unions, primitives, etc.

❌ No

❌ No (only object-like shapes)

Common things between abstract classes vs interfaces?

What They Have in Common
Explanation

Define contracts

Both specify required methods/properties that concrete classes must provide.

Cannot be instantiated directly

Interfaces have no runtime value; abstract classes are explicitly uninstantiable.

Enable polymorphism

Both allow treating many concrete classes through a common abstract type.

Provide compile-time guarantees

Both ensure that a class fulfills the declared requirements during type checking.

Participate in structural typing

Both are checked by TypeScript based on shape, not inheritance history.

Can be extended

Interfaces extend interfaces (and instance shapes); abstract classes extend classes and implement interfaces.

Guide architecture and code design

Both formalize expectations for how classes should behave.

Basics about abstract classes in TypeScript?

Abstract classes cannot be instantiated directly

Abstract classes cannot have implementations

abstract class Animal {
  abstract makeSound(): void;
  walk(): void {
    console.log("Walking");
  }
}

class Dog implements Animal {
  makeSound(): void {
    console.log("Bark!");
  }
}

Type Annotation and Generics

Why sometime type is defined as <T> or after : (semi column) ?

: — Type Annotation / Type Declaration

<T> — Generic Type Parameters

  1. Type annotation:

Syntax attaching a specific type to a variable, function parameter, or property.

let count: number = 5;
function greet(name: string): void {
  console.log("Hello " + name);
}
type User = {
  id: number;
  name: string;
};

  1. Generic Type Parameters:

Syntax used for generics — when a function, class, or interface accepts a type as a parameter.

function wrap<T>(value: T): T {
  return value;
}
interface Box<T> {
  item: T;
}

  • <T> is not a type annotation.

  • It defines a type parameter named T.

  • You later use T inside the function/interface.

Think of <T> as “this function/class works for any type, and here is what I call that type”.

  1. Together

Sometimes the two appear together.

function echo<T>(value: T): T {    // Generic function
  return value;
}
echo(123);      // T = number
echo("hello");  // T = string
interface Box<T> {   // Generic interface
  content: T;
}
const stringBox: Box<string> = { content: "hello" };
const numberBox: Box<number> = { content: 42 };
function getLength<T extends { length: number }>(value: T): number {     // Generic with constraint
  return value.length;
}
getLength("hello");   // ok
getLength([10, 20]);  // ok

What's a type parameter or type argument?

It is a placeholder for a type that must be specified when the function is called.

This is a common pattern in TypeScript for creating generic functions that can work with different types and having type flexibility without sacrificing type safety.

 function makeCopy<T>(input: T): T[] {
  return [input, input];
 }

How to handle Typing on large projects (best practices) ?

From the most important & simplest → to the least important & most complex:

  1. Enable Strict Mode in tsconfig.json

  2. Keep Types Simple (Avoid Overly Complex Generics)

  3. Organize Your Types Carefully

  4. Use Type Aliases and Interfaces Intentionally

  5. Prefer Modules Over Namespaces

  6. Use ESLint With Type-Aware Rules

  7. Document Complex Types

  8. Separate API, Domain, and UI Types

  9. Use Code Generation for APIs

  10. Improve Build Performance (Incremental Builds & Project References)

Misc

What Are The Granular Access Modifiers?

Control visibility with private/protected/public.

Visibility Modifier
Accessible Where

public (default)

Class, subclass, outside - most open

protected

Class and subclass

private

Class only - most closed

Control ownership (class vs instance) with static/nothing.

Ownership Modifier
Accessible Where

static public

Class itself and anywhere

static protected

Class and subclass (via class reference)

static private

Class itself only

1. public (default) example

class Example {
  public name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const ex = new Example("Alice");
console.log(ex.name); // ✅ Allowed

2. protected example

class Parent {
  protected role: string;

  constructor(role: string) {
    this.role = role;
  }
}

class Child extends Parent {
  getRole() {
    return this.role; // ✅ Allowed
  }
}

const c = new Child("admin");
console.log(c.role); // ❌ Error, only accessible in class/child
console.log(c.getRole()); // ✅ Allowed

3. private example

class Example {
  private secret: string;

  constructor(secret: string) {
    this.secret = secret;
  }

  revealSecret() {
    return this.secret; // ✅ Allowed
  }
}

const ex = new Example("hidden");
console.log(ex.secret); // ❌ Error
console.log(ex.revealSecret()); // ✅ Allowed

4. static example

class Example {
  static publicCounter = 0;        // Public static
  private static secretCounter = 0; // Private static

  static increment() {             // Public static
    Example.publicCounter++;       
    Example.secretCounter++;       // Accessible inside class
  }
}

console.log(Example.publicCounter); // ✅ Accessible
console.log(Example.secretCounter); // ❌ Error

What does it mean when a property it declared protected?

It can be accessed from within the class and its subclasses.

What creates a new type with all the properties optional?

interface Table {
  legs: number;
  height: number;
  width: number;
  material: string;
}

Using Partial<Table>.

https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype

Typescript - Record utility type

TODO

Typescript - Partial utility type

TODO

TODO

  • private

  • protected - protected properties can be accessed from within the class and its subclasses.

  • abstract classes

  • constructor

  • inheritance

PreviousQs: JavaScriptNextQs: React

Last updated