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…
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, } }
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)
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
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
41. Engineering Excellence
42. Rekayasa Paripurna
43. Some artworks are from http://openclipart.org. @ariya114