Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Hijrah ke TypeScript
Ariya Hidayat
December 11, 2019
Programming
0
240
Hijrah ke TypeScript
Ariya Hidayat
December 11, 2019
Tweet
Share
More Decks by Ariya Hidayat
See All by Ariya Hidayat
Making a Bigger Impact with Open Source
ariya
0
44
Practical Testing of Firebase Projects
ariya
0
40
Practical CI/CD for React Native
ariya
0
64
Unggul dan Berdikari dengan Open-source
ariya
0
180
Practical CI/CD for React Native
ariya
1
350
Integrasi Berkesinambungan untuk React Native
ariya
1
290
Fungsional dengan JavaScript
ariya
0
210
Serverless Architecture
ariya
0
290
Squeezing Images
ariya
2
350
Other Decks in Programming
See All in Programming
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
150
Software Architecture
hschwentner
3
1.1k
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
270
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
520
Cloudflare Workersと状態管理
chimame
3
510
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
低レイヤーから始める GUI
fadis
18
9.5k
AWSとCPUのムフフな関係
cmdemura
0
480
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
140
良質な技術記事を量産する秘訣 / #MeetsPro
jnchito
16
4.9k
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
120
Featured
See All Featured
Done Done
chrislema
178
15k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
The Pragmatic Product Professional
lauravandoore
21
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Reflections from 52 weeks, 52 projects
jeffersonlam
339
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Code Review Best Practice
trishagee
50
11k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Transcript
Hijrah ke TypeScript https://unsplash.com/photos/Fq--9iqymkI
With great power, comes great responsibility -- Gundala
Konon, di jaman purbakala…
None
> biodata = { nama: 'Budi', umur: 34 } {
nama: 'Budi', umur: 34 } > console.log(biodata.usia) undefined
> biodata = { nama: 'Budi', umur: 34 } {
nama: 'Budi', umur: 34 } > console.log(biodata.umur) 34
export class LoginForm extends Component { static propTypes = {
submitAction: PropTypes.func.require, } }
None
None
None
None
Jenazah engineer bikin rusuh karena dulu nggak pakai TypeScript
Transisi Gradual
{ "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
> npm install –save typescript
import React, { Component } from 'react'; Could not find
a declaration file for module ‘react’
> npm install –save @types/react > npm install –save @types/react-native
Property 'require' does not exist on type 'Requireable<(...args: any[]) =>
any>’. ts(2339)
None
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": ""
> 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
None
function todayIsNotWeekend() { const day = moment().utcOffset(7).isoWeekday(); const SATURDAY =
6; const SUNDAY = 0; return (day !== SATURDAY) || (day !== SUNDAY); }
> 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); ~~~~~~~~~~~~~~
function todayIsNotWeekend() { const day = moment().utcOffset(7).isoWeekday(); const SATURDAY =
6; const SUNDAY = 0; return (day !== SATURDAY) && (day !== SUNDAY); }
function todayIsWeekend() { const day = moment().utcOffset(7).isoWeekday(); const SATURDAY =
6; const SUNDAY = 0; return (day === SATURDAY) || (day === SUNDAY); } export function todayIsNotWeekend() { return !todayIsWeekend(); }
render() { return ( (!unreadCount > 0) ? <ClearIcon/> :
<BellIcon/> ) }
> npm run typecheck src/Inbox.js:12:14 - error TS2365: Operator '>'
cannot be applied to types 'boolean' and 'number'. 12 (!unreadCount > 0) ? <BellIcon/> : <ClearIcon/> ~~~~~~~~~~~~~~~~
!unreadCount > 0 (!unreadCount) > 0 Boolean Number
render() { return ( (unreadCount == 0) ? <ClearIcon/> :
<BellIcon/> ) }
validate() { let {email} = this.state; if (isValidEmail(this.email)) { this.setState({message:
''}); } else { this.setState({message: INVALID_EMAIL}); } }
> npm run typecheck src/LoginForm.js:15:29 - error TS2339: Property 'email'
does not exist on type 'LoginForm'. 15 if (isValidEmail(this.email)) { ~~~~~
validate() { let {email} = this.state; if (isValidEmail(email)) { this.setState({message:
''}); } else { this.setState({message: INVALID_EMAIL}); } }
Musuhnya kebanyakan nih
> npm install –save tsc-silent
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",
module.exports = { suppress: [ { pathRegExp: '/.*.js$', codes: [
2339, 2367 ] } ] } tsc-silent.config.js
> npm run typecheck Visible errors: 0, suppressed errors: 2
None
None
Engineering Excellence
Rekayasa Paripurna
Some artworks are from http://openclipart.org. @ariya114