【TypeScript】extendsにおけるinterface/ジェネリクス/条件付き型

// ベースとなる基本のボタン型
interface BaseButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

// BaseButtonPropsを継承（拡張）して、iconプロパティを追加
interface IconButtonProps extends BaseButtonProps {
  icon: string;
}

// IconButtonProps は以下の型と同じになります
// {
//   label: string;
//   onClick: () => void;
//   disabled?: boolean;
//   icon: string;
// }

const myButton: IconButtonProps = {
  label: "送信する",
  onClick: () => console.log("clicked"),
  icon: "send-icon.png" // 追加されたプロパティ
};

interface StylingProps {
  className?: string;
  style?: React.CSSProperties;
}

interface LinkProps {
  href: string;
  target?: string;
}

// 複数の型をガッチャンコして新しい型を作る
interface StyledLinkProps extends StylingProps, LinkProps {
  text: string;
}

interface Animal {
  name: string;
  age: number | string;
}

interface Dog extends Animal {
  // OK: number | string の範囲内（より厳しい型）への上書きは可能
  age: number; 
  
  // NG: boolean は number | string の範囲外なのでコンパイルエラー！
  // name: boolean; 
}

class Component {
  elementId: string;

  constructor(id: string) {
    this.elementId = id;
  }

  render() {
    console.log(`${this.elementId} を描画します`);
  }
}

// Componentクラスを継承したCardクラス
class Card extends Component {
  title: string;

  constructor(id: string, title: string) {
    super(id); // 親クラスのコンストラクタを呼び出す必須の処理
    this.title = title;
  }

  renderCard() {
    this.render(); // 親のメソッドを呼び出せる
    console.log(`タイトルは ${this.title} です`);
  }
}

// Tはどんな型でも良い状態
function getLength<T>(arg: T): number {
  // エラー！ Tにはlengthプロパティがあるとは限らない（例：数値が渡された場合）
  // return arg.length; 
}

interface HasLength {
  length: number;
}

// T は「最低限 length: number プロパティを持つ型」に限定される
function getLength<T extends HasLength>(arg: T): number {
  return arg.length; // 今度はエラーにならない！
}

getLength("hello"); // 文字列は length を持つのでOK
getLength([1, 2, 3]); // 配列は length を持つのでOK
// getLength(100); // 数値は length を持たないのでコンパイルエラー！

// 必須プロパティの定義
interface WithId {
  id: string;
}

// Tは必ず id: string を持つオブジェクトでなければならない
function extractIds<T extends WithId>(items: T[]): string[] {
  return items.map(item => item.id);
}

const posts = [{ id: "p1", title: "TypeScript基礎" }, { id: "p2", title: "CSSの極意" }];
const users = [{ id: "u1", name: "田中" }];

// どちらの配列を渡しても、安全に id だけを抽出できる
const postIds = extractIds(posts); 
const userIds = extractIds(users);

// 型Tが string 型に割り当て可能（extends）であれば string 型、そうでなければ number 型になる
type StringOrNumber<T> = T extends string ? string : number;

type Result1 = StringOrNumber<"hello">; // Result1 は string 型になる
type Result2 = StringOrNumber<true>;    // Result2 は number 型になる

// TypeScript標準の Exclude の定義
type Exclude<T, U> = T extends U ? never : T;

// 使い方："a" | "b" | "c" から "a" を取り除く
type MyTypes = Exclude<"a" | "b" | "c", "a">; 
// 結果: "b" | "c"