Reference · pin this next to your editor
Reading TS syntax — the : / => decoder
Two worlds, two symbols. Find the world first; the meaning follows.
The two worlds
| world | you’re here when… | survives runtime? |
|---|
| type | after a : · inside type/interface · inside generic <…> | no — erased |
| value | after a = · being returned · passed as an argument | yes — real JS |
Maxim: after : and before = = type. After = = value.
(The type/interface keywords also put you in type world.)
The : — three jobs by position
| position | meaning | example |
|---|
| after a param name | parameter type | f(x: string) |
after the param list ) | return type | f(): number |
| after a var / prop name | that var/prop’s type | const u: User |
The => — two jobs by world
| world | meaning | right side is… |
|---|
| type | function type | the return type |
| value | arrow function | the body |
Worked decodings
// 1) variable holding a function — type then value
const add: (a: number, b: number) => number = (a, b) => a + b;
// └ type: a function type ┘ └ value: arrow fn ┘
// (=> ⇒ return type number) (=> ⇒ body a+b)
// 2) function declaration — return type rides after the :
function greet(name: string): string { ... }
// ^ return type
// 3) pure type, erased
let make: () => { x: number }; // ⇒ compiles to: let make;
// 4) interface method — the => is a TYPE (no body allowed)
interface Store { get: (id: string) => Item; }
The 3-second check
- After
: / in type/interface/<…>? → type world; a => is a function type.
- After
= / returned / passed as arg? → value world; a => is an arrow function.
Terminology (used interchangeably in the wild)
| term | means |
|---|
| type annotation | the explicit syntax you write after : |
| type information | any type the compiler knows — written or inferred |
| type definition | a named type you declare (type/interface) or a .d.ts declaration |