【復習用】TypeScriptこまいとこ
TypeScriptを学習中の方向けです。
一通りTypeScript学習してみたけど、こまいとこ忘れてそうって方の復習用になれば幸いです。
短く書いてるのでサラッと読めると思います。
目次
- インデックスシグネチャ
- readonly修飾子
- 省略可能なプロパティ、オプションパラメータ
- 抽象クラス（abstract）
- アクセス修飾子（public, private, protected）
- constアサーション
- keyof演算子
- Required<Object>
- Readonly<Object>
- Pick<Object, Keys>
- Omit<Object, Keys>
インデックスシグネチャ
type a = {
[key: string]: number;
};このように書くことで、値がnumber型の文字列プロパティを任意の数だけ持つオブジェクトの型を定義できます。キーの型と値の型は分かっているが、プロパティ数がいくつになるか不定の場合に使えます。
例) クラス名と属する生徒名を持つオブジェクト
const classStudents: {
[className: string]: string[];
} = {
"1A": ["田中君", "佐藤さん"],
"1B": ["太田君"],
"2A": ["吉田君", "鈴木さん", "中田君"],
};readonly修飾子
読み取り専用のプロパティにできます。
const taro: {
readonly id: number; // idは読み取り専用にする
name: string;
} = {
id: 1,
name: "Taro",
};
taro.name = "Tanaka Taro"; // nameの書き換えは可
taro.id = 2; // idはreadonlyなのでtype error省略可能なプロパティ
オブジェクトの設定が任意なプロパティには?を付けて省略可にできる。
type User = {
name: string;
age: number;
address?: string; // ?を付けることでaddressは省略可能となる
};
const taro: User = {
name: "Taro",
age: 18,
};
const hanako: User = {
name: "Hanako",
age: 24,
address: "Tokyo",
};
console.log(taro); // { name: 'Taro', age: 18 }
console.log(hanako); // { name: 'Hanako', age: 24, address: 'Tokyo' }関数の引数にも?は指定できる（オプションパラメータ）。
// addressを引数に渡すかは任意
function hello(name: string, age: number, address?: string) {
console.log(
`name: ${name}, age: ${age}${address ? `, address: ${address}` : ""}`
);
}
hello("Taro", 18); // name: Taro, age: 18
hello("Hanako", 24, "Tokyo"); // name: Hanako, age: 24, address: Tokyo抽象クラス（abstract）
abstract classとすることで、抽象クラスを定義できる。抽象クラスはそのままインスタンス化できない。
abstract class Person {
constructor(public name: string) {}
}
class Teacher extends Person {
classesInCharge: string[]; // 担当クラス
constructor(name: string, classesInCharge: string[]) {
super(name);
this.classesInCharge = classesInCharge;
}
}
class Student extends Person {
belongClass: string; // 所属クラス
constructor(name: string, belongClass: string) {
super(name);
this.belongClass = belongClass;
}
}
// const person = new Person("person"); // abstractクラスの直接インスタンス化はエラー
const taro = new Teacher("Taro", ["1A", "2A"]);
console.log(taro); // Teacher { name: 'Taro', classesInCharge: [ '1A', '2A' ] }
const hanako = new Student("Hanako", "1A");
console.log(hanako); // Student { name: 'Hanako', belongClass: '1A' }アクセス修飾子（public, private, protected）
classのプロパティやメソッドにアクセス修飾子を付けることで、アクセス可能な範囲を制限できる。
- public：クラス外からアクセス可能（アクセス修飾子未指定時はこれ）
- private：そのクラス内からのみアクセス可能
- protected：そのクラスおよびサブクラス内からのみアクセス可能
class User {
constructor(
private privateValue: string,
protected protectedValue: string,
public publicValue: string
) {}
printPrivateValue() {
console.log(this.privateValue); // クラス内ではアクセス可
}
printProtectedValue() {
console.log(this.protectedValue); // クラス内ではアクセス可
}
printPublicValue() {
console.log(this.publicValue); // クラス内でもアクセス可
}
}
const user = new User("private", "protected", "public");
user.printPrivateValue(); // private
user.printProtectedValue(); // protected
user.printPublicValue(); // public
// console.log(user.privateValue); // privateなのでアクセスできずエラー
// console.log(user.protectedValue); // protectedなのでアクセスできずエラー
console.log(user.publicValue); // publicはクラス外でもアクセス可constアサーション
as constを付けることで、readonly + リテラルでの狭い型推論をしてくれる。
const user = { name: "Taro", age: 18 }; // userの型は、{name: string; age: number}
user.name = "Hanako"; // nameはstring型なので上書き可能
const taro = { name: "Taro", age: 18 } as const; // taroの型は、{readonly name: "Taro"; readonly age: 18}
// taro.name = "Namnako"; // nameはreadonly "Taro"なので上書き不可keyof演算子
オブジェクト型のすべてのキー名からなる文字列リテラルの合併型を取得できる。
type User = {
name: string;
age: number;
address?: string;
};
type UserKeys = keyof User; // "name" | "age" | "address"
const key: UserKeys = "address";Required<Object>
Objectのすべてのプロパティを必須に変換した型を取得する。
type User = {
name: string;
age: number;
address?: string;
};
type RequiredUser = Required<User> // {name: string; age: number; address: string}Readonly<Object>
Objectのすべてのプロパティをreadonlyに変換した型を取得する。
type User = {
name: string;
age: number;
address?: string;
};
type ReadonlyUser = Readonly<User> // {readonly name: string; readonly age: number; readonly address?: string | undefined}Pick<Object, Keys>
Objectから指定したキー名のみのオブジェクト型を取得する。
type User = {
name: string;
age: number;
address?: string;
};
type PickedUser = Pick<User, "name" | "age">; // {name: string; age: number;}Omit<Object, Keys>
Objectから指定したキー名を除外したオブジェクト型を取得する。
type User = {
name: string;
age: number;
address?: string;
};
type OmittedUser = Omit<User, "name" | "address">; // {age: number;}
