Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hijrah ke TypeScript
Search
Ariya Hidayat
December 11, 2019
Programming
0
460
Hijrah ke TypeScript
Ariya Hidayat
December 11, 2019
Tweet
Share
More Decks by Ariya Hidayat
See All by Ariya Hidayat
RAG for Small LLM
ariya
0
150
Vector Search and LLM
ariya
0
140
Making a Bigger Impact with Open Source
ariya
0
87
Practical Testing of Firebase Projects
ariya
0
110
Practical CI/CD for React Native
ariya
0
120
Unggul dan Berdikari dengan Open-source
ariya
0
280
Practical CI/CD for React Native
ariya
1
460
Integrasi Berkesinambungan untuk React Native
ariya
1
400
Fungsional dengan JavaScript
ariya
0
310
Other Decks in Programming
See All in Programming
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
190
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
Doma で目指す ORM 最適解
nakamura_to
1
160
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
2
220
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
110
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
660
Perlで痩せる
yuukis
1
660
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Six Lessons from altMBA
skipperchong
28
3.8k
Adopting Sorbet at Scale
ufuk
76
9.4k
Designing for Performance
lara
608
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Building an army of robots
kneath
306
45k
A better future with KSS
kneath
239
17k
Optimizing for Happiness
mojombo
378
70k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Unsuck your backbone
ammeep
671
58k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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