TypeScript First Steps

### Project:
            
            
                <h2 class='accent'><a>event me!</a></h2>
                
                <a href="https://github.com/vakila/typescript-first-steps/tree/main/event-me" target="_blank">

[github.com/vakila/event-me](https://github.com/vakila/event-me)

</a>
                
                
                --

This JS app has bugs!

Let's try to find & fix them with TS!

### Setting up

- Clone/download the project repo: <br>
					[github.com/vakila/event-me](https://github.com/vakila/event-me)
				- Open the repo in VSCode
				
                
                --

### Install & run the fullstack app

First, start the API server in one terminal:
                ```zsh
                cd backend
                npm i
                npm run dev
                ```

Leave the dev server running at `localhost:3000`

Then, launch the frontend client in another terminal:

```zsh
                cd frontend
                npm i
                npm run dev
                ```

You should now be able to access the UI at `localhost:5173`.

Poke around see if you notice any bugs
                
                --

Run the frontend tests:

```zsh
                npm run test
                ```

We have some work to do!

### Make it TypeScript

![Gif of Captain Picard making the 'Make it so' gesture](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExYXpoYzB3bzBpYTRiOTd5ang5emoyZXRsdHhpZ2l5M2N3MXNwczNwaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/vTuNfPi3LEf3TGHXsF/giphy.gif)

You know what to do!

In `frontend`:
                - Install TS as a dev dependency
                - Setup a `tsconfig.json`

### Compilers & Configs & Choices, oh my!

[TS Handbook >> Choosing Compiler Options](https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html)

### `tsconfig` Bases
                [github.com/tsconfig/bases](https://github.com/tsconfig/bases)
                
                Starter configs for various project types/use cases

### Using & extending bases

```sh
                npm i -D @tsconfig/recommended
                ```

```json
                // ./tsconfig.json
                {
                    "extends": "@tsconfig/recommended/tsconfig.json", 
                    "compilerOptions": {
                        // ....
                    }
                }
                ```

Browse the `tsconfig/bases` repo for more bases: 
                
                - `frontend` uses Vite & Vanilla JS
                - `backend` uses Node & Express

Extending multiple configs:

```json
                "extends": [
                    "@tsconfig/recommended/tsconfig.json",
                    "@tsconfig/vite-react/tsconfig.json"
                ],
                ```

Wondering what the resulting config looks like?

```zsh
                tsc --showconfig
                ```

OK, let's check these types!

```zsh
                tsc
                ```

Start renaming files to `.ts`:

- `Events.js`
                - `Header.js`
                - `Forms.js`

### Let's go bug hunting!

![Gif of a bug flying and being caught by a hand](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExaHk5NmdzMDg1bDR5NHdtNnc2eHFqdHJyaWp1b3Y3eHZ0MW04Y2R1cCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/I3uGzDeKjm7J21MoRN/giphy.webp)

### Fix the frontend

Declare & annotate types as needed

Squash the bugs that `tsc` and `vitest` reveal