【TypeScript】初心者必見interfaceとtype(型alias)とは？objectとは？

2024年11月23日2024年11月24日TypeScript

kamiです。
TwitterとYoutubeもやってます。

1. interfaceとは?
- 1.1. interfaceの定義
- 1.2. interfaceの呼び出し方
2. interfaceを実装する | implements
- 2.1. interfaceをextendsで拡張する
- 2.2. 複数のinterfaceをextendsで拡張する
3. typeとは
4. インターフェースと型エイリアスの違い
5. オブジェクト型
6. オブジェクト型の定義と再定義
- 6.1. オブジェクト型でreadonlyを使う
- 6.2. オブジェクト型でオプショナル型を使う
7. 実装やエラーが解決できない場合

interfaceとは?

interfaceとはクラスが実装すべきフィールドやメソッドを定義した型です。
interfaceを実装することで、interfaceの関数名や引数名の型チェックすることができます。

interfaceの定義

interface HogeInterface {
  name: string;
  age: number;
}

以下のように変数名：interfaceを呼び出すときにinterface名で定義することで値を代入できます。

const 変数名：interface名 {
  key:value
  key:value 
}

関数を定義することもできます。

interface HogeInterface {
  method1(): void;
  method2(name: string): void;
}

interfaceの呼び出し方

interface Hoge {
  name: string;
  age: number;
}
 
const test: Hoge = {
  name: "kami",
  age: 35,
};

console.log(test)
// { name: 'kami', age: 35 }

また、letであれば値を代入することができます。

interface Hoge {
  name: string;
  age: number;
}
 
let test: Hoge = {
  name: "kami",
  age: 35,
};
console.log(test)
// { name: 'kami', age: 35 }
console.log(test)
// { name: 'kami', age: 36 }
test.age = 36;
console.log(test.age)
// 36

interfaceを実装する | implements

インターフェースが定義されると、インターフェースをクラスで実装することができます。
クラスがインターフェースで定義されたプロパティとメソッドを含む必要があります。
またクラスが宣言時にimplementsキーワードを使用する必要があります

interface Hoge {
  name: string;
  test(): string;
}

class Foo implements Hoge {
  name: string;

  constructor(name: string) {
      this.name = name;
      }

  test(): string {
      return "test関数はthis.nameを返します " + this.name;
  }
}

let hoge: Hoge = new Foo("kami");
console.log(hoge.name);
// kami
console.log(hoge.test());
// test関数はthis.nameを返します kami

interfaceを継承して実装します。
クラスのインスタンスを生成して、型にinterfaceを指定します。

let hoge: Hoge = new Foo("kami");

interfaceをextendsで拡張する

interface InterfaceA {
    hoge: string
}

interface InterfaceB extends InterfaceA {
    foo(id: number): boolean
}

class ClassB implements InterfaceB {
    hoge: string = 'kami';

    foo(id: number): boolean {
        return x > 0
    }
}

const classB = new ClassB();
console.log(classB.hoge);
// kami
console.log(classB.foo(30));
// true

複数のinterfaceをextendsで拡張する

interface InterfaceA {
    hoge: string
}

interface InterfaceB {
    foo(x: number): boolean
}

class HogeClass implements InterfaceA, InterfaceB {
    hoge: string = 'kami';

    foo(x: number): boolean {
        return x > 0
    }
}

const hogeClass = new HogeClass();
console.log(hogeClass.hoge);
// kami
console.log(hogeClass.foo(35));
// true

スポンサードサーチ

typeとは

typeはTypeScriptの構文で使われています。
型エイリアスと呼ばれます。

型エイリアス：type alias

TypeScriptでは、型に名前をつけることができます。
その名前のついた型を型エイリアスと言います。

型エイリアスを宣言するときは頭にtypeをつけます。

typeの定義

// プリミティブ型
type Str string;
// リテラル型
type Num = 100;
// 配列型
type Arr = number[];
// オブジェクト型
type Obj = { name :string, id: number };
// ユニオン型
type StrOrNull = string | null;
// 関数型
type Functions = (val: string) => boolean;

typeの呼び出し方

type Hoge = (param: string) => string;
const hogehoge: hoge = param => param;

interfaceとほとんど構文は一緒です。

type名の次は「=」を忘れないように、構文の末に「;」を入れてください。

type Hoge = {// = を記述
  name: string;
  age: number;
}; // セミコロンを記述
 
let test: Hoge = {
  name: "kami",
  age: 35,
};
console.log(test)
test.age = 36;
console.log(test.age)
console.log(test)

インターフェースと型エイリアスの違い

	interface	Type Alias
用途	クラス、メソッド、オブジェクトの構造定義	複数の場所で再利用できる型に名前をつける
使うタイミング	ライブラリ開発	アプリ開発
継承	extendsで拡張ができる	不可交差型で新しいエイリアスは作れる
上書き	定義がマージされる	交差型で新しいエイリアスは作れる
同名での宣言	可	交差型で新しいエイリアスは作れる
使用できる型	オブジェクトメソッド	オブジェクトメソッド配列プリミティブタプルマップ

interfaceは拡張しやすいのでライブラリなどいろんな環境に適応できるような使い方がおすすめです。

Type Aliasは拡張しにくい分、バグが起きる影響もinterfaceより少ないです。

スポンサードサーチ

オブジェクト型

JavaScriptのオブジェクトでは、以下の構文でオブジェクトを定義できましたが、
TypeScriptではできません。
TypeSCriptではオブジェクトに型を定義しないとエラーが出ます。

  const hoge: object = {
    name: 'kami',
    age: 35
  }
  hoge.name

オブジェクト型の定義と再定義

let hoge: {
  name: string
  age: number
} = {
  name: 'kami',
  age: 35,
}

console.log(hoge)
// { name: 'kami', age: 35 }

hoge = {
  name: 'kamiblog',
  age: 40,
}
console.log(hoge)
// { name: 'kamiblog', age: 40 }

オブジェクト型は再定義で代入することもできます。

オブジェクト型でreadonlyを使う

readonlyはそのままで読み取りのみなので、代入で値を変更することことができません。

 const hoge: {
   name: string
   age: number
   readonly gender: string
 } = {
   name: 'kami',
   age: 28,
   gender: 'man',
 }

console.log(hoge)
// { name: 'kami', age: 28, gender: 'man' }
console.log(hoge.gender)
// man
console.log(hoge.gender = 'lady')
// エラー

オブジェクト型でオプショナル型を使う

オプショナル型の場合は値がなくてもエラーになることがありません。

const hoge: {
  name: string
  age: number
  other?: string
} = {
  name: 'kami',
  age: 28,
}

console.log(hoge)
// { name: 'kami', age: 28 }

hoge.other = 'その他'
console.log(hoge)
// { name: 'kami', age: 28, other: 'その他' }

値を代入すれば、取得時に表示がされます。

スポンサードサーチ