TypeScript First Steps

## TS: Why, What & How

--
					### Goals

- Understand the problems TypeScript solves
					- Install & configure TS in a JS codebase
					- Start using & compiling TS files

### Ready?

# Let's go!

## The Errors of our JS Ways

### Ever run into errors like this?
					
					```js
					"Cannot read 'property' of undefined"

"Cannot set properties of null"

"'undefined' is not a function"

```

### Or things that shouldn't work, but do?

```js
					document.titel = "My Web Page"
					// "My Web Page" 
					
					document.body = 'oopsie';
					// undefined

document.body
					// null

```

### Or unexpected results?

</a>

### Or just complete nonsense?

<small>"Wat" talk by Gary Bernhardt @ CodeMash 2012</small>

</a>

What if we could catch problems like this <span class="accent">before</span> our users do?

What if we could even <span class="accent">avoid writing</span> code that won't run in the first place?

<h2>A new <span class="accent">Type</span> of Script</h2>

<!-- --

</a> -->

--
				
				<h3>
					<a href="https://www.typescriptlang.org/docs/" target="_blank" title="TS Docs" >
						typescriptlang.org/docs
					</a>
				</h3>
				<h3>
				<a href="https://www.typescriptlang.org/play/?#code/PTAEBUE8AcFMGUDGAnAltALqayD2A3VAE1gGdQBHAV1UQGsBaAM1QA9RlZFcBbH2AHZEAhhlS4B5JrmQAoEKG58JoYYkTFBGUgDpQABTw9M5UgAtcAd1BVooVANCRcVZKFhFUGGaABGw0g95MBUMMzJYDi5efiFRcUkdWWDQADEfWFZhYwAbSKg4JDRMRWFHHAJNShp6ZjYyFOk3DBhccgcnF2aYMgAuZO5JLFgqPORSADkqHl9YNwBeUAAmHQB2AEYADiXNrZ2AFgBuWRGxyenZ5B1veAxkMoBzAAoASmOFUE+v74A9AH0AYCfqAGKBAnlEFgwqhyN4wbBImFIjlUA8zFhfKNfAMcgFyABRLK5WAAYVxpHIAG9ZJ9+GFcERXqBqd9oboBLgMAARLi4zhEUCLdYABmOnwAvrJJUA" title="TS playground" target="_blank">
					typescriptlang.org/play
				</a>
				</h3>

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

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

</a>

This JS codebase has some bugs!

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

### Setting up

- Install VSCode IDE: [code.visualstudio.com](https://code.visualstudio.com/)
				- Clone/download the project repo: <br>
					[github.com/vakila/typescript-first-steps/event-me](https://github.com/vakila/typescript-first-steps/event-me)
				- Open the project in VSCode

```sh
				git clone git@github.com:vakila/typescript-first-steps/event-me.git
				cd event-me
				code .
				```
				
				--

### Install dependencies

```bash
				npm install
				```

### Run the dev server

```bash
				npm run dev
				```

### Open [localhost:5173](http://localhost:5173)

### Time to TypeScript!

```sh
				npm install --save-dev typescript
				npm i -D typescript
				```

```sh
				npx tsc --init
				```
				
				--

<h2> 
				<a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html" target="_blank" title="tsconfig docs">
				
				`tsconfig.json`

</a>
				</h2>

![Gif of man looking at woman's computer and asking "Is that some sort of code?"](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExazQ5M2V4MzFiM2F0aHQxcWprM2pjOXZ2Zmg5dWwzZ2YyMXZkejdjNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SSM6HdOicCahnOZ5hM/giphy.webp)

--
				
				
				```json 
				{
					"compilerOptions": {
					  /* Visit https://aka.ms/tsconfig 
					  to read more about this file */
					}
				}
				```

```json
				/* Modules */
				"module": "ESNext",
				"rootDir": "./",                                  
				"moduleResolution": "bundler", 
				"baseUrl": "./",
				"paths": {
					"@*": [
						"src/*"
					],
				},
				```

```json
				/* JavaScript Support */
				"allowJs": true, 
				"checkJs": true,

/* Output options */
				"noEmit": true,
				```

```sh
				npx tsc
				```

```json
				"scripts": [
					"check": "tsc"
				]
				```

![Simpsons gif "I won't be needing this [green pen, only red]"](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDU5ajh5bGF4YXZ0YmRqZXF0amFhNzlueHF6ZWg4Mmw5dm0yeHl4eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o6Mb65G4Xjv5j0VGw/giphy.webp)

### We need moar types!

[Vite](https://vitejs.dev) app uses [Node](https://nodejs.org) to build the site

```json
				"types": [
					"vite/client"
				],
				```

```sh
				npm i -D @types/node 
				```

Now 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)