Object Types

Question 1

What are Object Types in TypeScript and what are the three ways to define them?

Answer 1

A: Object Types in TypeScript represent how we group and pass around data through objects. There are three ways to define them: anonymous objects, interfaces, and type aliases.

// 1. Anonymous
function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}

// 2. Interface
interface Person {
  name: string;
  age: number;
}

// 3. Type Alias
type Person = {
  name: string;
  age: number;
};

Question 2

How do Optional Properties work in TypeScript and how do you handle default values?

Answer 2

A: Optional properties are marked with a question mark (?) after the property name. They may be undefined, so you need to handle those cases either with checks or default values.

interface PaintOptions {
  shape: Shape;
  xPos?: number;  // optional
  yPos?: number;  // optional
}

// Handling with destructuring and defaults
function paintShape({ shape, xPos = 0, yPos = 0 }: PaintOptions) {
  console.log(`x coordinate at ${xPos}`);
  console.log(`y coordinate at ${yPos}`);
}

// Handling with checks
function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
}

Question 3

What are readonly properties in TypeScript and what limitations do they have?

Answer 3

A: Readonly properties can’t be modified after initialization. However, readonly doesn’t make nested properties immutable.

interface SomeType {
  readonly prop: string;
}

interface Home {
  readonly resident: { name: string; age: number };
}

function visitForBirthday(home: Home) {
  // This is allowed - modifying nested property
  home.resident.age++;
  
  // This is NOT allowed
  // home.resident = { name: "New Person", age: 30 }; // Error!
}

Question 4

Q: What are Index Signatures and how do they work in TypeScript?

Answer 4

A: Index signatures allow you to describe objects that have properties that aren’t known ahead of time, but you know the type of values they will contain.

interface StringArray {
  [index: number]: string;  // Numeric index signature
}

interface Dictionary {
  [key: string]: number | string;  // String index signature
  length: number;    // OK
  name: string;      // OK because we allow string values
}

// Can be made readonly
interface ReadonlyStringArray {
  readonly [index: number]: string;
}

Question 5

Q: How do you extend types in TypeScript using interfaces?

Answer 5

A: Types can be extended using the extends keyword, allowing you to build more specific types from basic ones.

interface BasicAddress {
  name?: string;
  street: string;
  city: string;
  country: string;
  postalCode: string;
}

interface AddressWithUnit extends BasicAddress {
  unit: string;
}

// Can extend multiple types
interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
interface ColorfulCircle extends Colorful, Circle {}

Question 6

Q: What are Intersection Types and how do they differ from extended interfaces?

Answer 6

A: Intersection types combine multiple types using the & operator. Unlike interface extension, intersections handle conflicts differently.

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle;

// Usage
function draw(circle: Colorful & Circle) {
  console.log(`Color was ${circle.color}`);
  console.log(`Radius was ${circle.radius}`);
}

// Property conflicts result in 'never' type
interface Person1 { name: string; }
interface Person2 { name: number; }
type Staff = Person1 & Person2;  // name becomes type 'never'

Question 7

Q: What are Generic Object Types and how do they help with type safety?

Answer 7

A: Generic Object Types allow you to create reusable components that can work with multiple types while maintaining type safety.

interface Box<Type> {
  contents: Type;
}

// Usage
let stringBox: Box<string> = { contents: "hello" };
let numberBox: Box<number> = { contents: 42 };

// Generic function
function setContents<Type>(box: Box<Type>, newContents: Type) {
  box.contents = newContents;
}

Question 8

Q: What are Tuple Types and how do they work with optional and rest elements?

Answer 8

: Tuple types are arrays with a fixed number of elements where each element can have a specific type. They can have optional and rest elements.

// Basic tuple
type StringNumberPair = [string, number];

// Optional elements
type Either2dOr3d = [number, number, number?];

// Rest elements
type StringNumberBooleans = [string, number, ...boolean[]];

// Usage with destructuring
function doSomething(stringHash: [string, number]) {
  const [inputString, hash] = stringHash;
  console.log(inputString);  // type: string
  console.log(hash);         // type: number
}