Quelle est la syntaxe des fonctions fléchées Typescript avec des génériques?

Le manuel dactylographié n'a actuellement rien sur les fonctions fléchées. Les fonctions normales peuvent être typées de manière générique avec cette syntaxe: exemple:

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

Quelle est la syntaxe des fonctions fléchées?

L'exemple complet expliquant la syntaxe référencée par Robin ... l'a ramené à la maison pour moi:

Fonctions génériques

Quelque chose comme ce qui suit fonctionne bien:

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

Cependant, l'utilisation d'une fonction générique de flèche ne:

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

Solution: utilisez étend le paramètre générique pour indiquer au compilateur qu'il s'agit d'un générique, par exemple:

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

J'ai trouvé l'exemple ci-dessus déroutant. J'utilise React et JSX donc je pense que cela a compliqué le scénario.

J'ai obtenu des éclaircissements de TypeScript Deep Dive , qui indique pour les génériques de flèche:

Solution de contournement: utilisez étend le paramètre générique pour indiquer au compilateur qu'il s'agit d'un générique, cela provient d'un exemple plus simple qui m'a aidé.

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

Si vous êtes dans un .tsxfichier, vous ne pouvez pas simplement écrire <T>, mais cela fonctionne:

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

Contrairement au extends {}hack, ce hack préserve au moins l'intention.

La spécification du langage dit à la p.64f

Une construction de la forme <T> (...) => {...} pourrait être analysée comme une expression de fonction de flèche avec un paramètre de type ou une assertion de type appliquée à une fonction de flèche sans paramètre de type. Il est résolu comme l'ancien [..]

exemple:

// 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})
               });
           };

Cela fonctionne pour moi

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

alors que la réponse populaire avec extends {}fonctionne et vaut mieux que extends any, elle oblige Tà être un objet

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

pour éviter cela et préserver la sécurité de type, vous pouvez utiliser à la extends unknownplace

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

J'utilise ce type de déclaration:

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

Il permet de définir des accessoires supplémentaires pour votre fonction si jamais vous en avez besoin et dans certains cas, cela aide à garder le corps de la fonction plus propre de la définition générique.

Si vous n'avez pas besoin des accessoires supplémentaires (une sorte d'espace de noms), cela peut être simplifié en:

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

si tard, mais avec ES6 pas besoin d'étendre cela fonctionne toujours pour moi .... :)

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)