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
570
PHPStanをチームに内緒で開発に取り入れる方法
natsukiengr
1
1.1k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Applications with DynamoDB
mza
95
6.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Adaptive Systems
keathley
43
2.7k
GitHub's CSS Performance
jonrohan
1031
460k
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ファイルに書いても型注釈として解釈されないので、書き直す必要 がある その他使いたいエコシステムが対応してないことも
おわり