inakianduaga/TypescriptIntro.html

## TypescriptIntro.html
<!DOCTYPE html>
<html>
  <head>
    <title>Typescript Intro</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body><script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
    <textarea id="source">

class: center, middle

# TypeScript in 5 mins

> A type system on top of JS

---

class: center, middle

# Why?

I want to know what methods accept and return

Safe refactoring / compiler checks

Safe null handling

---

class: center, middle

# Modern type system

---

# Type inference

```ts
const a = "123";
// Same as
const a: string = 123;

// more complex
const b = [1,2,3].reduce((acc,n) => acc + n); // b: number
const c = "string".split("").reduce((acc, n) => acc + n); // c: string
```
--


# Substructural typing (duck typing)

```ts
function doSomethingWithUser(user: { id: number }) { /* does something */}

class User {
  constructor(readonly id: number, readonly name: string) {}
}

doSomethingWithUser(new User(1, "John")) // OK
doSomethingWithUser({ id: 123 }) // OK
```

---

# Null safety

No more runtime null exceptions! (TypeScript 2.0+)

```json
// tsconfig.json
{
    "compilerOptions": {
        ...
*       strictNullChecks: true // `null` & `undefined` types are explicit
    },
}

```

--

we turn manual checks

```ts
function outputLength(a : string) {
  if(a != null) {
    console.log(a.length);
  }
}
```

--

into compiler checks

```ts
function outputLength(a: string | null | undefined) {
  console.log(a.length) // compiler error, `a` might be `null` or `undefined`
}
```

---

# Easy to build nested types

```ts
interface ISomeDataStructure {
  a : {
    b: {
      c: string,
      d: number,
      e: number,
      f?: number,
      anotherObj?: {
        g: Promise<String>
      }
    }
  };
}

interface IAnotherDataStructure extends ISomeDataStructure {
  b: "foo" | "bar";
}

function extractSum(p: IAnotherDataStructure) {
  return p.a.b.c + p.a.b.d + (p.a.b.f != null ? p.a.b.f : 0);
}
```

---

# You get what you give

Compiler, get out of my way!:

```ts
  let a: any = {}; // I'm naughty and will mutate this later on...
  a.some.property.that.might.not.exist = a.anotherProperty; // OK
```

Compiler, please help me!:

```ts
  const a = {
    anotherProperty: 123,
  };

  a.some.property.that.might.not.exist = a.anotherProperty; // NOT OK  (`some` is not defined)
```


# More

- generics
- union types
- class inheritance / private, protected, readonly modifiers

### Most ES6/ES7 features

- Object spread
- Async/Await
- ES6 Promises
- Can target ES6 (for concatenation w/ Babel for example) or ES5 directly

---

class: center, middle

# How?

---
# Low entry barrier

Easily convert existing codebase to Typescript

1. Update your build system:

  ```js
  # webpack.config.js
  module.exports = {
      module: {
          loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
  *         { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
          ],
      },
      ...
  };

  ```

2. Rename extensions: `.js -> .ts` (`.jsx` -> `.tsx`)

3. few more things
  - add type definitions for libraries (if not packaged)
  - tsconfig.json
  - Use imports instead of requires

---

class: center, middle

# Try it yourself!

[Typescript Playground](https://www.typescriptlang.org/play/)


    </textarea>
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create({
         highlightLines: true,
         highlightStyle: "github",
         // highlightSpans: true,

      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Typescript Intro</title>
	<meta charset="utf-8">
	<style>
	@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
	@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
	@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

	body { font-family: 'Droid Serif'; }
	h1, h2, h3 {
	font-family: 'Yanone Kaffeesatz';
	font-weight: normal;
	}
	.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
	</style>
	</head>
	<body><script>document.write('<script src="http://' + (location.host \|\| 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
	<textarea id="source">

	class: center, middle

	# TypeScript in 5 mins

	> A type system on top of JS

	---

	class: center, middle

	# Why?

	I want to know what methods accept and return

	Safe refactoring / compiler checks

	Safe null handling

	---

	class: center, middle

	# Modern type system

	---

	# Type inference

	```ts
	const a = "123";
	// Same as
	const a: string = 123;

	// more complex
	const b = [1,2,3].reduce((acc,n) => acc + n); // b: number
	const c = "string".split("").reduce((acc, n) => acc + n); // c: string
	```
	--


	# Substructural typing (duck typing)

	```ts
	function doSomethingWithUser(user: { id: number }) { /* does something */}

	class User {
	constructor(readonly id: number, readonly name: string) {}
	}

	doSomethingWithUser(new User(1, "John")) // OK
	doSomethingWithUser({ id: 123 }) // OK
	```

	---

	# Null safety

	No more runtime null exceptions! (TypeScript 2.0+)

	```json
	// tsconfig.json
	{
	"compilerOptions": {
	...
	* strictNullChecks: true // `null` & `undefined` types are explicit
	},
	}

	```

	--

	we turn manual checks

	```ts
	function outputLength(a : string) {
	if(a != null) {
	console.log(a.length);
	}
	}
	```

	--

	into compiler checks

	```ts
	function outputLength(a: string \| null \| undefined) {
	console.log(a.length) // compiler error, `a` might be `null` or `undefined`
	}
	```

	---

	# Easy to build nested types

	```ts
	interface ISomeDataStructure {
	a : {
	b: {
	c: string,
	d: number,
	e: number,
	f?: number,
	anotherObj?: {
	g: Promise<String>
	}
	}
	};
	}

	interface IAnotherDataStructure extends ISomeDataStructure {
	b: "foo" \| "bar";
	}

	function extractSum(p: IAnotherDataStructure) {
	return p.a.b.c + p.a.b.d + (p.a.b.f != null ? p.a.b.f : 0);
	}
	```

	---

	# You get what you give

	Compiler, get out of my way!:

	```ts
	let a: any = {}; // I'm naughty and will mutate this later on...
	a.some.property.that.might.not.exist = a.anotherProperty; // OK
	```

	Compiler, please help me!:

	```ts
	const a = {
	anotherProperty: 123,
	};

	a.some.property.that.might.not.exist = a.anotherProperty; // NOT OK (`some` is not defined)
	```


	# More

	- generics
	- union types
	- class inheritance / private, protected, readonly modifiers

	### Most ES6/ES7 features

	- Object spread
	- Async/Await
	- ES6 Promises
	- Can target ES6 (for concatenation w/ Babel for example) or ES5 directly

	---

	class: center, middle

	# How?

	---
	# Low entry barrier

	Easily convert existing codebase to Typescript

	1. Update your build system:

	```js
	# webpack.config.js
	module.exports = {
	module: {
	loaders: [
	// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
	* { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
	],
	},
	...
	};

	```

	2. Rename extensions: `.js -> .ts` (`.jsx` -> `.tsx`)

	3. few more things
	- add type definitions for libraries (if not packaged)
	- tsconfig.json
	- Use imports instead of requires

	---

	class: center, middle

	# Try it yourself!

	[Typescript Playground](https://www.typescriptlang.org/play/)


	</textarea>
	<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
	</script>
	<script>
	var slideshow = remark.create({
	highlightLines: true,
	highlightStyle: "github",
	// highlightSpans: true,

	});
	</script>
	</body>
	</html>