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
2
難解(かもしれない)言語
akatsuki1910
1
28
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
27
Reactのチュートリアルをしよう2
akatsuki1910
0
13
HTMLとCSSとコンポーネント
akatsuki1910
0
17
Reactのチュートリアルをしよう
akatsuki1910
0
16
そのコレクション合ってる?
akatsuki1910
0
20
第3回 TypeScriptを使おう
akatsuki1910
0
10
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
Building Adaptive Systems
keathley
38
2.3k
A designer walks into a library…
pauljervisheath
204
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Facilitating Awesome Meetings
lara
50
6.1k
Docker and Python
trallard
40
3.1k
Designing Experiences People Love
moore
138
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Producing Creativity
orderedlist
PRO
341
39k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
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オブジェクトの型をジェネリクスを用いて定義して、オブジェクトの型をちゃんとつけ てください その後、下の配列にも型をつけてください