Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hijrah ke TypeScript

Hijrah ke TypeScript

Ariya Hidayat

December 11, 2019
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. Hijrah ke TypeScript
    https://unsplash.com/photos/Fq--9iqymkI

    View Slide

  2. With great power,
    comes great responsibility
    -- Gundala

    View Slide

  3. Konon, di jaman
    purbakala…

    View Slide

  4. View Slide

  5. > biodata = { nama: 'Budi', umur: 34 }
    { nama: 'Budi', umur: 34 }
    > console.log(biodata.usia)
    undefined

    View Slide

  6. > biodata = { nama: 'Budi', umur: 34 }
    { nama: 'Budi', umur: 34 }
    > console.log(biodata.umur)
    34

    View Slide

  7. export class LoginForm extends Component {
    static propTypes = {
    submitAction: PropTypes.func.require,
    }
    }

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Jenazah engineer bikin rusuh
    karena dulu nggak pakai TypeScript

    View Slide

  13. Transisi Gradual

    View Slide

  14. {
    "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "skipLibCheck": true
    "noEmitOnError": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "esModuleInterop": true
    },
    "include": ["**/*.js"],
    "exclude": ["thirdparty/**.js"]
    }
    tsconfig.json

    View Slide

  15. > npm install –save typescript

    View Slide

  16. import React, { Component } from 'react';
    Could not find a declaration file for module ‘react’

    View Slide

  17. > npm install –save @types/react
    > npm install –save @types/react-native

    View Slide

  18. Property 'require' does not exist on type
    'Requireable<(...args: any[]) => any>’.
    ts(2339)

    View Slide

  19. View Slide

  20. diff --git a/package.json b/package.json
    index c9a3d0c..c0dfca4 100644
    --- a/package.json
    +++ b/package.json
    @@ -4,6 +4,7 @@
    "description": "",
    "main": "src/index.js",
    "scripts": {
    + "typecheck": "tsc -p src"
    },
    "author": ""

    View Slide

  21. > npm run typecheck
    src/LoginForm.js:16:38 - error TS2339: Property 'require' does not
    exist on type 'Requireable<(...args: any[]) => any>’.
    16 submitAction: PropTypes.func.require,
    ~~~~~~~
    CI/CD

    View Slide

  22. View Slide

  23. function todayIsNotWeekend() {
    const day = moment().utcOffset(7).isoWeekday();
    const SATURDAY = 6;
    const SUNDAY = 0;
    return (day !== SATURDAY) || (day !== SUNDAY);
    }

    View Slide

  24. > npm run typecheck
    src/Order.js:7:35 - error TS2367: This condition will always return
    'true' since the types '6' and '0' have no overlap.
    7 return (day !== SATURDAY) || (day !== SUNDAY);
    ~~~~~~~~~~~~~~

    View Slide

  25. function todayIsNotWeekend() {
    const day = moment().utcOffset(7).isoWeekday();
    const SATURDAY = 6;
    const SUNDAY = 0;
    return (day !== SATURDAY) && (day !== SUNDAY);
    }

    View Slide

  26. function todayIsWeekend() {
    const day = moment().utcOffset(7).isoWeekday();
    const SATURDAY = 6;
    const SUNDAY = 0;
    return (day === SATURDAY) || (day === SUNDAY);
    }
    export function todayIsNotWeekend() {
    return !todayIsWeekend();
    }

    View Slide

  27. render() {
    return (
    (!unreadCount > 0) ? :
    )
    }

    View Slide

  28. > npm run typecheck
    src/Inbox.js:12:14 - error TS2365: Operator '>' cannot be applied to
    types 'boolean' and 'number'.
    12 (!unreadCount > 0) ? :
    ~~~~~~~~~~~~~~~~

    View Slide

  29. !unreadCount > 0
    (!unreadCount) > 0
    Boolean Number

    View Slide

  30. render() {
    return (
    (unreadCount == 0) ? :
    )
    }

    View Slide

  31. validate() {
    let {email} = this.state;
    if (isValidEmail(this.email)) {
    this.setState({message: ''});
    } else {
    this.setState({message: INVALID_EMAIL});
    }
    }

    View Slide

  32. > npm run typecheck
    src/LoginForm.js:15:29 - error TS2339: Property 'email' does not
    exist on type 'LoginForm'.
    15 if (isValidEmail(this.email)) {
    ~~~~~

    View Slide

  33. validate() {
    let {email} = this.state;
    if (isValidEmail(email)) {
    this.setState({message: ''});
    } else {
    this.setState({message: INVALID_EMAIL});
    }
    }

    View Slide

  34. Musuhnya kebanyakan nih

    View Slide

  35. > npm install –save tsc-silent

    View Slide

  36. diff --git a/package.json b/package.json
    index be761d1..58a2aca 100644
    --- a/package.json
    +++ b/package.json
    @@ -4,7 +4,7 @@
    "description": "",
    "main": "src/index.js",
    "scripts": {
    - "typecheck": "tsc -p src"
    + "typecheck": "tsc-silent -p src/tsconfig.json
    --suppressConfig src/tsc-silent.config.js"
    },
    "author": "",
    "license": "ISC",

    View Slide

  37. module.exports = {
    suppress: [
    {
    pathRegExp: '/.*.js$',
    codes: [
    2339,
    2367
    ]
    }
    ]
    }
    tsc-silent.config.js

    View Slide

  38. > npm run typecheck
    Visible errors: 0, suppressed errors: 2

    View Slide

  39. View Slide

  40. View Slide

  41. Engineering
    Excellence

    View Slide

  42. Rekayasa
    Paripurna

    View Slide

  43. Some artworks are from http://openclipart.org.
    @ariya114

    View Slide