Question

在TypeScript中，以下是否可以使用useContext从Provider中选择并返回值类型？

const taggedItems = [tag1, tag2, tag3, tag4];
/*
    assuming each item has this internal structure:
    {start: Number, end: Number}
*/

const overlapItems = [];

// sort and iterate tagged items
taggedItems
.sort((entryA,entryB) => entryA.start - entryB.start)
.forEach((entry,index) => {
  if(!index){
    continue;
  }
  // check for overlap

  if(checkOverlap(entry, taggedItems[index - 1])){
    if(!overlapItems.length){
      overlap.push([entry, taggedItems[index - 1]]);
      // check last overlap item
    } else {
      const lastOverlap = overlapItems[overlapItems.length -1];
      const lastOverlapEntry = lastOverlap[lastOverlap.length - 1];
      if(checkOverlap(entry, lastOverlapEntry)) {
        lastOverlap.push(entry);
      } else {
        overlapItems.push([entry, taggedItems[index - 1]]);
      }
    }
  }
});

function checkOverlap(entryA, entryB) {
    const partialOverlap = entryA.end < entryB.start;
    const fullOverlap = entryA.start === entryB.start && entryA.end === entryB.end;
    return partialOverlap || fullOverlap;
}

“消费者”将返回类型：数字，按如下方式使用

function Provider<Props = {value: number}>(props: Props) { }
function useContext<Value>(context: Context<Value>): Pick<Value, 'value'> { return 0 }

...有关其他上下文：

function Consumer<Props>(props: Props) { return useContext(Provider) }

或者给定

interface Component<Props = {}> { (props: Properties<Props>): Node }
interface Context<Value> extends Component<{value: Value}> {}

假设函数“ h”返回一个接口，如何将常量“值”赋予对象{value：'value'}中的“值”：

function Provider({value, children}: {value: string, children: any}) {
  return h(Context, {value: 'value'}, children)
}

const value = useContext(Provider)

我尝试选择“道具”，其中“类型”是“提供者”，然后从该选择的结果中选择道具，“>”，“值”>。

但是那似乎没有用。

Answer 1

有一种提取属性类型的好方法，称为“ lookup types”（TypeScript 2.1 Notes）。语法为：

MyType['value'] // number

MyType包含属性value: number的地方。

编辑：我在遵循您的示例时遇到了麻烦，我尝试扩展useContext's 'context'参数并得到以下结果：

   function useContext<Value>(context: Context<Value>): Pick<Value, 'value'>;
=> function useContext<Value>(context: Component<{value: Value}>): Pick<Value, 'value'>
=> function useContext<Value>(context: (props: Properties<{value: Value}>) => Node): Pick<Value, 'value'>

如果我们将Value类型跟随到第三个扩展，我们将看到没有约束；没有任何内容告诉编译器Value类型必须具有'value'属性。 Typescript编译器基于useContext(...)从Value["value"]返回类型的唯一方法是，是否存在某种约束告诉编译器该类型上存在'value'。

一个选项，如果您向<Props extends {value: number} = {value: number}>和Component添加类型约束Provider，则编译器将能够推断props具有'value'属性

另一个选择，使用keyof并传入密钥文字字符串（添加了'key'参数，并将返回类型更改为Pick<Value, K>），明确告诉编译器您已经知道存在的属性： / p>

function useContext<Value, K extends keyof Value>(context: Context<Value>, key: K): Pick<Value, K> {
  // ...
}

var value = useContext(Provider, 'value');

从函数参数中选择打字稿

1 个答案: