連接兩個已知字符串類型時如何推斷模板文字類型

Question

我有兩種類型： Action和ActionEmitter 。 后者是從Action類型推斷出來的，並附加了字符串文字'Clicked' 。

我正在嘗試創建一個將Action作為 arg 並返回ActionEmitter的函數。

我可以使用類型保護來完成這項工作，但是鑒於我已經知道我有一個Action ，我希望能夠推斷出當我將字符串“Clicked”連接到我的 action 參數時創建了一個有效的ActionEmitter 。

這是我的代碼：

type Action = 'next' | 'previous';

type ActionEmitter = Action extends `${infer u}` ? `${u}Clicked` : never;

function isActionEmitter(s: string | ActionEmitter): s is ActionEmitter {
  switch (s) {
    case 'previousClicked':
    case 'nextClicked':
      return true;
    default:
      return false;
  }
}

// this works but feels unnecessary 
function createActionEmitterGood(action: Action): ActionEmitter | null {
  const emitter = action + 'Clicked';
  return (isActionEmitter(emitter) && emitter) || null;
}

// fails... is this even possible without casting?
function createActionEmitterBad(action: Action): ActionEmitter | null {
  const clicked = 'Clicked' as const;

  // Type 'string' is not assignable to type '"nextClicked" | "previousClicked"'
  return action + clicked;
}

在沒有類型保護或強制轉換為ActionEmitter的情況下，我在第二個函數createActionEmitterBad中嘗試做什么？

Answer 1

您需要使用字符串插值。

return `${action}${clicked}`;

Typescript 不會將+運算符用於連接具有相同類型安全性的字符串。 可能是因為+可以在運行時進行各種奇怪的類型強制。 所以無論如何，通常首選字符串插值的模板文字形式。

看游樂場