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
21
第2回 TypeScriptを使おう
akatsuki1910
August 08, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
3
難解(かもしれない)言語
akatsuki1910
1
29
Reactのチュートリアルをしよう3
akatsuki1910
0
14
クソドメインを取ろう
akatsuki1910
0
30
Reactのチュートリアルをしよう2
akatsuki1910
0
14
HTMLとCSSとコンポーネント
akatsuki1910
0
18
Reactのチュートリアルをしよう
akatsuki1910
0
16
そのコレクション合ってる?
akatsuki1910
0
21
第3回 TypeScriptを使おう
akatsuki1910
0
10
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Practical Orchestrator
shlominoach
186
10k
GitHub's CSS Performance
jonrohan
1030
460k
A better future with KSS
kneath
238
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Producing Creativity
orderedlist
PRO
343
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The Invisible Side of Design
smashingmag
299
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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オブジェクトの型をジェネリクスを用いて定義して、オブジェクトの型をちゃんとつけ てください その後、下の配列にも型をつけてください