Edit
Per @Thomas comment, in newer TS compilers, we can simply do:
const foo = <T,>(x: T) => x;
Original 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<T>(x: T): T { return x; }
However using an arrow generic function will not:
const foo = <T>(x: T) => 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 = <T extends unknown>(x: T) => x;
Top answer 1 of 16
1180
Edit
Per @Thomas comment, in newer TS compilers, we can simply do:
const foo = <T,>(x: T) => x;
Original 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<T>(x: T): T { return x; }
However using an arrow generic function will not:
const foo = <T>(x: T) => 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 = <T extends unknown>(x: T) => x;
2 of 16
364
If you're in a .tsx file you cannot just write <T>, but this works:
const foo = <T, >(x: T) => x;
As opposed to the extends {} hack, this hack at least preserves the intent.
typescriptlang.org
typescriptlang.org › docs › handbook › 2 › functions.html
TypeScript: Documentation - More on Functions
They’re also values, and just like other values, TypeScript has many ways to describe how functions can be called. Let’s learn about how to write types that describe functions. The simplest way to describe a function is with a function type expression. These types are syntactically similar to arrow functions: ... The syntax (a: string) => void means “a function with one parameter, named a, of type string, that doesn’t have a return value”. Just like with function declarations, if a parameter type isn’t specified, it’s implicitly any.
Specify return type in TypeScript arrow function - Stack Overflow
I am using React and Redux and have action types specified as interfaces, so that my reducers can take advantage of tagged union types for improved type safety. So, I have type declarations that l... More on stackoverflow.com
Type for parameter in TypeScript Arrow Function - Stack Overflow
After some searching I found the ... for the parameter is to add parentheses: ... Find the answer to your question by asking. Ask question ... See similar questions with these tags. ... 1124 Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type · 1315 How do you explicitly set a new property on `window` in TypeScript... More on stackoverflow.com
is it possible to type a named function the way a arrow function is typed?
Not ideal solution, but this is how I deal with it: type Fn = (arg: number)=> string; const myFn: Fn = function myFn(arg) { return String(arg); } The reason for duplicating the "myFn" is to assign a name to the function so that you get a name in your stack traces. More on reddit.com
14
4
December 8, 2023[AskJS] why are arrow functions used so universally nowdays? What's the benefit over named functions/function keyword?
I've done loads of JavaScript interviews, and many people simply don't know the difference between the function types. To them, arrow functions are the "new way", and the other way is the "old way", and that's that. The answer could be that simple. Leaving this link here for anyone wondering. More on reddit.com
178
320
June 2, 2021Videos
Tutorial Teacher
tutorialsteacher.com › typescript › arrow-function
TypeScript Arrow Functions
In the above example, sum is an arrow function. (x:number, y:number) denotes the parameter types, :number specifies the return type. The fat arrow => separates the function parameters and the function body.
GeeksforGeeks
geeksforgeeks.org › typescript › explain-the-arrow-function-syntax-in-typescript
Explain the arrow function syntax in TypeScript - GeeksforGeeks
September 11, 2025 - function_name: The name of the variable holding the arrow function. parameter_1: data_type: Function parameter with its type annotation.
Top answer 1 of 5
281
First, consider the following notation from your original question:
export const addTodo3 = (text: string) => <AddTodoAction>({
type: "ADD_TODO",
text
})
Using this notation, you typecast the returned object to the type AddTodoAction. However, the function's declared return type is still undefined (and the compiler will implicitly assume any as return type).
Use the following notation instead:
export const addTodo3 = (text: string): AddTodoAction => ({
type: "ADD_TODO",
text: text
})
In this case, omitting a required property will yield the expected compiler error. For example, omitting the text property will generate the following (desired) error:
Type '{ type: "ADD_TODO"; }' is not assignable to type 'TodoAction'.
Type '{ type: "ADD_TODO"; }' is not assignable to type 'DeleteTodoAction'.
Types of property 'type' are incompatible.
Type '"ADD_TODO"' is not assignable to type '"DELETE_TODO"'.
Also see the playground example.
2 of 5
10
There are 2 ways of achieving this with proper typing and minimal code:
interface AddTodoAction {
type: "ADD_TODO",
text: string
};
// Because the this keyword works different in arrow functions these
// 2 implementations are different in some cases:
// arrow function form/ function expression
const addTodo1 = (text: string): AddTodoAction => ({
type: "ADD_TODO",
text: text
})
// function declaration form
function addTodo2 (text: string): AddTodoAction {
return ({
type: "ADD_TODO",
text: text
})
}
Now the TS compiler can check the returned types. For example:
const todo = addTodo1('hi');
// Following gives TS compile time error
// addTodo1 returns AddTodoAction which does not have id on the type
const id = todo.id // Property 'id' does not exist on type 'AddTodoAction'.
Convex
convex.dev › core concepts › functions & methods › arrow
Arrow | TypeScript Guide by Convex
You can also combine arrow functions with custom function helpers to create reusable typed function templates. When working with multiple operations, you might use TypeScript generics to make your function interfaces more flexible: Arrow functions let you write less code when you don't need all the ceremony of a full function. Here's how to make them even more concise: // Single parameter - you can skip the parentheses const double = n => n * 2; // But TypeScript needs parentheses for type annotations const doubleTyped = (n: number) => n * 2; // No parameters - parentheses are required const g
Scaler
scaler.com › home › topics › typescript › working with arrow functions
TypeScript Arrow function - Scaler Topics
May 4, 2023 - The following program is an example of an arrow function with a parameter: ... In the above program, the result is an arrow function the variables num1 and num2 with the type number are the parameter types, then the number after the parameters is the return type of the variables, then the (=>) fat arrow or arrow notation separates the function parameters and the function body.
CodeSignal
codesignal.com › learn › courses › learning-functions-using-typescript › lessons › understanding-arrow-functions
Understanding Arrow Functions | CodeSignal Learn
Here, we define a function with ... come after the required parameters. ... Arrow functions in TypeScript introduce a concise syntax for writing functions, focusing on simplifying function expressions....
Dyclassroom
dyclassroom.com › typescript › typescript-arrow-functions
TypeScript - Arrow Functions - TypeScript - dyclassroom | Have fun learning :-)
Following is the syntax of an arrow function having some parameters and returning some value. (v1: type, v2: type, ...): type => { return expr; }
Javatpoint
javatpoint.com › typescript-arrow-function
TypeScript Arrow function - javatpoint
TypeScript We know that JavaScript is not a typed language so we cannot specify the type of a variable such as a number, string, Boolean in JavaScript. However, in TypeScript, we can specify the type of variables, function parameters, and object properties because TypeScript is a...
Bobby Hadz
bobbyhadz.com › blog › typescript-arrow-function-return-type
Set the return type of an arrow function in TypeScript | bobbyhadz
The first example shows how to specify the return type of an arrow function. The greet function takes a single parameter of type string and returns a value of type string.
TutorialsPoint
tutorialspoint.com › typescript › typescript_arrow_functions.htm
TypeScript - Arrow Functions
Parameters − A function may optionally have parameters, param1, param2, ..., paramN. The fat arrow notation/lambda notation (=>) − It is also called as the goes to operator. Statements − represent the functions instruction set · Let's ...
Tim Mousk
timmousk.com › blog › typescript-arrow-function-generic
How To Make An Arrow Function Generic In TypeScript? – Tim Mouskhelichvili
March 6, 2023 - To make an arrow function generic, you must pass a generic argument before the function parameters. Let's see this with an example. We have a small function called getValue that accepts a number and outputs it: typescriptconst output = (value: number): void => { console.log(value); }; // Outputs: 2 output(2); This function only accepts numbers, but what if we want it to accept other types?
Medium
medium.com › @szaranger › how-to-use-generics-with-arrow-functions-in-typescript-38be8fb6b175
How to use Generics with Arrow functions in TypeScript | by Sean Amarasinghe | Medium
June 5, 2024 - const identity = <T>(value: T): T => value; const id1 = identity('134256734'); const id2 = identity(134256734); typeof id1; // 👉🏻 string typeof id2; // 👉🏻 number · 💡 The generics are specified right before the function’s parameters using arrow brackets. The syntax for calling a generic function is the same. We don’t have to explicitly provide the generic when calling the function. TypeScript would be able to infer the type of the generic based on the type of the passed in argument.
Reddit
reddit.com › r/typescript › is it possible to type a named function the way a arrow function is typed?
r/typescript on Reddit: is it possible to type a named function the way a arrow function is typed?
December 8, 2023 -
Hi all,
I recently was looking at the Sveltekit hooks documentation and noticed that they write their functions in both arrow functions and named functions.
What made me boggle my brain for a moment is that their arrow functions had a typed argument, while a named function did not (and resulted in red squigglies in IDE). When it dawned on me that it was not the arrow function that was typed but the constvariable, it made me think of how one would implement the same as a named function. So far I only came up with the idea to type the arguments, and the return value (or have it inferred).
tldr: is it possible to type a named function (without adding type info individually to the arguments and return value(?
type MyFnArgs = { myNum: number, myString: string }
type MyFnReturnValue = void
type MyFn = ({ myNum, myString }: MyFnArgs) => MyFnReturnValue
const myArrowFn: MyFn = ({ myNum, myString }) => {
console.log("arrow function with typed args")
}
function myNamedFn({ myNum, myString }) {
console.log("named function with UNtyped args")
}
function myTypedNamedFn({ myNum, myString }: MyFnArgs): MyFnReturnValue /* could be inferred */ {
console.log("named function with typed args")
}https://www.typescriptlang.org/play?#code/C4TwDgpgBAsiBiA7AggJwOYGcoF4oG8oBbEAOQFciAuKRSgIwlQBpiQBlYVAS0XRsxde6KAF8AUKEiwEiAEoRg5VIgBqAQwA25aHgBuAe24ATcZPDQ4SXFAAUhEhSKsSnHnzE0rKDJgCUuAB8MkgKSioa2hBmAMYGiIJsaKgGAO5IXrI29mxOLhxCHqIBOMH44lBQcQkGmhAAdJoG6LYAROqoKalQAGbkiDHA3PFQqdzAABZQUhDGUB1YrX7iEuJ9A0MjjupEs0g5jpT5bsJiAeWV1Zi1DU0trYg7s739g8OIo+NTAKqkM3MLTBLFZmdZvLYgAAqFmMpCexn2DjIRzYJyKmSQaCwfgx8kUyjUWh0UAA9AAqKoGciaOaMKC8HpMVDPMkkggVSk1OqNZptR67OZgzYfMaTaYw+a+YGiIA
Top answer 1 of 5
8
One thing I’ve done to my ensure a named function satisfies a type signature is function foo(arg: string) { return 42 } foo satisfies MyFnType
2 of 5
6
Not ideal solution, but this is how I deal with it: type Fn = (arg: number)=> string; const myFn: Fn = function myFn(arg) { return String(arg); } The reason for duplicating the "myFn" is to assign a name to the function so that you get a name in your stack traces.
Bobby Hadz
bobbyhadz.com › blog › typescript-arrow-function-generic
Using generics in Arrow functions in TypeScript | bobbyhadz
You can use a generic in an arrow function by setting it right before the function's parameters. The generic can be passed when the function is invoked.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Functions › Arrow_functions
Arrow function expressions - JavaScript - MDN Web Docs
February 21, 2026 - You can also put line breaks between parameters. ... const func = (a, b, c) => 1; const func2 = (a, b, c) => ( 1 ); const func3 = (a, b, c) => { return 1; }; const func4 = ( a, b, c, ) => 1; Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.
Graphite
graphite.com › guides › typescript-function-types
TypeScript function types
This defines an arrow function divide that takes two number arguments and returns a number. You can also define function types using interfaces. This is useful when working with objects that have distinct methods: ... Here, Comparator is an ...