ts筆記-索引簽名

索引簽名用於約束知道key、value類型的數據的結構，索引簽名必須是 string 或者 number或者symbols。格式{ [key: keyType]: valueType }，string、symbols用於約束對象，number用於約束數組。

JavaScript 在一個對象類型的索引簽名上會隱式調用 toString 方法，而在 TypeScript 中這么使用會直接拋出錯誤。

const obj = {
  toString() {
    return 'Hello';
  }
};

const foo = {}

foo[obj] = 'World'

console.log(foo[obj]); //  World
console.log(foo['Hello']); // World

const obj = {
  toString() {
    return 'Hello';
  }
};

const foo: any = {};

// 類型“{ toString(): string; }”不能作為索引類型使用
foo[obj] = 'World';

// 正常
foo[obj.toString()] = 'World';

使用索引簽名創建一個指定結構的對象

// 對象foo的key必須是string，值是一個包含message屬性的對象
const foo: { [index: string]: { message: string } } = {};


foo.a = {message: 'hello' } // ok 創建
foo.a.message; // ok 讀取

foo.b = { messages: 'some message' }; // ERROR 

當你聲明一個索引簽名時，所有明確的成員都必須符合索引簽名

interface Foo {
  [key: string]: number;
  x: number;
  y: string; // ERROR 必須是number
}


interface Foo {
  [key: number]: string;
  2: number
}

const foo: Foo = ['1', '2', '3']; // OK

索引簽名可以通過映射類型來使索引字符串為聯合類型中的一員

type Index = 'a' | 'b' | 'c';
type FromIndex = { [k in Index]?: number };

const good: FromIndex = { b: 1, c: 2 };

嵌套索引簽名

interface NestedCSS {
  color?: string;
  nest?: {
    [selector: string]: NestedCSS;
  };
}

const example: NestedCSS = {
  color: 'red',
  nest: {
    '.subclass': {
      color: 'blue'
    }
  }
}