TypeScript First Steps

## Compiling TypeScript

--
					### Goals

- Understand how TS compiles to JS
					- Take advantage of the compiler's type inference
					- Compose types with interfaces & generics
					- Specify compiler settings with `tsconfig.json`

### Ready?

# Let's go!

## TS & JS: BFFs

### Compiling TS to JS

`file.ts` 
				<span 
				class="mdi--arrow-right-bold" 
				style="width: 1em; height: 1em;"></span> 
				<span class='accent' style="font-size: 2em;">`tsc`</span>
				<span 
				class="mdi--arrow-right-bold" 
				style="width: 1em; height: 1em;"></span>
				`file.js`

</div>

Earlier, we ran this command:

```zsh
				tsc --checkJs --noEmit --strict checkMe.js
				```

What do those all those flags do exactly??

flag | tells compiler to
				--- | ---
				`--checkJs` | look at `.js` files (default: `.ts` only)
				`--strict` | be more nitpicky
				`--noEmit`| ???

### Emitted files

In the last exercise, we ran:

`tsc typeMe.ts`

This compiled our TS to JS and _emitted_ a new file `typeMe.js`
				
				--

### Inputs & outputs

option | Inputs | Outputs
				--- | --- | ---
				(default) | `.ts` | `.js` 
				`--checkJs` | `.ts` & `.js` | `.js` 
				`--noEmit` | `.ts` | nothing!

### Into the JS multiverse

![Gif of various incarnations of Michelle Yeoh in 'Everything Everwhere All At Once'](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExc202cTM2MGVuY3BjZ2Z6dm5yeXRtdHIzNGg3a3Y2NXZjYTNscmNtdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/aI2hfQOnxm5mwh9edQ/giphy.gif)

What do you notice about the emitted `typeMe.js`?

Try rerunning the command with this flag:

```zsh
				tsc --target es2020 typeMe.ts
				```

What do you notice now?

### Compiler Targets

`tsc` _targets_ a particular version of JS for its output

target | compiled code runs in
				--- | --- 
				`es5` (default) | older browsers 
				`es6`/`es2015` | most browsers
				`esnext` | newest hottest browsers

### Fine-tuning emitted JS

Other options give us even more control what ends up in the emitted JS, for example:

```zsh
				tsc --removeComments typeMe.ts
				```
				
				--

### Compiler Options

Our collection of `tsc` flags is growing!

`--strict`

`--checkJs`

`--noEmit`

`--target <version>`

`--removeComments`

