An arrow function is concise JavaScript or TypeScript function syntax. It places input parameters before an arrow and the function result after it. The syntax is also called fat arrow syntax or lambda expression syntax. section 4.2.5
Use arrow functions to pass behavior or define short functions inline:
- Describe a function parameter with a type such as () => string: the function accepts no parameters and returns a string. section 4.2.5
- Pass a named function without parentheses when another function should invoke it later. section 4.2.5
- Use an inline arrow function such as () => "Paris" when the behavior is short and specific to the call. section 4.2.5
- Capture an accessible value in an arrow function, as in () => myCity, to defer producing that value until invocation. section 4.2.5
Supplying a city-producing function
function writeCity(f: () => string) { console.log(`City: ${f()}`); } writeCity(getUKCapital); writeCity(() => "Paris"); let myCity = "Rome"; writeCity(() => myCity); The first call supplies a named function and prints London. The second supplies an inline arrow function and prints Paris. The third uses a closure and prints Rome. Calling getUKCapital() instead would pass its result rather than the function itself, producing a type mismatch for writeCity. section 4.2.5
Filtering incomplete todo items
get itemCount(): number { return this.list.items .filter(item => !item.complete).length; } Here, item => !item.complete concisely expresses the filtering function: each item produces the Boolean result !item.complete. The resulting array length supplies the number of incomplete items. section 2.3.3
Listing 4.8. Defining an arrow function in the main.ts file in the src folder
function getUKCapital() : string {
return "London";
}
function writeCity(f: () => string) {
console.log(`City: ${f()}`)
}
writeCity(getUKCapital);
writeCity(() => "Paris");
Inspect a complete runnable example that passes both a named function and an inline arrow function to another function. section 4.2.5
