Hijrah ke TypeScript

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