Hijrah ke TypeScript

Hijrah ke TypeScript

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

December 11, 2019
Tweet

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