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
0
19
第2回 TypeScriptを使おう
akatsuki1910
August 08, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
2
難解(かもしれない)言語
akatsuki1910
1
27
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
26
Reactのチュートリアルをしよう2
akatsuki1910
0
13
HTMLとCSSとコンポーネント
akatsuki1910
0
17
Reactのチュートリアルをしよう
akatsuki1910
0
15
そのコレクション合ってる?
akatsuki1910
0
17
第3回 TypeScriptを使おう
akatsuki1910
0
10
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Music & Morning Musume
bryan
46
6.1k
Building an army of robots
kneath
302
42k
Code Review Best Practice
trishagee
64
17k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
800
GitHub's CSS Performance
jonrohan
1030
460k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Building Adaptive Systems
keathley
38
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
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オブジェクトの型をジェネリクスを用いて定義して、オブジェクトの型をちゃんとつけ てください その後、下の配列にも型をつけてください