React + TypeScript

This talk give some insights into using ReactJS and TypeScript.

Agenda
- TypeScript: Why we need it and how we can add it to our projects
- React + TypeScript: How to add TypeScript to a React project
- React + Redux: How TypeScript helps to write the Redux part of our application
- Conclusion: What is good / where are problems

Transcript

1. 1 React Meetup Düsseldorf React❤TypeScript
2. 2 About me Software Craftsman
3. 2 About me Software Craftsman codecentric AG
 codecentric.de/karriere
4. 2 About me Software Craftsman codecentric AG
 codecentric.de/karriere
5. 2 About me Software Craftsman codecentric AG
 codecentric.de/karriere
6. 2 About me Software Craftsman daniel.mies@codecentric.de codecentric AG
 codecentric.de/karriere
7. 2 About me Software Craftsman daniel.mies@codecentric.de codecentric AG
 codecentric.de/karriere Herr Mies will's wissen https://mies.me
8. 2 About me Software Craftsman @danielmies daniel.mies@codecentric.de codecentric AG
 codecentric.de/karriere Herr Mies will's wissen https://mies.me
9. 3 Agenda TypeScript
10. 3 Agenda React & TypeScript TypeScript
11. 3 Agenda React & TypeScript TypeScript Redux & TypeScript
12. 3 Agenda Conclusion React & TypeScript TypeScript Redux & TypeScript
13. 3 Agenda Conclusion Questions React & TypeScript TypeScript Redux & TypeScript
14. 4 3 http://www.typescriptlang.org TypeScript
15. 5 Why do we need TypeScript?
16. High flexibility Dynamic typing Many libraries 6 JavaScript is great... Runs everywhere
17. 7 JavaScript is great... Runs everywhere High flexibility Many libraries Dynamic typing Errors at runtime Design errors (this, prototype) Bad IDE support Dynamic typing but not perfect
18. errors at compile time non-invasive easy learnable 8 Solution: TypeScript clean JS output
19. errors at compile time non-invasive easy learnable 8 Solution: TypeScript clean JS output •Developed by Microsoft •open source •since October 2012 •stable since January 2014 •conforms to EcmaScript standards and proposals
20. TypeScript 9 EcmaScript
21. TypeScript 9 TypeScript EcmaScript
22. TypeScript 9 TypeScript EcmaScript 1 superset of EcmaScript
23. TypeScript 9 TypeScript EcmaScript 1 superset of EcmaScript 2 optionally typed (static &structural)
24. TypeScript 9 TypeScript EcmaScript 1 superset of EcmaScript 2 optionally typed (static &structural) 3 compiles to ES3, ES5, ES201*
25. TypeScript 9 TypeScript EcmaScript 1 superset of EcmaScript 2 optionally typed (static &structural) 3 compiles to ES3, ES5, ES201* 4 no special runtime
26. 10 Getting started npm install -g typescript
27. 11 Basic project setup
28. 11 Basic project setup npm init -y
29. 11 Basic project setup npm init -y npm install --save-dev typescript
30. 11 Basic project setup npm init -y npm install --save-dev typescript tsc --init
31. 11 Basic project setup npm init -y npm install --save-dev typescript tsc --init this generates a tsconfig.json where the TypeScript configuration is stored.
32. Using types 12 function add(a: number, b:number): number{ return a + b; }
33. Interfaces 13 interface User { username: string; password: string; } const user: User = { username: 'Bob', password: 'secret' }
34. Interfaces & structural typing 14 interface Named { name: string; } class Person { name: string; } const p: Named = new Person();
35. Interfaces & structural typing 14 interface Named { name: string; } class Person { name: string; } const p: Named = new Person(); p is of type Person and Named
36. Classes 15 class Greeting{ constructor(private greeting:string = 'World'){ } greet = () => console.log(`Hello ${this.greeting}`); } const greeter = new Greeting(); greeter.greet();
37. Literal Types 16 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; let nums: Digit[] = [1, 2, 4, 8]; // Error! '16' isn't a 'Digit'! nums.push(16);
38. More features 17 ... abstract classes & generics enums decorators async await
39. 18 3 TypeScript & React
40. Setup 19
41. Setup 19 1 update your tsconfig
42. Setup 19 1 update your tsconfig 2 add a TypeScript loader to your webpack config (awesome-typescript-loader)
43. Setup 19 1 update your tsconfig 2 add a TypeScript loader to your webpack config (awesome-typescript-loader) 3 rename your files: *.js becomes *.ts and *.jsx becomes *.tsx
44. Setup 19 1 update your tsconfig 2 add a TypeScript loader to your webpack config (awesome-typescript-loader) 3 rename your files: *.js becomes *.ts and *.jsx becomes *.tsx 4 add types for react and other libraries
45. tsconfig.json 20 { "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es6", "dom"], "jsx": "react" } }
46. webpack.config.js 21 module.exports = { entry: "./src/index.ts", output: {filename: "./dist/app.js"}, resolve: {extensions: [".js", ".ts", ".tsx"]}, module: { rules: [{ test: /\.tsx?$/, loader: "awesome-typescript-loader", }] }, };
47. 22 Additional packages npm install -D @types/react @types/react-dom @types/redux @types/react-redux
48. StatelessComponents 23 import * as React from "react"; import { StatelessComponent } from "react"; type TextProps = { text: string; }; export const Text: StatelessComponent<TextProps> = ({ text }) => (<p>{{ text }}</p>);
49. Components 24 type CounterProps = { start: number }; type CounterState = { count: number }; export class Counter extends Component<CounterProps, CounterState>{ constructor(props){ super(props); this.state = {count: props.start}; } render(){ return (<p onClick={() => {this.setState({count: this.state.count+1})}}>{this.state.count}</p>) } }
50. StatelessComponents (any) 25 import * as React from "react"; import { StatelessComponent } from "react"; export const Text: StatelessComponent<any> = ({ text }) => (<p>{{ text }}</p>);
51. 26 3 TypeScript & Redux
52. Actions 27 export const ADD_TODO = "ADD_TODO"; export type AddTodoAction = { type: typeof ADD_TODO; text: string; }; export const addTodo = (text: string): AddTodoAction => ({ type: ADD_TODO, text });
53. Reducer 28 export const reducer = (state: AppState = [], action: ActionTypes) => { switch (action.type) { case ADD_TODO: { return [ ...state, {completed: false, text: action.text} ] } //... type ActionTypes = AddTodoAction | EditTodoAction | ...;
54. Reducer 28 export const reducer = (state: AppState = [], action: ActionTypes) => { switch (action.type) { case ADD_TODO: { return [ ...state, {completed: false, text: action.text} ] } //... type ActionTypes = AddTodoAction | EditTodoAction | ...; action has type AddTodoAction here
55. Reducer 28 export const reducer = (state: AppState = [], action: ActionTypes) => { switch (action.type) { case ADD_TODO: { return [ ...state, {completed: false, text: action.text} ] } //... type ActionTypes = AddTodoAction | EditTodoAction | ...; action has type AddTodoAction here export type AddTodoAction = { type: typeof ADD_TODO; text: string; };
56. React + Redux 29 Demo
57. 30 3 Conclusion
58. 31 TypeScript & React Feedback at compile time First class IDE support Better API (types) Easy refactoring up to 2x code missing types for some libs PropTypes + TypeScript somehow redundant No first class support
59. 32 Questions?
60. Thank you Daniel Mies @danielmies 33