Lesson 11 · Ecosystem

Where the type goes (TypeScript syntax)

When a colon, when <…>, when nothing. The anatomy of the syntax, a cheat sheet of situations and a fill-in exercise.

Before we start: labels on moving boxes

When you move house, you stick labels on the boxes: "kitchen – glass", "books", "winter clothes". The boxes themselves don't care about the label – the things inside are still the same. But the movers can tell from the labels what mustn't go under heavy books and where to take what. And once everything is unpacked, you peel off the labels and throw them away.

TypeScript is labels on JavaScript. You stick them on variables, parameters and properties: "there's a number here", "there's a user or nothing here". The code doesn't work any differently because of them – but the editor and the compiler can tell from them when you try to put glass under books (pass text where a number should be). And when compiling, all the labels are peeled off: the browser gets clean JavaScript.

This lesson isn't about which labels exist, but where they're stuck: when a colon, when <…> and when nothing. Once you have that down, the following lesson on TypeScript in React will be a piece of cake.

See-through and opaque boxes

A see-through box doesn't need a label – you can see what's in it. In the same way, with const count = 0 TypeScript sees the zero and knows by itself it's a number. This is called type inference. You have to stick a label where you can't see inside: on an empty box (an empty array), on a box that's still standing empty for now (null), or on a box that's only on its way (a function parameter, data from an API).

1. One main rule

The second thing worth knowing: types disappear after compiling – the labels are peeled off. When you mentally erase all the types from the code, valid JavaScript must remain. That's the best test of whether a type is in the right place.

Let's try it on a typical function:

function formatPrice(amount: number, currency?: string): string {
  return amount + ' ' + (currency ?? 'USD')
}

amount: number – the parameter amount is of type number. Name, colon, type.
currency?: string – the question mark belongs to the name: the parameter is optional. Inside the function it can be undefined, hence ?? 'USD'.
): string – a colon after the parameter brackets is the type of what the function returns. The same rule, only this time the "name" is the whole function call.

Now let's peel the labels off:

function formatPrice(amount, currency) {
  return amount + ' ' + (currency ?? 'USD')
}

Valid JavaScript remains. If it didn't – say if ({ title: string }) left behind something that does a different thing – the type was in the wrong place. We'll get to that in the next section.

Demo

The anatomy of a line – click parts of the code

What you see: Several typical lines with types. Each piece is coloured: purple for a type, orange for TypeScript syntax (colons, question marks, brackets), normal for plain JavaScript. Underlined pieces have an explanation.

Try it:

In the Variable example, click price, the colon and number in turn. Under the code you'll see what each piece means.
Switch to Function and find two colons: one at a parameter, the other after the bracket. Click both and compare the explanations.
Go through Component props and useState. For each one, mentally erase the purple and orange parts – valid JavaScript always remains.

The takeaway: A type is always a label stuck on a specific place, most often after a colon. Without it, JavaScript remains that does the same thing.

Loading the interactive part…

2. Where the colon goes and where it doesn't

The colon exists in JavaScript even without TypeScript – in objects it separates the key and the value, in destructuring it renames. That's why it's the most common source of confusion: the same character, three different meanings. It helps to ask: is the colon after something I'm declaring right now? Then it's a label.

Place	Syntax	Note
A variable	`let name: string`	Only when TS doesn’t infer the type from the value.
A parameter	`(name: string) => …`	Always.
An optional parameter / property	`name?: string`	The question mark belongs to the name.
A return value	`function f(): string`	After `)`, in an arrow function before `=>`.
A property in an interface / type	`{ name: string }`	Describing the shape of an object.
Component props	`({ name }: Props)`	After the whole destructuring!

There is NO colon here	Syntax	Why
A type definition	`type Id = string \| number`	You’re naming a type → an equals sign.
An interface definition	`interface User { … }`	Keyword + name + body.
A type for a function/hook	`useState<User \| null>(null)`	The type is PASSED to the function in angle brackets.
An object with values	`{ name: 'Anna' }`	Here the colon separates the key and the VALUE.
JSX	`<Card title="Hello" />`	No types in JSX – TS checks them against the props.
Destructuring	`{ title: heading }`	Here the colon means RENAMING the variable.

3. When to write a type and when not to

Back to the boxes. You stick a label where you can't see inside, and on boxes that arrive from outside. You don't stick one on a see-through box – you'd only add work and the risk that the label won't match the contents.

// See-through boxes – TS sees inside, don't write a label
const count = 0                           // number
const names = ['Anna', 'Peter']           // string[]
const [open, setOpen] = useState(false)   // boolean

// Boxes arriving from outside – always write a label
function greet(name: string) { … }        // a parameter: who knows what someone will send here
interface CardProps { title: string }     // props: the same for components

