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
第1回 TypeScriptを使おう
Search
akatsuki1910
July 25, 2023
0
15
第1回 TypeScriptを使おう
akatsuki1910
July 25, 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
Designing the Hi-DPI Web
ddemaree
280
34k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Bash Introduction
62gerente
608
210k
Building Applications with DynamoDB
mza
90
6.1k
Thoughts on Productivity
jonyablonski
67
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Designing Experiences People Love
moore
138
23k
The Invisible Side of Design
smashingmag
297
50k
Transcript
第1回 TypeScriptを使おう ~雰囲気で使うなら使うな~ らり
対象者 • JavaScriptはある程度知っている人 • 未だにanyを使ってしまう人 • TypeScriptって使っとけばいいんでしょって思ってる人 • そもそも型を詳しく知らない人 •
型駆動開発がしたい人
お詫び • 自分もTypeScriptを完全理解してるわけじゃないので、分からない範囲もあります • 型をもりもり書いて~とかはしません • 型パズルも難しいのはしません • あくまで基礎勉強会なので、基礎を固めることを目標にしてます
レベル感 ↓これの型の説明 https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a ↓これの★2ぐらいの問題 https://qiita.com/uhyo/items/e4f54ef3b87afdd65546 これが余裕の方は全然見なくても問題無いと思います
TypeScriptってなぁに TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープン ソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静 的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセット(既存のものを 全て含んだ上でより機能が拡張されている上位互換となるモノ)となっている。 https://ja.wikipedia.org/wiki/TypeScript
TypeScriptってなぁに 詳しい話は以下の公式サイトをご覧ください https://www.typescriptlang.org/
型ってなぁに データ型(データがた、Data type)とは、コンピュータプログラミングや計算機科学にお いて、属性を持つデータを分類し、その扱われ方をコンパイラやインタープリタに知らせ るプログラム。単に型(かた、Type)とも言われる。 多くのプログラミング言語は、整数型・浮動小数点型・ブール型・文字型といった基本 データ型を備えている。計算対象にされるデータは、しばしば値(value)と言われる。 データ型は式内の値を制約して、関数への適用可能性や変数への代入可能性を定義 する。データ型は、値の集合の概念と近似している。 https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E5%9E%8B
型ってなぁに (簡単な説明) データ型とはデータの種類のことです。
TypeScriptの利点 • 型を事前に宣言するため、実行エラーを未然に防げる ◦ 数値と文字を間違えて扱う等 • 型を付けることにより、動作が速くなる • コードを読むのが楽になる ◦
型によってどういう値が返ってくるかが分かる • エディタによるサジェストの恩恵が得れる
TypeScriptの欠点 • 型を理解していないと、嘘を加えたJavaScriptになる • 型の仕様がちょっと独特なところがある • コンパイルに時間がかかる • 実行エラーを100%防げる訳ではない •
コードが長くなる ◦ 型宣言をするため • 型の付け方が難しい時がある ◦ どこまでガチガチにするかなど
雰囲気でTypeScriptを使うことによる弊害 • 型が間違っているので、それを扱うコードも間違っていく • 上記により、エディタからの恩恵が薄い • コンパイルに時間がかかる • ただコードが長くなるだけ •
TypeScript用にライブラリを入れることになるため、メンテが大変 → TypeScriptは導入するだけで良いというものではない → ちゃんと理解せずに使うのなら導入しない方が良い
「TypeScriptを使おう」シリーズの最終目標 • 型で嘘をつかないようにする ◦ 共同開発の基本 • めっちゃ初歩の型の付け方や仕様を知る ◦ 応用的な型を作りやすくなるため、型パズルも出来るようになる •
出来るだけTypeScriptの恩恵を得れるようにする ◦ エディタのサジェストも受けることができ、うれしい • anyは絶対に使わない ◦ 型無しのJavaScriptを書くならTypeScriptを入れるな ◦ anyの存在意義の話は長いのでしません • 型駆動開発が出来るようになる ◦ 設計が考えやすくなる
やってはいけないこと • 型について考えすぎて開発の手が止まること ◦ OPはスピードも求められるので、ある程度妥協は必要な場面がある • 型のせいでコードが見にくくなること ◦ そんなことになるのであれば入れない方がいい 本来はJavaScriptが書ければ問題ないので
あくまで型を導入することで開発しやすくなるだけってことを忘れずに
TypeScriptを試すところ https://www.typescriptlang.org/play
型エイリアス 複数の場所で使いたい型を宣言するための構文
typeof演算子 値の型を文字列で返してくれる演算子 if文などに組み込むことができ、◦◦の型の時~みたいな処理を書くことが可能
プリミティブ型 • string • number • boolean • symbol •
bigint • null • undefined
string型 文字列型 他言語ではcharなど色々分かれていたりするが、TypeScriptでは1種類 「`」で囲ったものは、テンプレートリテラルという
string型 文字列リテラル型が存在する それにより、stringのその文字列しか許可しない型を用意することができる
string型 (Stringオブジェクト編) Stringオブジェクトが存在する newキーワードを使って呼び出すと、object型になるが、使わないとstring型になる https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
string型 (Stringオブジェクト編) Stringオブジェクトは、型がStringの物を出すので、無理やり文字列にする性質がある よって、これは型変換ではなく、ただのオブジェクト変換なので、使用しない方がいい https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#general-types
number型 数値型 他言語ではint/float/doubleなど、数値によって型が分かれているが、TypeScriptでは1 つだけ
number型 JavaScriptには、NaNとInfinityがある これらもTypeScriptではnumber型となるため、number型だからといって必ずしも計算 が出来るとは限らない isFiniteという関数をつかって、有限なnumber型の値であるかを確かめる必要がある
null型 nullは型として存在するが、そもそも値なので、typeofで調べたときにはobjectとして出て くる そのため、型としてnullかどうかを調べる術はない ただ、型としては存在するので、null判別をしないといけない場面がある
undefined型 型をundefined型として宣言した時か、全く型を宣言していない時、値が存在しない時は 全てundefined型となる
Template Literal Types テンプレートリテラルで型を宣言することが出来る これを使うと、ただのstringより厳密な値を指定することが出来る
Template Literal Types ただ、ここで指定されたnumberはただのnumber型ではない そのため、他言語で使われるintやfloatのような数値しか扱うことができないため、注意 する必要がある
union type 「いずれかの型」を表現する型 パイプで繋げることで表す ちなみにnumber | stringは凄い範囲が広い型なので、出来るだけやめよう
union type 特定の文字列しか入らないようなものを用意したい時にも使える
課題 以下の問題を解いてください 課題リンク また、この問題を解くにあたって、型の付け方で気を付けなければならないことや、他に 気になったことがあれば共有してください
付録 https://typescriptbook.jp/ https://typescript-jp.gitbook.io/