> For the complete documentation index, see [llms.txt](https://wiki.nushackers.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.nushackers.org/orbital/typescript/types-and-interfaces.md).

# Types and Interfaces

## What are Types and Interfaces?

**Types** and **interfaces** both let you describe the shape of an object.

In React, we often use them for declaring **props, state, API responses,** and **config objects**.

```tsx
// Using type
type User = {
  id: string;
  name: string;
  age?: number; // optional
};

// Using interface
interface Product {
  id: number;
  title: string;
}
```

## When to Use What?

### Interface

Use `interface` when you're working with **object-like structures** such as props and API response types.

Interfaces can be extended using⁣ `extends` , making it easy to reuse and compose types in a clean, modular way.

```tsx
interface User {
  id: string;
  name: string;
  age?: number; // Optional
}

// Extend User to include email for registered users
interface RegisteredUser extends User {
  email: string;
  isVerified: boolean;
}

const guestUser: User = {
  id: "guest-01",
  name: "Guest"
};

const registeredUser: RegisteredUser = {
  id: "user-123",
  name: "Alice",
  age: 25,
  email: "alice@example.com",
  isVerified: true
};
```

> 💡 React Tip: Prefer `interface` for component props because they’re extendable.

### Type

Use `type` for **unions, primitives,** or when combining complex types.

#### Union Types

```tsx
type Status = 'loading' | 'success' | 'error'; // union type

const showStatus = (status: Status) : void => {
  if (status === 'loading') {
    console.log('Please wait...');
  }
}

showStatus('loading'); // "Please wait..."
showStatus('success'); // Print nothing
```

#### Discriminated Unions (Tagged Unions)

Useful for modeling variants like UI components and API states.

```tsx
type TextInput = { type: 'text'; placeholder: string };
type CheckboxInput = { type: 'checkbox'; checked: boolean };

// Now the FormInput takes in either TextInput or CheckboxInput
type FormInput = TextInput | CheckboxInput;

const renderInput = (input: FormInput) : JSX.Element => {
  // render the input based on the type accordingly
  if (input.type === 'text') {
    return <input type="text" placeholder={input.placeholder} />;
  }
  return <input type="checkbox" checked={input.checked} />;
}
```

#### Function Types

```tsx
type Callback = (value: string) => void;

const onChange: Callback = (val) => {
  console.log('Changed:', val);
};
```

This is often used in props like `onClick`, `onSubmit`, or custom event handlers in React components.

#### Tuple Types

```tsx
type NameAndAge = [string, number];

const person: NameAndAge = ['Alice', 30];

// Destructuring
const [name, age] = person;
```

Tuples are great because they allow each element in the array to be a known type of value.

#### Mapped Types with type

```tsx
type Keys = 'title' | 'description';
type FieldMap = {
  [K in Keys]: string;
};

// Same as:
// type FieldMap = {
//   title: string;
//   description: string;
// };
```

#### Combining Types with & (Intersection)

```tsx
type WithTimestamp = { createdAt: Date; updatedAt: Date };
type Post = { id: string; content: string };

type PostWithTimeStamp = Post & WithTimestamp;

const post: PostWithTimeStamp = {
  id: 'p1',
  content: 'Hello world!',
  createdAt: new Date(),
  updatedAt: new Date()
};
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://wiki.nushackers.org/orbital/typescript/types-and-interfaces.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.