[TypeScript]TypeAliasとinterfaceType - interface

interface基本定義

export type YesOrNo = 'Y' | 'N';
export type Name = string;
export type FooFunction = () => string; 

// 定義　開始
export interface IUser {
  readonly id: number;
  readonly name: Name;
  email: string;
  receiveInfo: boolean;
  active: YesOrNo;
}

export interface IUser {
  address?: string;
}
// 定義　終了

// 使用　開始
import * as allTypes from './type';

const iUser: allTypes.IUser = {
  id: 1;
  readonly name: 'jung';
  email: '[e-mail]';
  receiveInfo: false;
  active: 'Y';
}

const foo:allTypes.FooFunction = function() {
  return 'fooFunction'
}
// 使用　終了

IUserの中ではオブジェクトタイプを定義しています。
タイプには最初に定義したtype aliasを使うことも可能です。
?はoptionalという意味です。（optaional：address属性があってもいい、なくてもいいという意味）
IUser interfaceが同じ名前で二つ定義されています。
interfaceは重複定義が可能です。
こうなったら既存のIUSerにaddress?:stringが追加された効果を出します。

「使用　開始」を見ると、
*（すべて）をallTypesというaliasにて包んでくれています。
こうすると、./type　に定義しているタイプを個別importする必要がなくなります。
iUserのタイプはIUserのため、
「定義　開始」中のIUserの規格と同じでなければならないです。
実際のデータすなわち、オブジェクトはこの規格と同じでなければならないです。

type aliasでは重複定義ができません。

export type TUser = {
  readonly id: number;
  readonly name: Name;
  email: string;
  receiveInfo: boolean;
  active: YesOrNo;
}

export type TUser = {
  address?: string;
}

上記の場合は、エラーが出ます。
type aliasは重複定義が許されません。

extends

// interfaceケース
export interface IUserProfile extends IUser {
  profileImage: string;
  github?: string;
  twitter?: string;
}
// type aliasケース
export type TUserProfile = IUser & {
  profileImage: string;
  github?: string;
  twitter?: string;
}

クラスのextendsと同じ機能を果たす。
type aliasもextendsを支援します。intersectionという。
IUser をintersection(&)するという意味です。(mergeと同じ機能)

多重extends

export interface Color {
  fontColor: string;
  borderColor: string;
}

export type Display = {
  display: 'none' | 'block';
  visibilty: boolean
}

export type Geometry = {
  width: number;
  height: number;
}

// interfaceケース
export interface IStyle extends Color, Display, Geometry {
  tagName: string;
}
// type aliasケース
export type TStyle = Color & Display & Geometry & {
  tagName: string;
}

属性の名前を定めていない時

export interface A {
  [key: string]: number
}

const iStyle: A = {
  borderWidth: 5,
  width: 300,
};

export interface B {
  [key: string]: any
}

export interface C {
  (url: string, search?: string): Promise<string>;
}

export type C = {
  (url: string, search?: string): Promise<string>;
}

const getApi: C = (url, search = '') => {
  return new Promise(resolve => resolve('OK'));
}

タイプを定義をする時、属性名を定めずに定義することも可能です。

interface Aの[key:string]:numberの意味は、
属性が文字列であり、valueがnumberタイプという意味です。
[key:string]のkeyは、私たちが望む名前で作成すればいいです。([xx:string]: numberも可能。)
もしvalueのタイプを制限しないと言ったら、interface Bのようにanyを使用すればいいです。

interface Cの場合は、
(url:string、search:string)は引数の規格を定義しています。
Promiseはリターンの規格を定義しています。