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
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Ace a Technical Interview
jacobian
279
23k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fireside Chat
paigeccino
39
3.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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ファイルに書いても型注釈として解釈されないので、書き直す必要 がある その他使いたいエコシステムが対応してないことも
おわり