Type information specifies the kinds of values that variables, parameters, expressions, or return values may contain. In TypeScript, annotations give the checker enough information to validate function calls and implementations, while inference supplies types that are already evident. section 5.2.2
Function parameters are a common boundary where annotations matter. Without types, TypeScript cannot reliably infer a function's return type and may report implicit any. Adding number annotations makes invalid calls fail while allowing valid results and downstream variables to be inferred. section 5.2.2
Use explicit type information selectively:
- Annotate function arguments when their types are not available from context. section 5.2.2
- Let TypeScript infer literals, arithmetic results, built-in method results, and values returned by typed functions. section 5.2.2
- Represent alternatives with unions, such as null|string, and restrict fixed states with literal unions such as LOADING|SUCCESS|ERROR. section 5.2.2
- Describe React component props with either a type alias or interface, including optional properties and defaults. section 5.2.2
Typed memoized React callback
When a callback moves outside an inline rendering context to support useCallback, contextual inference is lost. Annotate its curried arguments directly: (index: number) => (evt: MouseEvent<HTMLButtonElement>) => void. Equivalent placements include a useCallback type argument or an explicit target-variable type. The playlist example uses this callback to dispatch typed reorder actions while memoizing the handler. section 6.1.6
function fibonacci(a:number, b:number) {
return a + b;
}
Compare an untyped Fibonacci function with explicit number annotations, then inspect the resulting call-site validation. section 5.2.2
Listing 6.6 The playlist with a memoized callback
import { useReorderable } from "./useReorderable";
import "./playlist.css";
import { ActionType, Song } from "./types";
import { PlaylistItem } from "./PlaylistItem";
import { MouseEvent, useCallback } from "react";
interface PlaylistProps {
songs: Song[];
}
export function Playlist({ songs }: PlaylistProps) {
const [list, dispatch] = useReorderable(songs);
const handleMove = useCallback(
(index: number) => #1
(evt: MouseEvent<HTMLButtonElement>) => { #1
const type = evt.currentTarget.name as ActionType;
dispatch({ type, index });
},
[dispatch]
);
return (
<ol>
{list.map((song, index) => (
<PlaylistItem
key={song.id}
song={song}
index={index}
move={handleMove}
/>
))}
</ol>
);
}
Inspect a memoized React callback whose nested event-handler and index types preserve the playlist component's contract. section 6.1.6
