logo
【TypeScript】クラスでアクセス修飾子を使う方法
TypeScript

【TypeScript】クラスでアクセス修飾子を使う方法

作成日：2021年08月12日
更新日：2021年08月12日

アクセス修飾子とは、public、private、protectedを使って、クラスがどこからアクセス可能かを指定する修飾子のことを言います。

次のクラスがあったとします。

ts
class Profile {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
let tanaka = new Profile("田中", 23);

tanaka.nameをconsole.log();で確認してみます。

image2

『田中』が表示されました。

クラスから呼び出しを不用意に行わないようにするために、アクセス修飾子を使います。

例えば、名前を呼び出しをできるようにするには、name の型の前にpublicを使います。

ts
class Profile {
public name: string;
private age: number;

image3

エラーが発生せず、name を呼び出せています。

反対に、年齢は呼び出してほしくないとした場合、ageの型の前に、privateを追加します。

ts
class Profile {
name: string;
private age: number;

tanaka.ageをconsole.log();で確認しようとすると、

image4

エラーが発生し、『プロパティ 'age' はプライベートで、クラス 'Profile' 内でのみアクセスできます。』と指摘されました。

privateを指定すると、age単体では、呼び出すことができなくなります。

ageは、classの中のみ呼び出すことができます。

例えば、Profile クラスの中に Message 関数を作成します。

ts
class Profile {
public name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
Message(): string {
return `${this.name}さんは、${this.age}歳です。`;
}
}

こちらをconsole.log();で確認してみましょう。

image5

ageを呼び出すことができました。

ageをProfileクラスからだけではなく、サブクラスからも呼び出しができるようにするには、protectedを使用します。

例えば、nameをpublicからprotectedに変えて、AnotherMessageというサブクラスを作ってみましょう。

ts
class Profile {
protected name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
Message(): string {
return `${this.name}さんは、${this.age}歳です。`;
}
}
class AnotherMessage extends Profile {
constructor(name: string, age: number) {
super(name, age);
}
AnotherMessage(): string {
return `今年${this.age}歳になる${this.name}さんです。`;
}
}

確認すると、

image6

this.nameにはエラーが発生していませんが、this.ageにはエラーが発生しています。

ageをprotectedにすると、エラーが解消されます。

ts
class Profile {
protected name: string;
protected age: number;

image7

エラーが解消されて、nameと age は、サブクラスから呼び出されるようになりました。

念のため、console.log();で確認すると、

ts
let tanaka = new AnotherMessage("田中", 23);
console.log(tanaka.AnotherMessage());

image8

メッセージが表示されました。

お知らせ

Udemy Online Cource

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

カテゴリ

最新順

© 2024あずきぱんウェブスタジオ