Complex conditional types in typescript, narrowing, and `extends` keyword.

huangapple
go评论95阅读模式
英文:

Complex conditional types in typescript, narrowing, and `extends` keyword

问题

I have searched a lot and read several question to find a solution to my problem but in no vain. Can you help me?!

What I don't understand is that when a type extends boolean and put in the if statement condition it should be narrowed to true but TypeScript has a different idea in some situation:

  1. import Select from "react-select";
  3. export interface Option<Value> {
  4.   readonly value: Value;
  5.   readonly label?: string;
  6.   readonly isDisabled?: boolean;
  7.   readonly isFixed?: boolean;
  8. }
  10. export type PropValue<Value, IsMulti extends boolean> = IsMulti extends true
  11.   ? Value[]
  12.   : Value;
  14. const ComboBox = <Value, IsMulti extends boolean>(props: {
  15.   value?: PropValue<Value, IsMulti>;
  16.   options: Option<Value>[];
  17.   isMulti: IsMulti;
  18. }) => {
  19.   const { value, isMulti, options } = props;
  20.   const mapValue = (x?: PropValue<Value, IsMulti>) => {
  21.     if (!x) return undefined;
  22.     if (isMulti) {
  23.       isMulti;
  24.       // ??? why isMulti is not of type `true` but rather still `extends boolean`
  25.       // ??? x should be an array but doesn't seem to be narrowed as well
  26.       return options.filter(({ value }) => x.includes(value));
  27.     }
  28.   };
  30.   return <Select value={mapValue(value)} isMulti={isMulti} />;
  31. };

A more simple scenario will work as expected:

  1. function experimenting<T extends boolean>(x: boolean, y: T) {
  2.   if (x) {
  3.     x; //: true
  4.   }
  6.   if (y) {
  7.     y; //: true
  8.   }
  9. }
  • Can you explain isMulti in the first scenario didn't get narrowed to just true?
  • How to fix the code above so that both isMulti and x are narrowed.
英文:

I have searched a lot and read several question to find a solution to my problem but in no vain. Can you help me?!

What I don't understand is that when a type extends boolean and put in the if statement condition it should be narrowed to true but TypeScript has a different idea in some situation:

  1. import Select from &quot;react-select&quot;;
  3. export interface Option&lt;Value&gt; {
  4.   readonly value: Value;
  5.   readonly label?: string;
  6.   readonly isDisabled?: boolean;
  7.   readonly isFixed?: boolean;
  8. }
  10. export type PropValue&lt;Value, IsMulti extends boolean&gt; = IsMulti extends true
  11.   ? Value[]
  12.   : Value;
  14. const ComboBox = &lt;Value, IsMulti extends boolean&gt;(props: {
  15.   value?: PropValue&lt;Value, IsMulti&gt;;
  16.   options: Option&lt;Value&gt;[];
  17.   isMulti: IsMulti;
  18. }) =&gt; {
  19.   const { value, isMulti, options } = props;
  20.   const mapValue = (x?: PropValue&lt;Value, IsMulti&gt;) =&gt; {
  21.     if (!x) return undefined;
  22.     if (isMulti) {
  23.       isMulti;
  24.       // ??? why isMulti is not of type `true` but rather still `extends boolean`
  25.       // ??? x should be an array but doesn&#39;t seem to be narrowed as well
  26.       return options.filter(({ value }) =&gt; x.includes(value));
  27.     }
  28.   };
  30.   return &lt;Select value={mapValue(value)} isMulti={isMulti} /&gt;;
  31. };

A more simple scenario will work as expected:

  1. function experimenting&lt;T extends boolean&gt;(x: boolean, y: T) {
  2.   if (x) {
  3.     x; //: true
  4.   }
  6.   if (y) {
  7.     y; //: true
  8.   }
  9. }

  • Can you explain isMulti in the first scenario didn't get narrowed to just true?

  • How to fix the code above so that both isMulti and x are narrowed.

答案1

得分: 2

T extends boolean 并不意味着 T 等于 boolean。extends 子句只表示 T 是 boolean 的子集，而编译器无法将类型缩小到仅仅是 true，因为它不知道它的确切类型。

例如：
never 是一个空集，而 boolean 的子集包括 true | false | never，因为空集也是一个子集。因此，我们可以将 never 传递给期望泛型参数扩展为 boolean 的函数：

  1. const func = <T extends boolean>() => {};
  3. type A = never extends boolean ? true : false; // true
  4. type B = boolean extends never ? true : false; // false
  6. func<never>() // 没有错误
  7. func<boolean>() // 没有错误
  8. func<string>() // 错误
英文:

T extends boolean doesn't mean that T is equal to boolean. The extends clause just means that T is a subset of the boolean and the compiler isn't able to narrow the type to just true since it doesn't know the exact type of it.

Example:
never is an empty set and the subsets of the boolean are true | false | never, since an empty set is also a subset. Thus, we can pass never to the function that expects a generic parameter that extends boolean:

  1. const func = &lt;T extends boolean&gt;() =&gt; {};
  3. type A = never extends boolean ? true : false; // true
  4. type B = boolean extends never ? true : false; // false
  6. func&lt;never&gt;() // no error
  7. func&lt;boolean&gt;() // no error
  8. func&lt;string&gt;() // error

答案2

得分: 0

