TypeScript入門 - 型は何を守るのか
TypeScriptで開発できるプログラム
Webアプリケーション、フロントエンド、サーバーサイドまで、型が付いた安全なコードを書けます。
1 / 5
TypeScriptとJavaScriptの関係から始め、変数・配列・オブジェクト・関数へ型を付ける全22レッスンの入門コースです。型推論、typeエイリアス、optional引数、戻り値、void、アロー関数、コールバックの型を、プロフィールサイトのデータ処理関数をTypeScript化しながら学びます。interface、union、ジェネリクスは次のコースで扱います。
レッスン
22件
所要時間
約5.5時間
ランク
初級
学習環境
ブラウザ完結
10分・登録なしで読めます
動く図解・型は何を守るのか
動く図解・型は何を守るのか
プロフィールサイトで使うデータ処理関数とユーティリティ関数を、anyに頼らずTypeScriptで型付けする
JavaScriptコードへ基本的な型注釈を付け、型エラーを読める
string・number・boolean・配列・オブジェクトの型を使い分けられる
関数の引数・戻り値・optional引数・コールバックを型で表現できる
ブラウザ完結（インストール不要）
触れる図解
16本
導入スライド
61枚
手を動かす演習
17問
理解度クイズ
3問
読み物のレッスン
2本
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
型が何を守るのかを体感し、はじめての型注釈を書くところまで進みます。
プリミティブから配列・オブジェクトまで、データの形を型で書けるようにします。
引数と戻り値に型を付け、関数そのものを型で表現できるようにします。
このコースを終えると取れるバッジ
TypeScript 第2コース
0 / 22 レッスン
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
TypeScript入門 - 型は何を守るのか
Webアプリケーション、フロントエンド、サーバーサイドまで、型が付いた安全なコードを書けます。
1 / 5
TypeScript入門 - TypeScriptとJavaScript
Webアプリケーション、フロントエンド、サーバーサイドまで、JavaScript が動く場所ならどこでも使えます。
1 / 4
型注釈は、変数名の後ろに型を書き添えるだけです。string が文字列、number が数値、boolean が true と false を表します。
プロフィールサイト
3件・公開中
型チェック 通過
: string文字列: number数値: boolean真偽値約束を破ると、その行でエラーになります。
1 / 3
TypeScript入門 - 型推論
注釈を書いていない変数にも、TypeScript は代入された値を見て型を決めています。これを型推論と呼びます。推論された型も、注釈で書いた型と同じ強さで働きます。
書いていないのに守られている、というのが TypeScript の気持ちよさの半分です。
workName に注釈は無いのに、lenght の打ち間違いがちゃんと捕まっています。
const workName = "プロフィールサイト";
const length = workName.lenght;
// エラー lenght は string にありません1 / 3
動かしながら、仕組みや変化を目で確かめられます。
開発室「この型、通せますか?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
TypeScript道場 fleama開発室の10問
このコースを終えたあとに進むと、無理なく続けられます
const workName = "プロフィールサイト";
const length = workName.lenght;
// エラー lenght は string にありません