// Opaque boxes – TS can't see inside, add a label
const [user, setUser] = useState<User | null>(null)  // null now, a User later
const [todos, setTodos] = useState<Todo[]>([])       // an empty array – of what items?

A simple rule: write types at the boundaries – where data comes in (parameters, props, APIs) or where TS has nothing to work out the type from. Inside functions, let it do its work.

✅ Always write	🤔 Write when TS doesn’t infer	🚫 Don’t write (unnecessary)
Function parameters	`useState<User \| null>(null)`	`const x: number = 5`
Component props (interface)	`useState<Todo[]>([])`	`useState<number>(0)`
Data shapes (interface User)	`useRef<HTMLDivElement>(null)`	Parameters of inline handlers in JSX
The type of a context value	Standalone event handlers	Callback parameters (`.map(item => …)`)
Public library functions / utils	[object Object] assigned later	The return type of simple functions

4. A cheat sheet: I want to type…

A cheat sheet for the situations you'll meet most often. Use it like a cookbook: find what you're writing right now and look up where the label goes.

Demo

Pick a situation

What you see: Buttons with typical situations, split into plain JavaScript and React. For each situation there's the right syntax, the most common mistake and a short explanation.

Try it:

Click component props. Notice the mistake { title: string } inside the brackets – you'll see it in the quiz in a moment too.
Go through useState and useRef. In both the label is in angle brackets – the type is passed to the hook, not stuck after a colon.
Look at an error in catch and data from an API. These are boxes that arrived from outside and you don't know what's in them.

The takeaway: Most situations repeat. Once you've looked them up in the cheat sheet a few times, you'll start writing labels in the right places automatically.

Loading the interactive part…

5. A glossary of symbols

Symbol	Example	Meaning
`:`	`age: number`	"is of type"
`?`	`age?: number`	optional (can be missing / undefined)
`\|`	`string \| null`	"or" – a union
`&`	`A & B`	"and at the same time" – combining types
`[]`	`string[]`	an array
`[A, B]`	`[string, number]`	a tuple – an array with a fixed length
`=>`	`(id: number) => void`	a function type
`<T>`	`Array<User>`	a generic – a type as a parameter
`as`	`data as User`	"trust me" – a cast without a check (use sparingly)
`as const`	`['a', 'b'] as const`	the most precise (readonly) type possible
`!`	`ref.current!`	"definitely not null" – without a check
`typeof`	`typeof config`	a type from an existing value
`keyof`	`keyof User`	a union of property names: "name" \| "age"

What does <T extends { id: number }> mean (the findById challenge)?

<T> on its own means "any type". But then TypeScript wouldn't let you write item.id, because it doesn't know whether T has an id. extends adds a condition: "T can be anything that has at least an id property of type number".

function findById<T extends { id: number }>(items: T[], id: number): T | undefined {
  return items.find((item) => item.id === id)   // ✅ item.id exists, because T must have it
}

findById(products, 1)        // T = Product – returns Product | undefined
findById(users, 1)           // T = User
findById(['a', 'b'], 1)      // ❌ a string has no id

The result remembers the exact type: from findById(products, 1) you get a Product with all its properties, not just { id: number }. The word extends here doesn't mean inheritance as with classes – read it as "satisfies".

6. How the editor helps you

Hovering shows the inferred type of anything.
Ctrl + Space in a component's props offers all the allowed props.
F12 on a type (say ChangeEvent) jumps to its definition.
Ctrl + . (Quick Fix) on a parameter with any offers "Infer parameter types from usage".
Read error messages from the bottom. The last line of a long error tends to be the important one ("Property 'email' is missing…").

Practise: a fill-in exercise

Fill in the boxes with what belongs there – a type, a symbol, or nothing. Each exercise trains one place where a label goes. Remember the see-through boxes: sometimes the right answer is to leave the box empty.

Tip: an empty box means "I write nothing here" – that can be the right answer too. Enter = check.Solved 0 / 16

1. A function parameter

function double(n) {
  return n * 2
}

2. A return value

function greet(name: string) {
  return 'Hello ' + name
}

3. An optional parameter

function greet(name: string, excited boolean) {
  return excited ? name + '!' : name
}

4. The shape of an object

interface User {
  name string
  age number     // optional
}

5. A value vs. a type

interface User { name: string }

const anna: User = { name:  }

6. A type as a union

type Status  'idle' | 'loading' | 'error'

7. Component props

interface AvatarProps {
  src: string
  size?: number
}

function Avatar({ src, size = 40 }) {
  return <img src={src} width={size} />
}

8. A callback in props

interface ListProps {
  items: string[]
  onSelect:    // gets the index of the selected item
}

9. useState with null

const [user, setUser] = useState(null)

10. useState with an empty array

const [todos, setTodos] = useState([])

