使用泛型的Typescript箭头函数的语法是什么?

时间:2015-08-31 09:46:38

标签: typescript

打字稿手册目前在箭头功能上没有任何内容。正常功能 可以使用以下语法进行泛型输入: 例如:

function identity<T>(arg: T): T {
    return arg;
}

箭头功能的语法是什么?

12 个答案:

答案 0 :(得分:71)

解释语法referenced by Robin的完整示例......将它带回家:

通用功能

以下工作正常:

function foo<T>(x: T): T { return x; }

但是使用箭头通用函数不会:

const foo = <T>(x: T) => x; // ERROR : unclosed `T` tag

解决方法:对generic参数使用extends来提示编译器 它是通用的,例如:

const foo = <T extends {}>(x: T) => x;

答案 1 :(得分:33)

我发现上面的例子令人困惑。 我正在使用React和JSX,所以我认为它使情况变得复杂。

我得到了澄清。 https://basarat.gitbooks.io/typescript/content/docs/types/generics.html

箭头泛型的哪些状态:解决方法:使用扩展泛型参数来提示编译器它是通用的,这来自 一个帮助我的简单例子。

const identity = < T extends {} >(arg: T): T => { return arg; }

答案 2 :(得分:28)

语言规范在p.64f上说明

  

形式的构造&lt; T> (...)=&gt; {...}可以解析为   带有类型参数或类型断言的箭头函数表达式   应用于没有类型参数的箭头函数。它被解决为   前[...]

示例:

// helper function needed because Backbone-couchdb's sync does not return a jqxhr
let fetched = <
           R extends Backbone.Collection<any> >(c:R) => {
               return new Promise(function (fulfill, reject) {
                   c.fetch({reset: true, success: fulfill, error: reject})
               });
           };

答案 3 :(得分:5)

我要使用这种类型的声明:

const identity: { <T>(arg: T): T } = (arg) => arg;

它允许在需要时为函数定义其他道具,在某些情况下,还可以使函数体与泛型定义保持一致。

如果您不需要其他道具(诸如名称空间之类的东西),可以将其简化为:

const identity: <T>(arg: T) => T = (arg) => arg;

答案 4 :(得分:5)

这么晚了,但是使用ES6不需要扩展它仍然对我有用....:)

let getArray = <T>(items: T[]): T[] => {
    return new Array<T>().concat(items)
}

let myNumArr = getArray<number>([100, 200, 300]);
let myStrArr = getArray<string>(["Hello", "World"]);
myNumArr.push(1)
console.log(myNumArr)

答案 5 :(得分:2)

这对我有用

const Generic = <T> (value: T) => {
    return value;
} 

答案 6 :(得分:2)

extends {}的流行答案虽然有效并且比extends any更好,但它迫使T成为对象

const foo = <T extends {}>(x: T) => x;

为避免这种情况并保留类型安全性,可以改用extends unknown

const foo = <T extends unknown>(x: T) => x;

答案 7 :(得分:1)

2021 年,Ts 4.3.3

const useRequest = <DataType, ErrorType>(url: string): Response<DataType, ErrorType> 
   => {
      ...
   }

答案 8 :(得分:0)

如果您使用的是.tsx文件,则不能只写<T>,但这可以做到:

const foo = <T, >(x: T) => x;

extends {} hack相对,此hack至少保留了意图。

答案 9 :(得分:0)

enter image description here

当您尝试将 null 作为参数传递时,使用 会引发错误。我更喜欢使用 因为它可以解决问题。我还没有得到原因。但这对我有用。

enter image description here

答案 10 :(得分:0)

这对我有用

 const logSomething = <T>(something:T): T => {
       return something;
    }

答案 11 :(得分:-3)

如果您想通过异步方式做到这一点:

const request = async <T>(param1: string, param2: number) => {
  const res = await func();
  return res.response() as T;
}

还有一个更复杂的模式,以防您想将函数包装在通用副本中,例如备忘录(Example uses fast-memoize):

const request = memoize(
  async <T>(
    url: string,
    token?: string
  ) => {
    // Perform your code here
  }
);

了解如何在备忘录功能后定义