More My Type: React applications in TypeScript

An overview of the benefits of using typed languages when working with React and React Native, with examples in TypeScript, including setup using Webpack and tsc, a comparison with standard propTypes and Flow, common caveats, and strategies for converting your existing applications.

Transcript

1. Making Software. Better. Simple solutions to big business problems. More My Type React Applications in TypeScript
2. Luís Rodrigues Software Engineer at Equal Experts lrodrigues@equalexperts.com
3. undefined is not a function
4. Types to the rescue
5. Types in React PropTypes vs Flow vs TypeScript
6. PropTypes Runtime validators • Built into React. • Typechecks at runtime... • ...but disable them in production because performance. • For React components only.
7. PropTypes Example import { Component, PropTypes } from 'react' class Hello extends Component { render() { return ( <h1>Hello, {this.props.name}</h1> ) } } Hello.propTypes = { name: PropTypes.string.isRequired }
8. Flow Type checker • Supports PropTypes. • Typechecks via utility. • Type annotations stripped on transpilation.
9. Flow Example import { Component } from 'react' type HelloProps = { name: string } class Hello extends Component<void, HelloProps, void> { render() { return ( <h1>Hello, {this.props.name}</h1> ) } }
10. TypeScript Programming language • Superset of ECMAScript 2015. • Compiles to JavaScript. • Typechecks at compile time.
11. TypeScript Example import { Component } from 'react' interface HelloProps { name: string } class Hello extends Component<HelloProps, void> { render() { return ( <h1>Hello, {this.props.name}</h1> ) } }
12. Let’s focus on TypeScript
13. All the ECMAScript x features you know and love • Classes • Modules • Arrow functions • Default parameters • Rest parameters • Destructuring • Generators • async/await • ⚠ Decorators
14. JSX is supported too, of course (as TSX)
15. Types • Basic: boolean, number, string, Array, tuples, enum, any • void, null, undefined • never • Union and intersection types • Nullable types • Interfaces • Generics type Product = { name: string price: number qty: number } type Expires = { sellBy: Date } type Perishable = Product & Expires
16. Classes • Encapsulation • Interfaces • Mixins interface Greeting { public say(): string } class Hello implements Greeting { constructor(private name: string) {} public say() { return `Hello, ${this.name}!` } }
17. Modules Third-party JavaScript modules aren’t typed. Now what? You can install typings for third-party modules via NPM or Yarn. $ npm install @types/react $ yarn add @types/react
18. Demo Time React in TypeScript
19. Class components
20. Functional components
21. Redux actions
22. Immutable Redux state
23. Building
24. Client Webpack awesome-typescript-loader • Adds compiler cache • Typechecks in parallel
25. Server tsc • Builds via tsc. • Use ts-node to execute TypeScript in Node environments without building.
26. No Babel Required
27. Migrating JS apps
28. Migrating existing JavaScript apps • JavaScript compiles as TypeScript without changes. • Ensure typings are provided by dependencies or Definitely Typed. • Semi-automated tools (ReSharper by JetBrains). • Turn on strict compiler settings to ensure full migration.
29. Recommendations
30. noImplicitAny Compiler option • When a value type can’t be inferred, TypeScript assigns it the any type. • Implicit any defeats the purpose of having a type checker.
31. strictNullChecks Compiler option • Disallowing null value assignment prevents an entire class of errors. • null and undefined can be explicitly allowed.
32. TSLint Workflow • Performs static code analysis. • Customizable. • Reasonable default rules.
33. Let type inference do its work Code • Don’t bother typing local variables unless you have to (e.g. let). • Always add types to function and method signatures instead.
34. Prefer function overloading over union types Code Overloading is more readable than type unions: function len(a: array | string): number { return a.length } function len(a: string): number function len(a: array): number { return a.length }
35. Pain points
36. Missing type definitions for third-party modules What to do • Roll your own type definitions. • Contribute back to Definitely Typed for karma. • Import modules with no type support.
37. Compilation time What to do • Incremental builds. • awesome-typescript-loader • Optimized watch mode for tests.
38. It’s still JavaScript coming out of the pipe • No typechecks at runtime. • No performance boost from static types.
39. Why bother with types?
40. Why bother with types? • Catch common errors like type invariance or null values at compilation time or on the IDE itself. • No need to write tests where types are asserted. • Function signatures act like documentation and help prevent errors when refactoring. • Sweet, sweet code autocompletion.
41. Your turn
42. Thank You Twitter @EqualExperts LinkedIn linkedin.com/company/equal-experts UNITED KINGDOM +44 203 603 7830 helloUK@equalexperts.com Equal Experts UK Ltd 30 Brock Street London NW1 3FG INDIA +91 20 6607 7763 helloIndia@equalexperts.com Equal Experts India Private Ltd Office No. 4-C Cerebrum IT Park No. B3 Kumar City, Kalyani Nagar Pune, 411006 Web www.equalexperts.com CANADA +1 403 775 4861 helloCanada@equalexperts.com Equal Experts Devices Inc 205 - 279 Midpark way S.E. T2X 1M2 Calgary, Alberta PORTUGAL +351 211 378 414 helloPortugal@equalexperts.com Equal Experts Portugal Avenida Dom João II, Nº35 Edificio Infante 11ºA 1990-083 Parque das Nações Lisboa – Portugal Thank You USA +1 866-943-9737 helloUSA@equalexperts.com Equal Experts Inc 1460 Broadway New York NY 10036