When learning TypeScript it can seem verbose and confusing—if applied to the extreme. Take for instance a simple add function...
In JavaScript:
function add(x, y) {
return x + y;
};
// or as function expression
let add = function (x, y) {
return x + y;
};
// or with ES6 fat-arrow
let add = (x, y) => x + y;
In TypeScript, one could define types in several ways:
function add(x: number, y: number): number {
return x + y;
};
// or as function expression (type inferred on the _left_ operand)
let add = function (x: number, y: number): number {
return x + y;
};
// or as function expression (type inferred on the _right_ operand)
let add: (x: number, y: number) => number = function (x, y) {
return x + y;
};
// or as function expression (explicitly and somewhat redundantly)
let add: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
};
// or with ES6 fat-arrow (inference on left)
let add = (x: number, y: number): number => x + y;
// or with ES6 fat-arrow (inference on right)
let add: (x: number, y: number) => number = (x, y) => x + y;
// or with ES6 fat-arrow (😳)
let add: (x: number, y: number) => number = (x: number, y: number): number => x + y;
Yikes! And that's with a really simple, pure function!
But really, we could narrow the types (by using const) and also let TS infer as much as possible:
function add(x: number, y: number) {
return x + y;
};
// Inferred type is function add(x: number, y: number): number
const add = (x: number, y: number) => x + y;
// Inferred type is let add: (x: number, y: number) => number
All the same type safety, but with minimal verbosity! FTW.
Top comments (0)