What is the syntax for Typescript arrow functions with generics

Question

The typescript handbook currently has nothing on arrow functions  Normal functions can be generically typed with this syntax  example   function identity lt T gt  arg  T   T       return arg      What is the syntax for arrow functions

User · Answer

I found the example above confusing  I am using React and JSX so I think it complicated the scenario   I got clarification from TypeScript Deep Dive  which states for arrow generics   Workaround  Use extends on the generic parameter to hint the compiler that it s a generic  this came from a simpler example that helped me       const identity    lt  T extends     gt  arg  T   T   gt    return arg

User · Answer

If you re in a  tsx file you cannot just write  lt T gt   but this works   const foo    lt T   gt  x  T    gt  x    As opposed to the extends    hack  this hack at least preserves the intent

User · Answer

The full example explaining the syntax referenced by Robin    brought it home for me  Generic functions Something like the following works fine  function foo lt T gt  x  T   T   return x     However using an arrow generic function will not  const foo    lt T gt  x  T    gt  x     ERROR   unclosed  T  tag  Workaround  Use extends on the generic parameter to hint the compiler that it s a generic  e g   const foo    lt T extends unknown gt  x  T    gt  x

User · Answer

The language specification says on p 64f     A construct of the form  lt  T                      could be parsed as an   arrow function expression with a type parameter or a type assertion   applied to an arrow function with no type parameter  It is resolved as   the former       example      helper function needed because Backbone-couchdb s sync does not return a jqxhr let fetched    lt             R extends Backbone Collection lt any gt   gt  c R    gt                   return new Promise function  fulfill  reject                       c fetch  reset  true  success  fulfill  error  reject

User · Answer

I to use this type of declaration   const identity     lt T gt  arg  T   T      arg    gt  arg    It allows defining additional props to your function if you ever need to and in some cases  it helps keeping the function body cleaner from the generic definition   If you don t need the additional props  namespace sort of thing   it can be simplified to   const identity   lt T gt  arg  T    gt  T    arg    gt  arg

User · Answer

This works for me  const Generic    lt T gt   value  T    gt        return value

User · Answer

In case you d like to do it with async  const request   async  lt T gt  param1  string  param2  number    gt      const res   await func      return res response   as T     And a more complex pattern  in case you d like to wrap your function inside a generic counterpart  such as memoization  Example uses fast-memoize   const request   memoize    async  lt T gt       url  string      token   string       gt           Perform your code here         See how you define the generic after the memoizing function

User · Answer

while the popular answer with extends    works and is better than extends any  it forces the T to be an object  const foo    lt T extends    gt  x  T    gt  x    to avoid this and preserve the type-safety  you can use extends unknown instead  const foo    lt T extends unknown gt  x  T    gt  x

User · Answer

so late  but with ES6 no need extends it still work for me         let getArray    lt T gt  items  T     T     gt        return new Array lt T gt    concat items     let myNumArr   getArray lt number gt   100  200  300    let myStrArr   getArray lt string gt    Hello    World     myNumArr push 1  console log myNumArr

[typescript] What is the syntax for Typescript arrow functions with generics?

Examples related to typescript