# Adding Data and Types

Now we have an overengineered "Hello world", let's make it actually do something.

I've gone back and forth on calling types of Pokemon (as in Pikachu and Squirtle and their unique data) Breeds and Species.  I'm going with Species this time, but you do you!

Let's create a `/data/species` directory in our root and add 4 `.json` files as such, so our project now looks like this

```
.git/
src/
  - index.ts
data/
  species/      <-- the directory we just added
    - 1.json    <-- empty file, fill with bulbasaur's data
    - 4.json    <-- empty file, fill with charmander's data
    - 7.json    <-- empty file, fill with squirtle's data
    - 25.json   <-- empty file, fill with pikachu's data
package.json
tsconfig.json
yarn.lock
```

In the files, let's put this data (the id of the pokemon lines up with the filename):

in `1.json`

```json
{
  "id": 1,
  "name": "Bulbasaur",
  "types": [
    "Grass",
    "Poison"
  ],
  "stats": {
    "hp": 45,
    "attack": 49,
    "defense": 49,
    "spAttack": 65,
    "spDefence": 65,
    "speed": 45
  }
}
```

in `4.json`

```json
{
  "id": 4,
  "name": "Charmander",
  "types": [
    "Fire"
  ],
  "stats": {
    "hp": 39,
    "attack": 52,
    "defense": 43,
    "spAttack": 60,
    "spDefense": 50,
    "speed": 65
  }
}
```

in `7.json`

```json
{
  "id": 7,
  "name": "Squirtle",
  "types": [
    "Water"
  ],
  "stats": {
    "hp": 44,
    "attack": 48,
    "defense": 65,
    "sp-atk": 50,
    "sp-def": 64,
    "speed": 43
  }
}
```

in `25.json`

```json
{
  "id": 25,
  "name": "Pikachu",
  "types": [
    "Electric"
  ],
  "stats": {
    "hp": 35,
    "attack": 55,
    "defense": 40,
    "sp-atk": 50,
    "sp-def": 50,
    "speed": 90
  }
}
```

Whew!  We good?  K.  If not, lemme know!

#### Let's Start Reading Files!

Let's create a new directory called `species-service` and toss in a `file.ts` so our project now looks like this:

```
.git/
src/
  - index.ts
  species-service/
    - file.ts
data/
  species/      
    - 1.json
    - 4.json
    - 7.json
    - 25.json
package.json
tsconfig.json
yarn.lock
```

We're going to have a few different iterations of`species-services` so this `file.ts` is the one that will interact with files.  You can go all the way with this file approach, or fork off and do the database approach as we'll do in future chapters, as you can do it either way.

Since we're going to be using files, we need to import Node.js's File Service module, `fs`.

And since that file is going to be at a specific path, let's also import `path`.

And then let's add and immediately export a `getSpecies` function that takes in a species ID and returns some data.

```typescript
import fs from 'fs';
import path from 'path';

export const getSpecies(id: number) : Promise<any> => {
  // todo: read the file
  // todo: parse the file
  // todo: handle errors if there are any 
}
```

Sweet! This is a solid starting place. &#x20;

{% hint style="info" %}
I'm returning a `Promise`, because I know that our other approaches to storing and retrieving data, and although our code with being synchronous, we want to make them as similar as possible, as we're going to be doing this in a few different ways.  A peek into what we'll be doing is called Dependency Injection, and it requires that your different services (like one that could read from files, a database, or API) have the same interface.  You'll see what/why/how later! &#x20;
{% endhint %}

I don't like returning an `any`.  One of the benefits of Typescript is it keeps you honest.  Let's create a `types` directory and add our types to it.

{% hint style="info" %}
There are so many cool things about Typescript, and one of them is to add a `types.d.ts` that encapsulates all your types.  I'm doing it more explicitly here because I prefer this experience, but I'll add resources for if you want to go that other direction.
{% endhint %}

Let's add a `types` directory to our src, and add an `index.ts` where we'll put our types.

```
.git/
src/
  - index.ts
  species-service/
    - file.ts
  /types        <-- added this directory
    - index.ts  <-- added this empty file
data/
  species/      
    - 1.json
    - 4.json
    - 7.json
    - 25.json
package.json
tsconfig.json
yarn.lock
```

In that `index.ts` we just added, throw these types in there (you can leave out the comments)

```typescript
export interface StatGroup {
  hp: number;        // the base HP of the species, and resulting Pokemon 
  attack: number;    // the base Attack of the species, and resulting Pokemon 
  defense: number;   // the base Defense of the species, and resulting Pokemon 
  spAttack: number;  // the base Special Attack of the species, and resulting Pokemon 
  spDefense: number; // the base Special Defense of the species, and resulting Pokemon
  speed: number;     // the base Speed of the species, and resulting Pokemon
}

export interface Species {
  id: number;
  name: string;     // the display name of the pokemon
  types: string[];  // fire, water, grass, etc
  stats: StatGroup; // that type we created above
}
```

We'll be using `StatGroup` in a few places, so it made sense to make a new type for it.

Back to our `./species-service/file.ts`, let's continue filling out our `getSpecies` function!

We'll add an import for these new types, and make it so we're returning that type!

```typescript
import fs from 'fs';
import path from 'path';
import { Species } from '../types';

export const getSpecies = (id: number): Promise<Species> => {
  
}
```

You should be getting an error saying that if you have a `Promise` of a specific type, you need to return that.  Let's address that in a sec.

For now, let's resolve with an empty value to satisfy the linter, and then fill out our function step by step:

```typescript
import fs from 'fs';
import path from 'path';
import { Species } from '../types';

export const getSpecies = (_id: number): Promise<Species> => {
  return new Promise((resolve, _reject) => {
    resolve({} as Species)
  })
}

```

{% hint style="info" %}
This is a unique way of handling `Promise` functions.  I learned it from my buddy Tyler, and have stuck with it!  You can create a `Promise`, which takes in a function that has the `resolve` and the `reject` function.  You call these functions to surface successful and failure cases.  \
\
If you call the `resolve` function, that will pass data to the `.then()` function.  If you call the `reject` function, that will pass data to the `.catch()` statement.  We'll use both on this route!
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://mikercampbell.gitbook.io/gotta-code-them-all/route-1-choose-your-starter/adding-data-and-types.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.