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
29
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
29
Reactのチュートリアルをしよう2
akatsuki1910
0
14
HTMLとCSSとコンポーネント
akatsuki1910
0
17
Reactのチュートリアルをしよう
akatsuki1910
0
16
そのコレクション合ってる?
akatsuki1910
0
20
第3回 TypeScriptを使おう
akatsuki1910
0
10
Featured
See All Featured
A better future with KSS
kneath
238
17k
Docker and Python
trallard
42
3.1k
Fireside Chat
paigeccino
34
3.1k
Writing Fast Ruby
sferik
628
61k
It's Worth the Effort
3n
183
28k
Documentation Writing (for coders)
carmenintech
66
4.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
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オブジェクトの型をジェネリクスを用いて定義して、オブジェクトの型をちゃんとつけ てください その後、下の配列にも型をつけてください