# The core use-case of TypeScript

I am going through [this course on NextJS](https://www.udemy.com/course/master-nextjs-full-stack/) (mainly for the sake of [Supabase](https://supabase.com)) - and for my project setup, I choose TypeScript instead of plain JavaScript even though the Udemy course uses JavaScript only.

There is a local end-point we have that spits a bit of JSON data

[http://localhost:3100/transactions](http://localhost:3100/transactions)

```json
[
  {
    "id": "1",
    "amount": 100,
    "type": "Expense",
    "description": "Restaurant",
    "category": "Food",
    "created_at": "2023-03-15T23:00:00"
  },
  {
    "id": "2",
    "amount": 159,
    "type": "Expense",
    "description": "Gas",
    "category": "Car",
    "created_at": "2023-03-15T23:00:00"
  },
  {
    "id": "3",
    "amount": 500,
    "type": "Income",
    "description": "Salary",
    "category": "",
    "created_at": "2023-03-15T23:00:00"
  }
]
```

When we do something like this :

```javascript
const response = await fetch('http://localhost:3100/transactions');
const transactions = await response.json();
```

We don't know (in the code) what kind of data we're getting before-hand unless we inspect the JSON response. But if we have the blueprint ready and really know what are the possible response values back, we can define this hard-coded in as TypeScript *types* which is the very core of TypeScript.

```typescript
type TransactionType = 'Income' | 'Expense' | 'Saving' | 'Investment';

interface Transaction
{
    id: number;
    type: TransactionType,
    category?: string,
    description: string,
    amount: number,
}
```

```typescript
const response = await fetch('http://localhost:3100/transactions');
const transactions: Transaction[] = await response.json();
if (!Array.isArray(transactions)) return <p>No transactions found.</p>;

return (<section className="space-y-4">
    {transactions.map(transaction => <div key={transaction.id}>
	    <TransactionItem
	        type={transaction.type}
	        category={transaction.category}
	        description={transaction.description}
	        amount={transaction.amount}
	    />
    </div>)}
</section>)
```

Here we “tell” the TypeScript engine that const transactions would be of type `Transaction` and also it would be an **array** (of `Transaction`s).

PS: Here **TransactionItem** is a custom component that does a whole lot of HTML with DIVs, formatting and styling.