![Image from Jaws with text "We're gonna need a bigger command line"](https://i.imgflip.com/a452j8.jpg)

## `tsconfig.json`

### Exercise time!
					
				[`3-compiler/exercise/README.md`](https://github.com/vakila/typescript-first-steps/tree/main/3-compiler/exercise)

```zsh
				cd 3-compiler/exercise/
				```

### Step 1: Install deps & run tests

```zsh
				npm i
				```

```zsh
				npm run test
				```

We have some work to do to get these tests passing!

### Step 2: Setup TypeScript

Install TS as a dev dependency:

```zsh
				npm i -D typescript
				```

Add a `compile` script in `package.json`:

```json
				"scripts": {
					"test": "vitest",
					"compile": "tsc"
				},
				```

What happens when you run `npm run compile`?

### Step 3: Create `tsconfig.json`

```zsh
				tsc --init
				```

Read through the config file. What do you notice?

Now try compiling again: 
				
				```zsh
				npm run compile
				```

![Image from Jaws with text "We're gonna need a bigger directory"](https://i.imgflip.com/a45g0q.jpg)

option | emits | used for e.g.
				--- | --- | ---
				`declaration` | `.d.ts` | intellisense
				`declarationMap` | `.d.ts.map` | 'Go to definition'
				`sourceMap` | `.js.map` | debugging

_disable these options if you want!_

## Fancy types

![Gif of Iggy Azalea flipping her hair in 'Fancy' video](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExangxdHoxa3N4dWhvcGlpbGFyNGNuM3l2MGliaHh0eThhejllNWhrcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5xtDarIrYGL6LGhg6sg/giphy.gif)

### Interfaces
					
					```ts
					interface User {
						username: string;
						id: number;
					}

const u: User = { username: 'anjana', id: 1}
					```

### Extending interfaces

```ts
					interface Human extends User {
						fullname: string;
					}
					
					interface AiAgent extends User {
						modelName: string;
					}
					```

```ts
					const batman: Human = { 
						username: 'batman', id: 2, fullname: 'Bruce Wayne'
					};
					const notman: Human = { 
						username: 'catwoman', id: 1
					}; // Error!

const notbot: AiAgent = { modelName: 'sonnet'}; // Error!
					const yesbot: AiAgent = { 
						username: 'claude', id: 3, modelName: 'haiku' 
					}; // OK
					```
					
					
					
					--

### Async code

```ts
					function wave(): string {
						return ":wave:";
					}
					async function asyncWave(): Promise<string> {
						return ":wave:";
					}
					
					const waveString = wave();
					const wavePromise = asyncWave();
					
					waveString.length;	// 6				
					wavePromise.length; // Error!
					```

### Type parameters

```ts
					const promisedNum: Promise<number> = Promise.resolve(5);
					const promisedStr: Promise<string> = Promise.resolve('5');
					const brokenPromise: Promise<number> = Promise.resolve(null); // Error!
					```

### Generics

```ts
					type Nullable<T> = T | null;

let nullishNum: Nullable<number> = 4;
					nullishNum = 5; // OK
					nullishNum = null; // OK
					nullishNum = 'oh no'; // Error!
					
					let stringishNull: Nullable<string> = null;
					stringishNull = 'I exist!'; // Ok
					stringishNull = 5; // Error!
					stringishNull = undefined; // Error!
					```

### Builtin utility types
					
					`Readonly<T>`
						
					`Partial<T>`

`Pick<T>`
							
					`Omit<T>`

...and [many more!](https://www.typescriptlang.org/docs/handbook/utility-types.html)

```ts
					const editable: User = { username: 'fornow', id: 1 };
					editable.username; // 'fornow'
					editable.username = 'nomore' // OK

const fixed: Readonly<User> = { username: 'forever', id: 2 }
					fixed.username; // 'forever';
					fixed.username = 'wontwork'; // Error!
					```

```ts
					const noId: Partial<User> = { username: 'noid' };
					const noUsername: Partial<User> = { id: 1 };
					const allOk: Partial<User> = { username: 'ok', id: 2};
					const noneOk: Partial<User> = {};
					const notOk: Partial<User> = {invalid: 'property'}; // Error!
					```
					--

```ts
					const batman: Human = {username: 'batman', id: 2, fullname: 'Bruce Wayne'
					};
					const justId: Pick<Human, 'id'> = { id: 3 };
					const justNames: Pick<Human, 'username' | 'fullname'> = {username: 'catwoman', fullname: 'Selina Kyle' };
					const wontWork: Pick<Human, 'fullname'> = {fullname: 'Alfred Pennyworth', id: 4};
					```

```ts
					const noUname: Omit<Human, 'username'> = {
						fullname: 'Alfred Pennyworth', 
						id: 4
					};
					const onlyUname: Omit<Human, 'id' | 'fullname'> = {
						username: 'butler',
					};
					const equivalent: Pick<Human, 'username'> = onlyUname;
					```

### Telling the compiler to hush

(when you know better)

!["Dude, that's not helping!" gif](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWIyM2QxZHhrN3d4ZjZ6bnh1ajM4ajd2Z3YyZXN0cGMyNGNzczdsYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l4EpeTPAhjNDEizvy/giphy.gif)

###  `any`

```ts
				let notHelpful: any = 'whatever';

notHelpful = 'hello'; 
				notHelpful = 5;

notHelpful.toUpperCase();
				```

![Gif of Prince singing 'you know i didnt even care'](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHJzc28ydW43aGtocGp2eml0bnhheTlmeWFhYmRlZzFqbnNqZXE3cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7Fg6TIEOoAbah28OOK/giphy.gif)

### `@ts-ignore`

```js
				// @ts-ignore
				function (anything) {
					//...
				}
				```

![Gif of Joey Badass making a rainbow hand motion with the words "truly don't care"](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGNuYnpzM2s5bDRmM29lajdodjIyN3ZreGNjODl4NmJlcmtxc2pqaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3ohzdQYqPZHHBBBYu4/giphy.webp)

![Gif from South Park of a character saying "We don't take kindly to your types 'round here"](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExYzczOTV2a29iMW9jaDZzZTdhMGd2eGR0YW8wYXVzcHlmd2hzZGs3dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l0MYsse8JnCBjQMCs/giphy.webp)