javascript - เป็นไปได้หรือไม่ที่ TypeScript จะสรุปคีย์จากอ็อบเจ็กต์แบบไดนามิก

สิ่งที่ฉันพยายามจะทำที่นี่คือ intellisense/การเติมข้อความอัตโนมัติสำหรับวัตถุที่ถูกสร้างมาจากอาเรย์ - คล้ายกับ Action Creator สำหรับ Redux, อาเรย์ของสตริง (string[]) ที่สามารถลดลงเป็นวัตถุในรูปแบบ { [string]: string }.

ตัวอย่างเช่น:

const a = ['ONE', 'TWO', 'THREE'];

const b = a.reduce((acc, type) => ({ ...acc, [type]: type }), {});

console.log(b);
// Output: b = { ONE: 'ONE', TWO: 'TWO', THREE: 'THREE' };

ฉันจัดการให้ TypeScript เข้าใจเรื่องนั้นได้ โดยใช้โค้ดด้านล่าง TypeScript เข้าใจว่ากุญแจเป็นสตริง แต่ไม่รู้ว่ามันคืออะไร

interface ITypesReturnObject { [s: string]: string }

มีใครคิดวิธีที่จะบอก TypeScript หรือไม่ว่าสมาชิกคีย์ของวัตถุเท่ากับสตริงในอาร์เรย์?

ความช่วยเหลือใดๆ จะได้รับการชื่นชมอย่างมาก

คำตอบ #1

(สมมติว่าคุณใช้ TS3.0 หรือสูงกว่าในสิ่งต่อไปนี้)

TypeScript รองรับแนวคิดของประเภทตัวอักษรสตริงรวมถึงประเภททูเพิล ดังนั้นจึงสามารถทำให้ค่าของคุณ a มี ประเภท ['ONE', 'TWO', 'THREE'] และมี ค่า ['ONE', 'TWO', 'THREE'] เช่นนี้ได้:

const a: ['ONE', 'TWO', 'THREE'] = ['ONE', 'TWO', 'THREE'];

(วิธีที่ไม่ซ้ำซ้อนในการทำให้สิ่งนี้เกิดขึ้นจะมาในภายหลัง):

จากนั้นคุณสามารถแทนชนิดที่ต้องการของ b เป็นการแมปจากคีย์ไปยังค่าที่ตรงกับคีย์อย่างแม่นยำ โดยใช้ชนิดที่แมป:

type SameValueAsKeys<KS extends string[]> = { [K in KS[number]]: K };

ซึ่งสามารถใช้ได้แบบนี้:

const b: SameValueAsKeys<typeof a> = a.reduce((acc, type) => ({ ...acc, [type]: type }), {} as any);
b.ONE; // property type is "ONE"
b.TWO; // property type is "TWO"
b.THREE; // property type is "THREE"

สังเกตว่าคอมไพเลอร์รู้ว่า b มีคีย์สามตัว คือ "ONE", "TWO", และ "THREE" และค่าของมันเหมือนกับคีย์

ดังนั้น TypeScript แน่นอนว่ารองรับการพิมพ์แบบไดนามิกประเภทนี้ โชคไม่ดีที่มันค่อนข้างน่าเบื่อที่จะใช้งานตามที่ฉันแสดงด้านบน วิธีหนึ่งที่จะทำให้เรื่องนี้น่ารำคาญน้อยลงคือการเพิ่มฟังก์ชันช่วยบางอย่างที่อนุญาตให้คอมไพเลอร์สามารถคาดเดาประเภทที่เหมาะสม หรืออย่างน้อยก็ซ่อนการยืนยันประเภทในไลบรารีซึ่งนักพัฒนาจะไม่ต้องกังวลเกี่ยวกับมัน

ก่อนอื่น สำหรับ a... คอมไพเลอร์จะไม่อนุมานประเภททูเพิล และมันมักจะขยายค่าตัวอักษรสตริงไปเป็นประเภท string ยกเว้นในบางกรณี มาแนะนำฟังก์ชันช่วยเหลือที่ชื่อ stringTuple():

function stringTuple<T extends string[]>(...args: T) { return args; }

นี่เป็นการอนุมานประเภท tuple จากอาร์กิวเมนต์ที่เหลือ ตอนนี้เราสามารถใช้มันเพื่อสร้าง a โดยไม่ต้องพิมพ์ค่าสตริงซ้ำ:

const a = stringTuple("ONE", "TWO", "THREE");

ต่อไป ให้เราแนะนำฟังก์ชันที่รับรายการของสตริงและส่งกลับอ็อบเจ็กต์ที่คีย์คือสตริงเหล่านั้นและค่าตรงกับสตริง:

function keyArrayToSameValueAsKeys<T extends string[]>(keys: T): SameValueAsKeys<T>;
function keyArrayToSameValueAsKeys(keys: string[]): { [k: string]: string } {
  return keys.reduce((acc, type) => ({ ...acc, [type]: type }), {});
}

ที่นี่เราใช้โค้ดเดียวกับคุณโดยใช้ reduce แต่เราเก็บมันไว้ในฟังก์ชันของมันเองและใช้ซิกเนเจอร์การเรียกโอเวอร์โหลดเดียวเพื่อแสดงประเภทผลลัพธ์ที่ตั้งใจไว้ ตอนนี้เราสามารถได้ b แบบนี้:

const b = keyArrayToSameValueAsKeys(a);
b.ONE; // property type is "ONE"
b.TWO; // property type is "TWO"
b.THREE; // property type is "THREE"

หากคุณใส่ stringTuple() และ keyArrayToSameValueAsKeys() ในไลบรารี ผู้ใช้สามารถใช้งานได้โดยไม่ยุ่งยากมาก:

const otherObject = keyArrayToSameValueAsKeys(stringTuple("x", "y", "z"));
// const otherObject: {X: "X", Y: "Y", Z: "Z"}

หรือคุณสามารถรวมพวกมันเข้าด้วยกันแบบนี้:

function keysToSameValueAsKeys<T extends string[]>(...keys: T): { [K in T[number]]: K };
function keysToSameValueAsKeys(keys: string[]): { [k: string]: string } {
  return keys.reduce((acc, type) => ({ ...acc, [type]: type }), {});
}

แล้วจากนั้นรับผลลัพธ์ในการเรียกหนึ่งครั้ง แบบนี้:

const lastOne = keysToSameValueAsKeys("tic", "tac", "toe");
// const lastOne: {tic: "tic", tac: "tac", toe: "toe"};

โอเค หวังว่านั่นจะช่วยได้บ้าง โชคดี!

คำตอบ #2

ถ้าคุณรู้ล่วงหน้าว่าจะมีอะไรอยู่ในอาร์เรย์ คุณสามารถทำอะไรบางอย่างแบบนี้ได้:

type myType = 'ONE' | 'TWO' | 'THREE';
const a: myType[] = ['ONE', 'TWO', 'THREE'];

const b: { [key in myType]: myType } = a.reduce<{ [key in myType]: myType }>((acc, type) => ({ ...acc, [type]: type }), <any>{});

// correct intellisense
b.ONE === 'ONE'