Hijrah ke TypeScript

Transcript

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

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

3. Konon, di jaman purbakala…

4. None

5. > biodata = { nama: 'Budi', umur: 34 } {

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

6. > biodata = { nama: 'Budi', umur: 34 } {

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

7. export class LoginForm extends Component { static propTypes = {

   submitAction: PropTypes.func.require, } }
8. None
9. None
10. None
11. None

12. Jenazah engineer bikin rusuh karena dulu nggak pakai TypeScript

13. Transisi Gradual

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

15. > npm install –save typescript

16. import React, { Component } from 'react'; Could not find

    a declaration file for module ‘react’

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

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

    any>’. ts(2339)
19. None

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": ""

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
22. None

23. function todayIsNotWeekend() { const day = moment().utcOffset(7).isoWeekday(); const SATURDAY =

    6; const SUNDAY = 0; return (day !== SATURDAY) || (day !== SUNDAY); }

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); ~~~~~~~~~~~~~~

25. function todayIsNotWeekend() { const day = moment().utcOffset(7).isoWeekday(); const SATURDAY =

    6; const SUNDAY = 0; return (day !== SATURDAY) && (day !== SUNDAY); }

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(); }

27. render() { return ( (!unreadCount > 0) ? <ClearIcon/> :

    <BellIcon/> ) }

28. > npm run typecheck src/Inbox.js:12:14 - error TS2365: Operator '>'

    cannot be applied to types 'boolean' and 'number'. 12 (!unreadCount > 0) ? <BellIcon/> : <ClearIcon/> ~~~~~~~~~~~~~~~~

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

30. render() { return ( (unreadCount == 0) ? <ClearIcon/> :

    <BellIcon/> ) }

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

    ''}); } else { this.setState({message: INVALID_EMAIL}); } }

32. > npm run typecheck src/LoginForm.js:15:29 - error TS2339: Property 'email'

    does not exist on type 'LoginForm'. 15 if (isValidEmail(this.email)) { ~~~~~

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

    ''}); } else { this.setState({message: INVALID_EMAIL}); } }

34. Musuhnya kebanyakan nih

35. > npm install –save tsc-silent

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",

37. module.exports = { suppress: [ { pathRegExp: '/.*.js$', codes: [

    2339, 2367 ] } ] } tsc-silent.config.js

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

39. None
40. None

41. Engineering Excellence

42. Rekayasa Paripurna

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