11. When not to write a type

const [count, setCount] = useState(0)

12. useRef to a DOM element

const inputRef = useRef(null)

<input ref={inputRef} />

13. A standalone event handler

const handleChange = (e) => {
  setName(e.target.value)
}

14. An async function

async function loadUser(id: number):  {
  const res = await fetch('/api/users/' + id)
  return res.json()
}

15. A generic function

function first(items: T[]): T | undefined {
  return items[0]
}

16. A tuple from a hook

function useToggle() {
  const [on, setOn] = useState(false)
  return [on, () => setOn(!on)] 
}

Where's the mistake?

Quiz What's wrong?

function Badge({ label: string, color: string }) {
  return <span style={{ color }}>{label}</span>
}

Nothing, it’s correctInside destructuring the colon renames – the type must go after }: ({ label, color }: { label: string; color: string })It should be String instead of stringThe return type is missing

Quiz Why does setItems([...items, 'new']) report an error?

const [items, setItems] = useState([])

Because spread can’t be used with stateTS inferred never[] from the empty array – it needs useState<string[]>([])Because key is missingBecause items is readonly

Quiz Which version is correct?

// A
const handleClick: (e: MouseEvent<HTMLButtonElement>) => void = (e) => { … }
// B
const handleClick = (e: MouseEvent<HTMLButtonElement>) => { … }
// C
const handleClick = (e) : MouseEvent<HTMLButtonElement> => { … }

Only AOnly BA and BOnly C

Quiz Where does the type go in an arrow component?

const Card = ({ title }) => <h2>{title}</h2>

const Card: CardProps = ({ title }) => …const Card = ({ title }: CardProps) => …const Card = ({ title: CardProps }) => …const Card = ({ title }) => <h2>{title}</h2>: CardProps

Warm-up

Challenge

Types instead of any

Warm-up

Swap any for a real type twice and fill in what the functions return.

Task (the same text is in the comment at the top of the file)

CHALLENGE: Types instead of any

The functions have the type `any` on their parameters and return nothing.

1. formatPrice: change `any` to `number` and return text with the currency: formatPrice(25) → '$25'
2. isAdult: change `any` to `number`, add the return type `: boolean` after the bracket
   and return age >= 18

The tests check the results. `npm run typecheck` checks the types when you have the course downloaded.

Loading the interactive part…

I'm done

Challenges

In both challenges the finished code is full of any – boxes without labels. Your task is to stick the labels in the right places: first in plain functions, then in a React component. Nothing changes on the page; only TypeScript sees the difference.

Challenge

Where do the types go? – plain functions

Easy

Seven small functions, seven places where a type goes. The output on the page won't change – only TypeScript sees the difference.

Task (the same text is in the comment at the top of the file)

CHALLENGE: Where do the types go? – plain functions

Every function below has `any`. Replace them with the right types. This isn't about React – it's about
WHERE a type goes: after a parameter, after the parameter brackets, into an interface, into <T>.

1. interface Person: firstName (string), lastName (string), age (an OPTIONAL number).
   Then replace `export type Person = any` with `export interface Person { … }`.
2. formatPrice(amount, currency) – amount is a number, currency is 'USD' | 'EUR'
   with the default value 'USD'. Returns a string.
3. sum(numbers) – an array of numbers → number.
4. parseAge(input) – string → number | null (null when it isn't a number).
5. fullName(person) – Person → string.
6. adults(people) – Person[] → Person[] (only those with age >= 18).
7. findById(items, id) – GENERIC: works for any array of objects with `id: number`
   and returns the item's type (or undefined). Tip: <T extends { id: number }>

✅ Check: npm run typecheck:challenges  (the Utils.en.typetest.tsx file)

Loading the interactive part…

I'm done

Challenge

Where do the types go? – a React component

Medium Bonus challenge

All the typical places in a React component: props, a callback, useState, useRef, an event handler and a custom hook.

🔒 Bonus challenge

Medium and hard challenges are a bonus for signed-in readers. Signing up is free – just an e-mail, no password.

Summary

Types are labels on JavaScript: they don't change the code, they only check it, and they're peeled off when compiling. After erasing them, valid JavaScript must remain.
name: Type – a colon after what you declare (a variable, a parameter, a property) means "is of type". The return type goes after the parameter brackets: function f(): T.
The props type goes after the whole destructuring: ({ a, b }: Props). Inside { } the colon renames!
type X = … (an equals sign), interface X { … }, a type for a hook in angle brackets: useState<T>().
Labels on boundaries and opaque boxes (parameters, props, data shapes, null, empty arrays); let TS infer the see-through boxes.
Not sure? Hover – the editor will tell you the type.

Loading lesson…

💬 Found a mistake, something unclear, or have an idea? Let me know.