TypeScript First Steps

## TS: Why, What & How

--
					### Goals

- Understand the problems TypeScript solves
					- Install TypeScript locally
					- Start checking types with `tsc`

### 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 unexpected values?

</a>

### Or just complete nonsense...

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

</a>

### ...like Non-Alphanumeric JS?!?

This is _valid_ JS (`alert(1)`):

```js
					[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[
					]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]
					])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+
					(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+
					!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![
					]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]
					+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[
					+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!!
					[]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![
					]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[
					]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![
					]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(!
					[]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])
					[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+[+!+[]]+(
					!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[
					])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()
					```

<small>

[jsf*ck.com](https://jsfuck.com/) via [Claudia Hernández: 'Javascript in Wonderland', JSConf EU 2017](https://youtu.be/gE9xn-KOp1I?feature=shared&t=831)

</small>

<h3>Types in JavaScript</h3>
										
					- <span class='accent'>_Dynamic_</span>: Types determined as code is running, not before 
					
					- <span class='accent'>_Weak_</span>: JS will try to change (_coerce_) an unexpected type of value to a type it can work with
					
					<small>Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures">MDN</a></small>
					
					--

### WAT dynamic types!

```js
					let number = 3.14159;
					let string = 'not found';

number.toFixed(); // 3
					string.toUpperCase(); // NOT FOUND

number = 'pi';
					string = 404;

number.toFixed(); // TypeError: not a function
					string.toUpperCase(); // TypeError: not a function
					```

### WAT weak types!

```js
					let elevenString = '1' + 1; // '11'
					let zero = '1' - 1; // 0
					let emptyString = [] + []; // ''
					let objectObject = [] + {}; // '[object Object]'
					```

<h3>The evolution of JS</h3>

when | 1995 | 2025
					--- | --- | ---
					what | basic interactivity | basically anything computers can do
					where | frontend only | frontend, backend, mobile... everywhere
					who | a handful of web devs | massive teams, millions of devs using open source

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 href="https://www.typescriptlang.org/docs/" target="_blank" title="TS Docs" >
					<p>typescriptlang.org/docs</p>
				</a>
				
				<a href="https://www.typescriptlang.org/play/" title="TS playground" target="_blank">
					<p>typescriptlang.org/play</p>
				</a>

## What is TypeScript?

- programming language?
				- type checker?
				- JS build tool?
				- IDE tool?

![Gif from "Schitt's Creek" of David saying "That's correct"](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGVvYzI4MXdqazNsODUydDQxcDZzYWliaDVseGd6bXYwNmo4cDQ2aSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l1J9wXoC8W4JFmREY/giphy.gif)

### TS as a language

language | JS | TS
				--- | --- | ---
				file ext | `.js` | `.ts`
				execution | interpreted | compiled to JS
				syntax | subset of TS | superset of JS
				types | dynamic, weak | static, strong

### Interpreted vs. Compiled

![Photo of pianist playing from sheet music](https://images.unsplash.com/photo-1551970353-3960cb854a2b?q=80&w=400&auto=format&fit=shrink&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

<div>

<!-- ![Photo of handwritten sheet music with pen](https://images.unsplash.com/photo-1693833256158-3e92c49bd438?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

![Photo of person preparing to transcribe sheet music](https://plus.unsplash.com/premium_photo-1702320399078-f425948f7968?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D) -->

![Photo of guitarist transcribing sheet music](https://plus.unsplash.com/premium_photo-1726848367163-e16a527ddd84?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D)

</div>

### TS as a <span class="accent">superset</span> of JS

### TS as tooling

- <span class="accent">Dev tool</span>: can integrate with IDEs & other tools to provide autocomplete, hints, etc.
				- <span class="accent">Build tool</span>: can generate JS code for various target platforms/versions