💬 この記事でわかること
- TypeScriptの基本用語をほぼ1行でざっくり理解できる
- 随時更新中！
💻 自己紹介
- フロントエンドエンジニア1年目
- 以前の環境：ウォーターフォールでコーダーとしてwebサイト制作
- 現在の使用技術：Vue.js
はじめに
TypeScript勉強中にメモしたものを、自分がパッと見て思い出せるレベルまで噛み砕いてまとめたメモです。
新しく知った用語が出てきたら随時更新していく予定なので、あくまで自分がわかる程度のフランクな感じで書いてます。同じように勉強中の方の参考に少しでもなれば嬉しいです!
基本の型
| 用語 |
一言でいうと |
例 |
こんな時に使おう |
| string |
文字列(テキスト)のこと |
"hello" |
名前とかメッセージとか、文字を扱うとき |
| number |
数字のこと |
123 |
年齢や金額など数値を扱うとき |
| boolean |
trueかfalseのどっちか |
true |
「〜かどうか」を表したいとき |
| null |
「何もない」を表す値 |
null |
意図的に「空っぽ」を入れたいとき |
| undefined |
値がまだ代入されていない/存在しないことを表す値 |
undefined |
変数を宣言しただけでまだ何も代入してないとき |
| object |
プリミティブ型(文字列や数値など)以外のすべての値を表す型 |
{ name: "taro", age: 20 } |
オブジェクト形式のデータを扱いたいとき |
| プロパティ |
オブジェクトの中の1項目(key: valueのセット) |
name: "taro" |
オブジェクトの中身を1個ずつ指すとき |
| メソッド |
オブジェクトの中にある関数 |
user.getName() |
オブジェクトに紐づく処理を実行したいとき |
| 関数 |
処理をひとまとめにしたもの |
function add(a, b) { return a + b; } |
同じ処理を何度も使い回したいとき |
型まわりの便利機能
| 用語 |
一言でいうと |
例 |
こんな時に使おう |
| 型 |
「どんな値が入るか」のルール |
string, number など |
変数に想定外の値が入らないようにしたいとき |
| 型注釈 |
「この変数はこの型ですよ」と自分で宣言すること |
let age: number = 20; |
TypeScriptに型を明示的に教えたいとき |
| 型推論 |
TypeScriptが型を自動で考えてくれるすごいやつ |
let age = 20; (自動でnumberになる) |
わざわざ型注釈を書かなくても済むとき |
| type |
型に好きな名前をつけられる |
type ID = string | number; |
複雑な型に名前をつけて使い回したいとき |
| interface |
オブジェクト用の設計図。同じ名前で書くと自動的に定義をマージできる |
interface User { name: string; } |
オブジェクトの形を決めておきたいとき |
| ジェネリクス |
型を後から決められる仕組み |
function first<T>(arr: T[]): T { return arr[0]; } |
いろんな型に対応する共通処理を書きたいとき |
| Array<T> |
T型の配列 |
Array<string> (=string[]) |
同じ型の値をたくさん入れたいとき |
| ReadonlyArray<T> |
変更しちゃダメな(読み取り専用の)配列 |
const arr: ReadonlyArray<number> = [1,2,3]; |
配列をうっかり書き換えられたくないとき |
| keyof |
オブジェクトのキーだけを型として取り出せる |
keyof User → "name" | "age"
|
プロパティ名だけを型として使いたいとき |
| リテラル |
コードに直接書いた値そのもの |
"admin", 123
|
— |
| リテラル型 |
特定の値しか入れられない型 |
type Role = "admin" | "user"; |
決まった値しか許可したくないとき |
| オプショナルプロパティ |
あってもなくてもいいプロパティ |
age?: number; |
必須じゃないデータを表したいとき |
オプショナルチェーン(?.) |
値がなくてもエラーにせずundefinedを返す安全なやつ |
user?.name |
オブジェクトがnullかもしれないときの安全なアクセス |
Null合体演算子(??) |
値がnullかundefinedのときだけ代わりの値を使う(0や""はそのまま採用される点が||と違う) |
const name = user.name ?? "名無し"; |
デフォルト値を設定したいとき |
スプレッド構文(...) |
配列やオブジェクトの中身を展開する |
const newArr = [...arr, 4]; |
配列やオブジェクトをコピー・結合したいとき |
ユニオン型(|) |
「AまたはB」のように複数の型を許可する(OR) |
type ID = string | number; |
複数の型のどれかを受け入れたいとき |
| Mapped Types(マップド型) |
既存の型のキーを1個ずつ取り出して、新しい型を作る機能 |
type Partial<T> = { [K in keyof T]?: T[K] }; |
既存の型を少し加工した新しい型を作りたいとき |
[K in T] |
Tに含まれるキーを1つずつ取り出して、まとめて新しい型を作る構文 |
{ [K in "a"|"b"]: number } |
Mapped Typesを書くとき |
| インデックスアクセス型 |
オブジェクトの特定プロパティの「型」を取り出す機能(値じゃなくて型を取る) |
type Age = User["age"]; |
既存の型の一部だけ再利用したいとき |
配列・タプル
| 用語 |
一言でいうと |
例 |
こんな時に使おう |
| タプル |
個数と順番、そして型まで決まっている配列 |
type Point = [number, number]; |
「x座標とy座標」みたいに決まった形のデータを扱うとき |
| length |
配列やタプルの要素数を教えてくれるやつ |
type B = ["a","b","c"];
type Length = B["length"];
// Length は 3
|
タプルの要素数を型として取り出したいとき |
| for-of文 |
配列の中身(値)を1個ずつ取り出してループする |
for (const item of arr) { console.log(item); } |
配列の要素を順番に処理したいとき |
| entries() |
インデックス番号と値をセットで取り出す |
for (const [i, v] of arr.entries()) {} |
何番目の要素かも一緒に知りたいとき |
クラスまわり
| 用語 |
一言でいうと |
例 |
こんな時に使おう |
| クラス |
オブジェクトの設計図 |
class User { name: string; } |
同じ形のオブジェクトをたくさん作りたいとき |
| インスタンス |
クラスをもとにして作った実体(クローン) |
const u = new User(); |
クラスから実際にオブジェクトを作るとき |
| コンストラクタ |
「この初期設定持っててね」を決める場所 |
constructor(name: string) { this.name = name; } |
インスタンス作成時に初期値を渡したいとき |
| new |
インスタンス生成の合図 |
new User("taro") |
クラスからインスタンスを作るとき |
| abstract |
抽象クラス。これ単体ではインスタンス(クローン)を作れない |
abstract class Animal {} |
継承前提の共通の設計図を作りたいとき |
| readonly修飾子 |
一度セットしたら変更しちゃダメなやつ(読むだけならOK) |
readonly id: number; |
書き換えられたくないプロパティを守りたいとき |
制御・エラー処理
| 用語 |
一言でいうと |
例 |
こんな時に使おう |
| throw構文 |
処理をそこで止めて、エラーを投げる |
throw new Error("something wrong"); |
想定外の状況が起きたことを伝えたいとき |
| try...catch |
例外が発生したら、その値をcatchで受け取る仕組み。 |
try { throw new Error("エラー"); } catch (e) { console.log("受け取った!"); } |
エラーで処理全体が落ちるのを防ぎたいとき |
| void |
関数は終わるけど何も値を返さない |
function log(): void { console.log("hi"); } |
戻り値を使わない関数を作るとき |
| never |
「絶対に起こらない値」を表す型。無限ループする関数や、必ずエラーを投げて終わる関数の戻り値になる |
function fail(): never { throw new Error(); } |
switch文などで全パターン網羅できてるかチェックしたいとき |
| instanceof |
型ガード!値が指定したコンストラクタのインスタンスかどうかを実行時に判断する |
if (button instanceof HTMLButtonElement) {} |
値の実際の型によって処理を分けたいとき |
| in |
型ガード!このオブジェクトはこのプロパティを持っているか判定する |
if ("disabled" in button) {} |
プロパティの有無で処理を分けたいとき |
その他知識
| 用語 |
一言でいうと |
例 |
こんな時に使おう |
| tsconfig.json |
TypeScriptのルールブック |
{ "compilerOptions": {...} } |
プロジェクト全体のTypeScriptの挙動を設定したいとき |
| strict: true |
tsconfig.jsonに書く設定。「厳しくチェックしてね」の意味 |
"compilerOptions": { "strict": true } |
型のゆるさを許さず、バグを未然に防ぎたいとき |
📣 最後に
もし間違いに気づいた方がいたら、コメントで教えてもらえると嬉しいです🙏
引き続きTypeScript、頑張って勉強していきます！
🏢 所属会社
日々、Web開発をしながら学んだことを発信しています。
会社サイトはこちら👇
https://onewedge.co.jp/
