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
TypeScriptハンズオン
Search
Sor4chi
August 09, 2023
0
48
TypeScriptハンズオン
Sor4chi
August 09, 2023
Tweet
Share
More Decks by Sor4chi
See All by Sor4chi
Docker入門
sor4chi
0
49
Reactを極めよう
sor4chi
0
93
JavaScriptハンズオン
sor4chi
0
81
DI/DIPを体験してみよう
sor4chi
0
380
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Code Review Best Practice
trishagee
62
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Navigating Team Friction
lara
183
14k
Docker and Python
trallard
40
3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Agile that works and the tools we love
rasmusluckow
327
21k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Infographics Made Easy
chrislema
239
18k
Rails Girls Zürich Keynote
gr2m
93
13k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Transcript
TypeScriptハンズオン Github: @sor4chi 𝕏 Twitter: @monica18_pr
今日の目標 TypeScriptのニーズやメリットを理解する TypeScriptの仕組みを理解する TypeScriptを使えるようになる
JSの不満
JSの確認 JavaScriptは動的型付け言語 旧バージョンからの互換性を持ったアップデートを繰り返して いるせいで、負債と言わんばかりの難解な挙動がある
不満その1: 型がない 型がないので、変数や関数の型を把握するのが難しい
例えばこんなやつ Q: a のデータ型 is 何 string ? number ?
こんなやつも Q: add の引数の型 is 何 A: number ? null
?
不満その2: 暗黙的な型変換 色々なデータ型の演算が暗黙的なキャストで行われる
例えばこんなやつ Q: a の値 is 何 A: 20
None
文字列の足し算は文字列の連結になるが、引き算は数値の引き 算になる そのため となる
不満その3: HTML上の値の取扱い
None
Q: resultの値 is 何 A: 11
None
input.value は文字列で返ってくるので、 value + 1 は 文字列の連結になる
その不満、 TypeScript で解決できますよ
TypeScript知識
TypeScriptとは TypeScriptはJavaScriptの 拡張言語 であり、JavaScriptにコ ンパイルタイムの型チェックを追加したもの(静的型付け言 語)。 ただし、コンパイル時に型チェックを行うだけで、実行時には 型チェックは行わない。
TypeScriptの目的 JSの無秩序で自由な世界を、型チェックを追加することで秩 序づけること。(型安全) プログラミングをする行為をTypeHintにより効率化するこ と。(型補完)
TypeScriptの本質 TypeScriptはJavaScriptに型チェック用の構文を導入したよ うなもの。 TypeScriptは トランスパイラ と呼ばれるコンパイラによって JavaScriptに変換される。
CやC++などが機械語でへコンパイルされるのに対し、 TypeScriptはJavaScriptに トランスパイル される。 高級言語 to 高級言語なのでトランス + コンパイル =
トランス パイルだと思う
例えば... は
に変換される
本当に 型情報を追加しただけ である。 ※ 本当は拡張構文があったりするので純粋な変換をしているわ けではないが...
TypeScriptのエディタサポート
ビルド時に型チェックを行うのでいちいちトランスパイルを実 行するのは面倒。 そこで、エディタによる型チェックを行うことで、トランスパ イルを実行しなくてもプログラミングしているタイミングでそ のまま型チェックを行うことができる。
キャスト時の型推論
再代入時の型チェッ ク
メソッドの型補完
TypeScriptの型は堅牢だけどカジュアルに書けるため、とても 書き心地が良い。 自分(筆者)はTypeScriptじゃないと書きたくないレベル
TypeScriptのエコシステム
TypeScriptの導入
1. TypeScriptプロジェクトの作成 node.jsはJSのファイルで提供されているため、TypeScriptで 書く場合は型定義をインストールする必要がある。
2. TypeScriptの設定ファイルを作成 JSの勉強会で「ブラウザ向けのJS」と「サーバー向けのJS」 の違いを説明したが、TSでもそれをサポートするために設定フ ァイルを作成する必要がある。 (他にも色々な設定項目があるが)
設定ファイルは tsconfig.json というファイル名で作成す る。 https://typescriptbook.jp/reference/tsconfig/tsconfig.jso n-settings#バックエンドの場合 にサーバー向けの設定ファイルがあるので、それをコピペ 「2020年版フルスクラッチから作るなら」の「バックエンド の場合」 (設定項目が結構あって、自分でも把握しきれてない)
バックエンドのtsconfig.jsonを使った場合、 document や window などのブラウザ環境のグローバル変数が存在しない ため、エラーになる。
フロントエンドのtsconfig.jsonを使った場合、ちゃんと document や window などのブラウザ環境のグローバル変 数が存在し、補完されている。
3. package.jsonにスクリプトを追加 既存の"scripts"の"test"は削除して、"build"と"start"を追加 する。
4. TypeScriptのコンパイル 試しに src/index.ts を作成して と書いてみる。
dist ディレクトリが作成され、その中にコンパイルされた JSファイルが作成される。
dist/index.js を開いてみると このようにトランスパイルされていればOK
5. 実行 1 と表示されればOK
TypeScriptの文法
基本の型 number string boolean null (値が null -> ない) undefined
(値が undefined -> 未定義)
他にも色々あるが、基本的にはこれだけで十分
型注釈 変数や関数の引数に型をつけることができる それ以外の型の変数や値を代入しようとするとエラーになる
配列
インターフェース
オブジェクトやclassの型などプロパティを持つ複合的な型を 定義するときに使う
Type Alias 型を変数として持つイメージ インターフェースと同じように使える、こっちの方が表現力が あって万能だが、オブジェクトとクラスをinterface、それ以外
合併型(Union Types) その変数が複数の型のどれかを持つことを表現する
応用:interfaceと合わせて使うと便利
こういう感じで、 role の値によって hoge の有無を変える ようにする
roleがadminかどうかが不確定なので、hogeがあるかどうかも 不確定で型エラーになる
こうすると、roleがadminの場合はhogeが必ずあることが保証 されるので、型エラーにならない それ以外の時は「値が存在しない」ことを表す null か「値 が未定義」ことを表す undefined を返すとよい
交差型(Intersection Types) 複数の型を結合する
リテラル型 値を型として使える!(これが便利)
オプショナル型 ? をつけると、そのプロパティがあってもなくてもよくなる
関数にも使える 「なくても良い」型なので実際は number | undefined と いう型になる
実践編
ReactとTypeScript
Reactのコンポーネントは関数として定義することができる 例えばpropsを受け取るコンポーネントは以下のように書ける
これをTypeScriptで書くと以下のようになる
Propsの実体は関数の引数の型なのでこのように書く
JSのReactでできたTodoアプリを TypeScriptに移植する
実演/演習タイム 試しに、JSのReactでできたTodoアプリをTypeScriptに移植 してみる
https://github.com/saitamau-maximum/react-todo-js このリポジトリをcloneしてそのフォルダに入り、 npm install して npm start すると動く
ご清聴ありがとうございました 質問などあれば気軽にどうぞ!