You can translate the code comments and type annotations as follows:

  1. 您可以改为在`ComboBox`和`PropValue`上扩展`true | undefined`，而不是扩展`Boolean`，并使用默认类型`undefined`，这样您就不必传递`isMulti={undefined}`。
  2. 并且在`PropValue`中，您可以使用`NonNullable`来缩小范围，以检查它是否为`true`
  4. ```tsx
  5. import React from 'react';
  6. import Select from 'react-select';
  8. export interface Option<Value> {
  9.   readonly value: Value;
  10.   readonly label?: string;
  11.   readonly isDisabled?: boolean;
  12.   readonly isFixed?: boolean;
  13. }
  15. export type PropValue<
  16.   Value,
  17.   IsMulti extends true | undefined
  18.   //  ^^^^^^^^^^^^^^^^^^^^
  19. > = IsMulti extends NonNullable<IsMulti> ? Value[] : Value;
  20. //  ^^^^^^^^^^^^^^^^^^^^^^^^
  22. const ComboBox = <Value, IsMulti extends true | undefined = undefined>(props: {
  23.   //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  24.   value?: PropValue<Value, IsMulti>;
  25.   options: Option<Value>[];
  26.   isMulti?: IsMulti;
  27. }) => {
  28.   const { value, isMulti, options } = props;
  29.   const mapValue = (x?: PropValue<Value, IsMulti>) => {
  30.     if (!x) return undefined;
  31.     if (isMulti && Array.isArray(x)) {
  32.                 //  ^^^^^^^^^^^^^^^
  33.       return options.filter(({ value }) => x.includes(value));
  34.     }
  35.   };
  37.   return <Select value={mapValue(value)} isMulti={isMulti} />;
  38. };
  40. export const Test1 = () => {
  41.   return (
  42.     <ComboBox
  43.       value={1}
  44.       options={[
  45.         {
  46.           value: 1,
  47.           label: 'label 1',
  48.         },
  49.         {
  50.           value: 2,
  51.           label: 'label 2',
  52.         },
  53.         {
  54.           value: 3,
  55.           label: 'label 3',
  56.         },
  57.       ]}
  58.     />
  59.   );
  60. };
  62. export const Test2 = () => {
  63.   return (
  64.     <ComboBox
  65.       isMulti
  66.       value={[1, 2, 3]}
  67.       options={[
  68.         {
  69.           value: 1,
  70.           label: 'label 1',
  71.         },
  72.         {
  73.           value: 2,
  74.           label: 'label 2',
  75.         },
  76.         {
  77.           value: 3,
  78.           label: 'label 3',
  79.         },
  80.       ]}
  81.     />
  82.   );
  83. };

此外，用于props的联合类型也可以使用

  1. const ComboBox = <Value>(props: {
  2.   // ...
  3.   value: Value[];
  4.   isMulti: true;
  5. } | {
  6.   // ...
  7.   value: Value;
  8.   isMulti?: false;
  9. }) => {
  2. <details>
  3. <summary>英文:</summary>
  4. You can instead of extending `Boolean`, extend `true | undefined` on the `ComboBox` and `PropValue`, and a default type `undefined` so that you don&#39;t have to pass `isMulti={undefined}`
  5. And in the `PropValue` you can narrow it down using `NonNullable` to check if it&#39;s `true`
  6. ```tsx
  7. import React from &#39;react&#39;;
  8. import Select from &#39;react-select&#39;;
  9. export interface Option&lt;Value&gt; {
  10. readonly value: Value;
  11. readonly label?: string;
  12. readonly isDisabled?: boolean;
  13. readonly isFixed?: boolean;
  14. }
  15. export type PropValue&lt;
  16. Value,
  17. IsMulti extends true | undefined
  18. //  ^^^^^^^^^^^^^^^^^^^^
  19. &gt; = IsMulti extends NonNullable&lt;IsMulti&gt; ? Value[] : Value;
  20. //  ^^^^^^^^^^^^^^^^^^^^^^^^
  21. const ComboBox = &lt;Value, IsMulti extends true | undefined = undefined&gt;(props: {
  22. //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  23. value?: PropValue&lt;Value, IsMulti&gt;;
  24. options: Option&lt;Value&gt;[];
  25. isMulti?: IsMulti;
  26. }) =&gt; {
  27. const { value, isMulti, options } = props;
  28. const mapValue = (x?: PropValue&lt;Value, IsMulti&gt;) =&gt; {
  29. if (!x) return undefined;
  30. if (isMulti &amp;&amp; Array.isArray(x)) {
  31. //  ^^^^^^^^^^^^^^^
  32. return options.filter(({ value }) =&gt; x.includes(value));
  33. }
  34. };
  35. return &lt;Select value={mapValue(value)} isMulti={isMulti} /&gt;;
  36. };
  37. export const Test1 = () =&gt; {
  38. return (
  39. &lt;ComboBox
  40. value={1}
  41. options={[
  42. {
  43. value: 1,
  44. label: &#39;label 1&#39;,
  45. },
  46. {
  47. value: 2,
  48. label: &#39;label 2&#39;,
  49. },
  50. {
  51. value: 3,
  52. label: &#39;label 3&#39;,
  53. },
  54. ]}
  55. /&gt;
  56. );
  57. };
  58. export const Test2 = () =&gt; {
  59. return (
  60. &lt;ComboBox
  61. isMulti
  62. value={[1, 2, 3]}
  63. options={[
  64. {
  65. value: 1,
  66. label: &#39;label 1&#39;,
  67. },
  68. {
  69. value: 2,
  70. label: &#39;label 2&#39;,
  71. },
  72. {
  73. value: 3,
  74. label: &#39;label 3&#39;,
  75. },
  76. ]}
  77. /&gt;
  78. );
  79. };

Also, a union for props would work

  1. const ComboBox = &lt;Value,&gt;(props: {
  2.   // ...
  3.   value: Value[];
  4.   isMulti: true;
  5. } | {
  6.   // ...
  7.   value: Value;
  8.   isMulti?: false;
  9. }) =&gt; {

huangapple
  • 本文由 发表于 2023年7月4日 21:31:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76613171.html
  • conditional-types
  • narrowing
  • react-select
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定