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
テスト駆動Kaggle
isax1015
1
870
20250708_JAWS_opscdk
takuyay0ne
2
150
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
14k
MCPで実現できる、Webサービス利用体験について
syumai
5
1.7k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
580
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
690
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
11
7k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
260
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Writing Fast Ruby
sferik
628
62k
Code Reviewing Like a Champion
maltzj
524
40k
4 Signs Your Business is Dying
shpigford
184
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Practical Orchestrator
shlominoach
189
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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