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
第2回 TypeScriptを使おう
Search
akatsuki1910
August 08, 2023
36
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
第2回 TypeScriptを使おう
akatsuki1910
August 08, 2023
More Decks by akatsuki1910
See All by akatsuki1910
機械の気持ちを考えてコードを書こう
akatsuki1910
0
16
サーバーを使って遊ぼう
akatsuki1910
0
23
お前、GCってまあ別に気にしなくていいだろって思いながらwebサイト作ってるだろ
akatsuki1910
0
19
業務を効率化させるためのAIツール3選(超実践編)
akatsuki1910
0
48
後輩に伝えたいこと
akatsuki1910
0
33
難解(かもしれない)言語
akatsuki1910
1
49
Reactのチュートリアルをしよう3
akatsuki1910
0
39
クソドメインを取ろう
akatsuki1910
0
74
Reactのチュートリアルをしよう2
akatsuki1910
0
34
Featured
See All Featured
ラッコキーワード サービス紹介資料
rakko
1
3.6M
Visualization
eitanlees
152
17k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
160
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.9k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
190
Heart Work Chapter 1 - Part 1
lfama
PRO
7
36k
A Soul's Torment
seathinner
6
2.9k
Chasing Engaging Ingredients in Design
codingconduct
0
220
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Transcript
第2回 TypeScriptを使おう ~これで定義系は全部終わり~ らり
配列の型って何 その配列がどういう値を持っているか
配列型 「型名[]」みたいな書き方をする 多次元配列も宣言できる https://typescriptbook.jp/reference/values-types-variables/array/type-annotation-of-array
配列型 「Array<型>」という書き方も出来る 内容は一緒だが、多次元配列をつくる時に記述量が多くなる https://typescriptbook.jp/reference/values-types-variables/array/type-annotation-of-array
タプル型 配列内の個数が決まっており、型が分かっている場合はタプル型を使用する これにより、値が入っていないなんてことを無くせる https://typescriptbook.jp/reference/values-types-variables/tuple
オブジェクト型 プロパティを指定したものを宣言する interfaceで宣言されることが多い プロパティ抜けや値入れ忘れを防げる
オブジェクト型 プリミティブ型にも、objectは存在する ただ、objectと{}は違うものなので注意が必要 プロパティを用意していれば気にする必要はない https://typescriptbook.jp/reference/values-types-variables/object/difference-among-object-and-object
Record Record<型,型>と書くことで、オブジェクトの型をスッキリ書くことができる
Record keyをunion型にすることによって、何かデフォルトのオブジェクトを生成する際とかに便 利
interfaceとtypeの特徴 interfaceとtypeは型を拡張することが出来 る typeの場合は& interfaceの場合はextends
interfaceとtypeの特徴 ただ、typeはプリミティブ型も拡張できる そのため、numberとstringのどちらも許容する型を生成しようと することもできる この場合はCはnever型(何も受け入れない存在しない型)になる interfaceの場合は拡張元に同じプロパティ名があるとエラーが でるため、never型は起こらない
interfaceとtypeの違い interfaceは再宣言しても怒られない typeは再宣言すると怒られる → 全部typeで統一した方がいいのでは?
interfaceとtypeの違い interfaceで出来ることはほぼ全てtypeでも出来る 逆にinterfaceではユニオン型やプリミティブ型の宣言が出来ない → 全部typeで統一した方がいいのでは?
interfaceとtypeの違い googleのスタイルガイドがinterfaceを使える時は使えって言ってる typeもinterfaceも同じなら、どちらかに統一したいという考えの元である ↓ typescriptチームのリーダーの言葉を引用をしている 正直に言うと、私の考えでは、モデル化できるものはすべてインターフェイスであるべき だということです。 表示/パフォーマンスに関して多くの問題がある場合、エイリアスを入 力するメリットはありません。 https://google.github.io/styleguide/tsguide.html#interfaces-vs-type-aliases
interfaceとtypeの違い typescriptの公式ドキュメントもinterfaceを使えるなら使えって言ってる typeを&で繋げた場合、never型が生まれる可能性があるため、拡張もinterfaceで行っ た方が安全である また、全てをtypeで宣言していると、ビルド時のパフォーマンスにも影響がでるため、 interfaceの方が好ましいとされている https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections https://ncjamieson.com/prefer-interfaces/
interfaceとtypeの違い(結論) クソデカい企業や公式がinterfaceを使えって言ってる その辺の記事ではなんとなく書きやすいから~でtypeに統一した方がいいとか書いてい るが、特に強い気持ちがない限り、統一しない方がいい気がする それでもinterfaceを使わないのであれば、issueで戦ってこの論争を終わらせてほしい
そもそも型のお話 型はビルドする前に用意しておく必要がある ↓ 静的型付け
ジェネリクスとは 同じような型を量産しないように、色んな型の形に対応したもの https://typescriptbook.jp/reference/generics
ジェネリクス 型の引数を使うことで、新たな型を生成することが出来る これにより、型の形を使いまわすことが出来る
ジェネリクス interfaceにも使うことが出来る 引数にはT,U,Vが使われることが多い
ジェネリクス デフォルト引数を用いることが出来る
Utility Types 組み込み型とも呼ばれる ジェネリクスを用いることにより、入れた型によって新しい型を返す関数が用意されてい る Recordもその内の1つ 数がそこそこある 重要そうなものを次回の説明で行う https://www.typescriptlang.org/docs/handbook/utility-types.html
課題 課題 Userオブジェクトの型をジェネリクスを用いて定義して、オブジェクトの型をちゃんとつけ てください その後、下の配列にも型をつけてください