TypeScript: một thuộc tính giao diện phụ thuộc vào một thuộc tính khác

Aug 15 2020

có thể nhập một thuộc tính giao diện phụ thuộc vào một thuộc tính khác không?

Ví dụ tôi có:

const object = {
  foo: 'hello',
  bar: { hello: '123', },
}

Và tôi muốn chắc chắn rằng khóa của thanh phải là giá trị của foo .

interface ObjectType = {
  foo: string;
  bar: { hello: string; } // instead of hardcoding have something like this? --> payload: { ValueOfFoo: string; }
}

Cảm ơn! :)

Trả lời

5 AluanHaddad Aug 15 2020 at 23:39

Bạn cần một thông tin chung để nắm bắt loại chuỗi cụ thể

interface ObjectType<K extends string> {
    foo: K;
    bar: { [P in K]: string };
}

Sau đó, bạn có thể viết

const object: ObjectType<'hello'> = {
    foo: 'hello',
    bar: { hello: '123', },
};

Hoặc, nếu bạn có một hàm lấy một đối tượng như vậy, bạn có thể sử dụng giao diện để thực thi quy tắc với suy luận kiểu đầy đủ

function useObject<K extends string>(o: ObjectType<K>) { }

useObject({
    foo: 'hello', 
    bar: { hello: '113' } // works
});

useObject({
    foo: 'hello', 
    bar: { world: '113' }
//         ^^^^^−−−−−−−−−−−− error, `world` should be `hello`
});

Liên kết sân chơi