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
470
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
160
Vector Search and LLM
ariya
0
140
Making a Bigger Impact with Open Source
ariya
0
88
Practical Testing of Firebase Projects
ariya
0
110
Practical CI/CD for React Native
ariya
0
130
Unggul dan Berdikari dengan Open-source
ariya
0
290
Practical CI/CD for React Native
ariya
1
470
Integrasi Berkesinambungan untuk React Native
ariya
1
410
Fungsional dengan JavaScript
ariya
0
320
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
NPOでのDevinの活用
codeforeveryone
0
900
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
11
1.3k
PicoRuby on Rails
makicamel
2
140
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Rails Girls Zürich Keynote
gr2m
95
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Why Our Code Smells
bkeepers
PRO
337
57k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing for humans not robots
tammielis
253
25k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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