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
390
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
110
Vector Search and LLM
ariya
0
120
Making a Bigger Impact with Open Source
ariya
0
75
Practical Testing of Firebase Projects
ariya
0
83
Practical CI/CD for React Native
ariya
0
98
Unggul dan Berdikari dengan Open-source
ariya
0
250
Practical CI/CD for React Native
ariya
1
420
Integrasi Berkesinambungan untuk React Native
ariya
1
360
Fungsional dengan JavaScript
ariya
0
260
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
130
Golang と Erlang
taiyow
8
1.8k
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
670
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
3
980
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
1.6k
Vue.js学習の振り返り
hiro_xre
2
130
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
200
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.2k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
2
320
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
570
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
2
1.5k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
280
The Cult of Friendly URLs
andyhume
78
6k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Typedesign – Prime Four
hannesfritz
39
2.4k
Building an army of robots
kneath
302
42k
Visualization
eitanlees
143
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
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