在仍能推斷類型的同時，能否在此函數中獲得TypeScript自動完成功能？

Question

我正在編寫一組工廠函數，每個工廠函數都將返回較大整體對象的一部分。 由於它是一種復雜的類型，因此我希望能夠使用智能感知來幫助我編寫這些功能。

我不知道使用什么返回類型來注釋函數，以確保獲得智能/自動完成功能。 到目前為止，我已經嘗試了三件事。 對於這些示例，可以假設FooType定義為：

interface FooType {
    prop1: boolean;
    prop2: boolean;
    ...
}

選項一

我可以使用類型推斷來自動確定函數的類型，但是這樣我就不會得到任何類型推斷。

function PartialFooMaker1() {
   return {
        prop1: true,
        // I want autocomplete in here
   }
}
function PartialFooMaker2() {
   return {
        prop2: true,
        // I also want autocomplete in here
   }
}

export const Foo: FooType = Object.assign({}, PartialFooMaker1(),PartialFooMaker2());

選項二

我可以將完整類型指定為函數返回類型，但是如果我省略一些屬性，那會（正確）觸發編譯錯誤。

function PartialFooMaker1(): FooType {
   return {
        prop1: true,
        // I have autocomplete, but TS complains about the lack of prop2
   }
}
function PartialFooMaker2(): FooType {
   return {
        prop2: true,
        // I have autocomplete, but TS complains about the lack of prop1
   }
}

export const Foo: FooType = Object.assign({}, PartialFooMaker1(),PartialFooMaker2());

選項三

我可以將完整類型指定為函數返回類型，但是如果我省略一些屬性，那會（正確）觸發編譯錯誤。

function PartialFooMaker1(): Partial<FooType> {
   return {
        prop1: true,
        // I have autocomplete! :)
   }
}
function PartialFooMaker2(): Partial<FooType> {
   return {
        prop2: true,
        // I have autocomplete! :)
   }
}

// the compile error is now here - TS doesn't know that prop1 and prop2 are present
export const Foo: FooType = Object.assign({}, PartialFooMaker1(),PartialFooMaker2());

我還考慮過將FooType拆分為定義明確的子類型，然后與並集類型重新組合，但實際上，它是一個復雜的派生類型，因此對我來說很難拆分。

還有什么我可以嘗試的嗎？

Answer 1

如果可以（合理地）使用Pick ：

interface NamePart { first: string; last: string }
interface AgePart  { age: number; }
interface FooType extends NamePart, AgePart
{
    oneMoreThing: string;
}

function PartialFooMaker1(): Pick<FooType, keyof NamePart | "oneMoreThing">
{
    return {
        first: "Steve",
        last: "Stevenson",
        oneMoreThing: "!",
    }
}
function PartialFooMaker2(): Pick<FooType, keyof AgePart>
{
    return {
        age: 42
    }
}

export const Foo: FooType = { ...PartialFooMaker1(), ...PartialFooMaker2() };

第一部分的解析類型為Pick<FooType, "first" | "last" | "oneMoreThing"> Pick<FooType, "first" | "last" | "oneMoreThing"> Pick<FooType, "first" | "last" | "oneMoreThing">與Pick<FooType, "age">正確Pick<FooType, "age">形成FooType的完整實例。

可以從類型安全的文字和keyof表達式中keyof 。

Answer 2

Partial表示共有零個或多個屬性。 您想要的是Pick ：

function PartialFooMaker1(): Pick<FooType, 'prop1'> {
  return {
       prop1: true,
       // I want autocomplete in here
  };
}

function PartialFooMaker2(): Pick<FooType, 'prop2'> {
  return {
       prop2: true,
       // I also want autocomplete in here
  };
}

使用“ Pick將要求您提前提供要選擇的屬性，但這將為您提供IntelliSense。

另一個選擇是告訴TypeScript每個工廠函數都返回一個FooType 。

type Slice<T extends object> = { [P in keyof T]: Pick<T, P> }[keyof T];

type FooFactory = () => Slice<FooType>;

const PartialFooMaker3: FooFactory = () => {
  return {
    prop1: false,
  };
};

這不會需要明確的返回類型，但推斷出的類型將永遠是一片 FooType -不是切片 FooType你實際上返回。 這就是為什么我建議采用第一方法。 如果您未說明所需的返回類型，則IntelliSense不會建議您返回什么。