<style>
img {
border: none !important;
width: 90vh;
object-fit: contain;
background: none !important;
box-shadow: none !important;
}
.reveal .slides>section, .reveal .slides>section>section {
padding: 0;
}
.reveal pre code {
max-height: none;
}
.slides code {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.4vh;
padding: 0.5vh 1vh;
color: #EF9A9A;
}
.slides pre code {
color: white;
}
.hljs {
color: #a9b7c6;
background: #282b2e;
display: block;
overflow-x: auto;
padding: 0.5em;
}
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
color: #6897BB;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
color: #cc7832;
}
.hljs-variable,
.hljs-template-variable,
.hljs-link {
color: #629755;
}
.hljs-comment,
.hljs-quote {
color: #808080;
}
.hljs-meta {
color: #bbb529;
}
.hljs-string,
.hljs-attribute,
.hljs-addition {
color: #6A8759;
}
.hljs-section,
.hljs-title,
.hljs-type {
color: #ffc66d;
}
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #e8bf6a;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
# React ❤️ TypeScript
---
## What is TypeScript?
JS + Static Types
- Not having to worry about using properties wrongly
- Compile-Time checking
- Better Autocompletion
- Types exist at compile time only
<!-- .element: class="fragment" data-fragment-index="1" -->
---
```javascript=
const div = (a, b) => a / b;
div(4, 2) === 2
div(4, "abc") === NaN
```
---
```typescript=
const div = (a: number, b: number): number => a / b;
div(4, 2) === 2
div(4, "abc") // ⚡️ abc is not of type `number`
```
---
```typescript=
const div = (a: number, b: number) => a / b;
div(4, 2) === 2
div(4, "abc") // ⚡️ abc is not of type `number`
```
---
### JS ⊆ TS
➡️ gradual adoption
<!-- .element: class="fragment" data-fragment-index="1" -->
---
### Simple Types
- `number`
- `string`
- `boolean`
- Literals <!-- .element: class="fragment" data-fragment-index="1" -->
- `true` & `false`
- String literals (like `"bla"`)
- Number literals (like `1`, `2`)
---
### Records & Interfaces
```typescript=
interface SomeType {
member1: boolean;
member2: HTMLElement;
member3: string;
member4: "bla";
}
```
---
### Records & Interfaces
```typescript=
interface SomeType {
member1: boolean; // can be true / false
member2: HTMLElement; // can be any HTML element
member3: string; // can be any string
member4: "bla"; // can be *just* the string "bla"
}
```
---
### Union types
"This variable has all members of both types"
`TypeA & TypeB`, "`TypeA` and `TypeB`"
---
```typescript=
const a = { x: 123 }; // type { x: number }
const b = { y: 456 }; // type { y: number }
```
---
```typescript=
const a = { x: 123 }; // type { x: number }
const b = { y: 456 }; // type { y: number }
const aAndB = { ...a, ...b };
```
---
```typescript=
const a = { x: 123 }; // type { x: number }
const b = { y: 456 }; // type { y: number }
// type { x: number, y: number } = typeof a & typeof b
const aAndB = { ...a, ...b };
```
---
### Intersection types
"This variable is either of type A or of type B"
`TypeA | TypeB`, "`TypeA` or `TypeB`"
---
```typescript=
const select = () => {
const a = { variant: 'A', x: 123 };
const b = { variant: 'B', y: 456 };
};
```
---
```typescript=
const select = () => {
// type { variant: 'A', x: number }
const a = { variant: 'A', x: 123 };
// type { variant: 'B', y: number }
const b = { variant: 'B', y: 456 };
};
```
---
```typescript=
const select = () => {
// type { variant: 'A', x: number }
const a = { variant: 'A', x: 123 };
// type { variant: 'B', y: number }
const b = { variant: 'B', y: 456 };
return Math.random() > 0.5 ? a : b;
};
```
---
```typescript=
// returns either a or b, so:
// typeof a | typeof b =
// | { variant: 'A', x: number }
// | { variant: 'B', y: number }
const select = () => {
// type { variant: 'A', x: number }
const a = { variant: 'A', x: 123 };
// type { variant: 'B', y: number }
const b = { variant: 'B', y: 456 };
return Math.random() > 0.5 ? a : b;
};
```
---
### Intersection narrowing
```typescript=
type A = typeof a = { variant: 'A', x: number };
type B = typeof b = { variant: 'B', y: number };
```
---
```typescript=
const getStr = (item: A | B): string => {
};
```
---
```typescript=
const getStr = (item: A | B): string => {
switch (item.variant) {
case "A":
case "B":
}
};
```
---
```typescript=
const getStr = (item: A | B): string => {
switch (item.variant) {
case "A":
console.log(item.x); // ✅
case "B":
}
};
```
---
```typescript=
const getStr = (item: A | B): string => {
switch (item.variant) {
case "A":
console.log(item.x); // ✅
case "B":
console.log(item.y); // ✅
}
};
```
---
```typescript=
const getStr = (item: A | B): string => {
switch (item.variant) {
case "A":
console.log(item.x); // ✅
console.log(item.y); // ⚡️
case "B":
console.log(item.y); // ✅
console.log(item.x); // ⚡️
}
};
```
---
```typescript=
const getStr = (item: A | B): string => {
switch (item.variant) {
case "A":
console.log(item.x); // ✅
console.log(item.y); // ⚡️
return String(item.x);
case "B":
console.log(item.y); // ✅
console.log(item.x); // ⚡️
return String(item.y);
}
};
```
---
```typescript=
const getStr = (item: A | B): string => {
switch (item.variant) {
case "A":
console.log(item.x); // ✅
console.log(item.y); // ⚡️
return String(item.x);
case "B":
console.log(item.y); // ✅
console.log(item.x); // ⚡️
return String(item.y);
// no `default:`-case, but that's okay because
// the switch is exhaustive!
}
};
```
---
### Strict Mode
- `tsc` can treat `null` and `undefined` as concrete types
- Every other type then becomes non-nullable
- `string !== string | null`
- Very powerful when combined with intersection types
- Forces programmer to handle `null`-case
- Completely eliminates `null`-errors 🎉
---
```typescript=
const trim = (param: string | null) => {
return param.trim(); // ⚡️ param can be `null`
if (!param) {
// this branch must diverge
return '';
}
return param.trim(); // ✅ no complaints from tsc
};
```
---
## TypeScript + React?
1. Safe passing of props
1. Handle state correctly
<!-- .element: class="fragment" data-fragment-index="1" -->
---
## Creating a new React App in TypeScript
```shell
$ npx create-react-app my-app --typescript
```
```shell
$ yarn create react-app my-app --typescript
```
---
## Demo
---
## Conclusion
- Less bugs & increased productivity
- Fluent & gradual transition
- Easy initial setup
- Great documentation, good for beginners
---
## Further Reading
- typescriptlang.org
- github.com/facebook/create-react-app
- github.com/leolabs/react-typescript-talk-contacts
{"metaMigratedAt":"2023-06-14T20:16:37.877Z","metaMigratedFrom":"YAML","title":"React ❤️ TypeScript","breaks":true,"slideOptions":"{\"theme\":\"dark\",\"controls\":false,\"transition\":\"fade\"}","contributors":"[{\"id\":\"97ec97f6-1343-47f7-b8b5-4f6f3c98cffe\",\"add\":9402,\"del\":2433},{\"id\":\"53c655a0-3881-4259-afc8-68b5fcfce041\",\"add\":290,\"del\":2}]"}