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
jsが型安全になったっていい
Search
Natsuki
November 15, 2024
0
140
jsが型安全になったっていい
TypeScript Meet Up #4 - TSKaigi Kansai 前夜
https://kobets.connpass.com/event/328535/
Natsuki
November 15, 2024
Tweet
Share
More Decks by Natsuki
See All by Natsuki
Reactのいいなと思ったところ
natsukiengr
1
600
PHPStanをチームに内緒で開発に取り入れる方法
natsukiengr
1
1.2k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Agile that works and the tools we love
rasmusluckow
330
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Fireside Chat
paigeccino
39
3.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
RailsConf 2023
tenderlove
30
1.2k
Six Lessons from altMBA
skipperchong
28
4k
Why Our Code Smells
bkeepers
PRO
339
57k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Transcript
jsが型安全になったっていい Natsuki
自己紹介 Natsuki 普段はLaravel + Vueで開発
自己紹介 Natsuki 普段はLaravel + Vueで開発 Vue Fes Japan 2024
JSDocで型注釈 JSDocとは JavaDocやPHPDocのようなコメント内の注釈から ドキュメントを生成するツール または、そのコメント自体 https://jsdoc.app/
JSDocで型注釈 JSDocとは JavaDocやPHPDocのようなコメント内の注釈から ドキュメントを生成するツール または、そのコメント自体 https://jsdoc.app/ /** @type {number} */
const = 0; i
JSDocで型注釈 JSDocとは JavaDocやPHPDocのようなコメント内の注釈から ドキュメントを生成するツール または、そのコメント自体 https://jsdoc.app/ @type などのタグで型情報を書くことができ、tscもこの型情報を参照して型チェ ックを行ってくれる /**
@type {number} */ const = 0; i ` `
JSDocで型注釈 JSDocとは JavaDocやPHPDocのようなコメント内の注釈から ドキュメントを生成するツール または、そのコメント自体 https://jsdoc.app/ @type などのタグで型情報を書くことができ、tscもこの型情報を参照して型チェ ックを行ってくれる これとtsconfig.jsonとtscで型チェックを行うことができる
/** @type {number} */ const = 0; i ` `
なぜtsファイルじゃないのか
なぜtsファイルじゃないのか 既存プロダクトをtsに移行したいけど、テストコードも無いしエン バグが怖い トランスパイルの時間をゼロにしたい とかとか
JSDoc(+tsc)でできること 1. 型注釈の記述 // index.ts function hello(name: string) { //
... } const LIMIT = { min: 0, max: 1000, } as const
JSDoc(+tsc)でできること 1. 型注釈の記述 // index.ts function hello(name: string) { //
... } const LIMIT = { min: 0, max: 1000, } as const // index.js /** * @param {string} name */ function hello(name) { // ... } const LIMIT = /** @type {const} */ { min: 0, max: 100, }
JSDoc(+tsc)でできること 2. 型の定義 // index.ts interface User<T> { name: string
age: number customData: T }
JSDoc(+tsc)でできること 2. 型の定義 // index.js /** * @extends T *
@typedef {{ * name: string * age: number * customData: T * }} User */ // index.ts interface User<T> { name: string age: number customData: T }
JSDoc(+tsc)でできること 3. 型のインポート・エクスポート // index.js /** * @import { User
} './index.ts' */
JSDocでできないこと 1. 条件型(Conditional Types)
JSDocでできないこと 1. 条件型(Conditional Types) type IsNumber<T> = T extends number
? true : false; type T1 = IsNumber<10>;
JSDocでできないこと 1. 条件型(Conditional Types) 型定義だけ、`.d.ts`に書けば解決 type IsNumber<T> = T extends
number ? true : false; type T1 = IsNumber<10>;
JSDocでできないこと 2. TypeScript独自の実装 Enumとかdeclareとか
JSDocでできないこと 2. TypeScript独自の実装 Enumとかdeclareとか
JSDocでできないこと 2. TypeScript独自の実装 Enumとかdeclareとか 一応`@enum`はあるが、ただの連想配列なので、TSのように値からアクセスできない
JSDocでできないこと 3. tsファイルでの型補完 JSDocの型はtsファイル内では無視される
JSDocでできないこと 3. tsファイルでの型補完 JSDocの型はtsファイル内では無視される /** * @param {string} name */
function (name) { // ... } hello Parameter 'name' implicitly has an 'any' type.
JSDocを使う上での注意
JSDocを使う上での注意 「tsファイルよりJSDocの方がオススメ!」というわけではない 単純に書く文字数が増えるので、通常のWebアプリケーションの開発にはオス スメしない
JSDocを使う上での注意 「tsファイルよりJSDocの方がオススメ!」というわけではない 単純に書く文字数が増えるので、通常のWebアプリケーションの開発にはオス スメしない tsファイルへの移行は楽じゃない JSDocはtsファイルに書いても型注釈として解釈されないので、書き直す必要 がある
JSDocを使う上での注意 「tsファイルよりJSDocの方がオススメ!」というわけではない 単純に書く文字数が増えるので、通常のWebアプリケーションの開発にはオス スメしない tsファイルへの移行は楽じゃない JSDocはtsファイルに書いても型注釈として解釈されないので、書き直す必要 がある その他使いたいエコシステムが対応してないことも
おわり