TypeScript

A program is a list of instructions that a computer follows, one after another. A recipe is a good picture of one: "boil the water, add the pasta, wait ten minutes". The difference is that a computer does exactly what the words say, nothing more, and never guesses what you meant.

You write those instructions as code: text in a programming language, a language with strict rules that a computer can follow. This course starts with JavaScript, the language of the web, and then adds TypeScript on top of it.

Program

Instructions a computer follows, in order, to do a job.

Code

The text of a program, written in a programming language.

Programming language

A language with exact rules, so a computer can follow it without guessing.

Code needs something to run it. That something is called a runtime. JavaScript has two common ones: every web browser (Chrome, Firefox, Safari, Edge) has one built in, and Node.js is one you install to run JavaScript on your own computer or on a server.

Runtime

The program that reads your code and carries it out.

Browser

The app you use to visit websites. It can run JavaScript.

Node.js

A runtime for JavaScript outside the browser. Often just "Node".

Server

A computer that answers requests from other computers, such as websites.

console.log(...) prints whatever you put between the brackets. It is how you will see what your code is doing for the rest of this course.

1console.log('Welcome to the library')

1console.log('Books: 3')

Use the playground for this course. It runs JavaScript, shows TypeScript errors as you type, and you cannot break anything in it. Press Run and the result of console.log appears in the Logs panel on the right.

A program with several lines runs them in order, from the first to the last. Each finished instruction is called a statement. A line that starts with // is a comment: a note for people, which the runtime skips.

1// Opening the library in the morning2console.log('Unlock the door')3console.log('Turn on the lights')4console.log('Open the catalogue')

1// Closing the library at night2console.log('Switch off the lights')3console.log('Lock the door')4console.log('Go home')

A terminal (also called a command line or shell) is a window where you type commands instead of clicking. Real projects are run from one. Each line you type is a command, and the terminal answers below it.

1node --version        # prints the version of Node you have2node hello.js         # runs the JavaScript in the file hello.js

Terminal

A window for typing commands to your computer.

Command

One instruction typed into a terminal, run when you press Enter.

File

A named piece of saved text, like hello.js. JavaScript files end in .js.

When the runtime cannot follow an instruction, it stops and prints an error. Errors are not a sign you did badly; they are the computer telling you precisely what confused it. Read them from the start: the kind of error, then the message, then where it happened.

1hello.js:22consle.log('Turn on the lights')3^4
5ReferenceError: consle is not defined

• A program is instructions run in order, top to bottom.
• JavaScript runs in browsers and in Node.js; both are runtimes.
• console.log(...) prints a value so you can see what the code does.
• The playground, the browser console and a terminal with Node can all run it.
• An error names its kind, its message and the line where it happened. Read it before changing anything.

A value is a piece of data a program works with: a book title, a number of copies, whether a book is on loan. JavaScript has a few basic kinds of value, and the three you will use most are strings (text), numbers and booleans (true or false).

1console.log('The Hobbit')   // a string: text in quotes2console.log(310)            // a number: no quotes3console.log(true)           // a boolean: true or false4console.log(typeof 310)     // prints: number

Value

One piece of data: 310, true, 'The Hobbit'.

String

Text, written between quotes. Single '…' and double "…" quotes do the same thing.

Number

Any number, whole or with a decimal point: 3, -2, 4.5.

Boolean

One of two values, true or false. Used for yes-or-no facts.

A variable gives a value a name, so you can use it later without writing it again. You declare one with const (or let), a name, =, and the value. Here = does not mean "equals"; it means "store this value under this name".

1const title = 'The Hobbit'2const pages = 3103console.log(title)4console.log(pages)

Variable

A name that holds a value.

Declare

Create a variable, with const or let.

Assign

Store a value in a variable with =.

A const variable keeps the value it started with: assigning to it again is an error. A let variable can be given a new value later. Use const by default, and let only for values that really change, such as a counter.

1let copiesOnShelf = 32copiesOnShelf = copiesOnShelf - 1   // someone borrowed one3console.log(copiesOnShelf)          // 2

An operator is a symbol that works on values. The arithmetic ones are +, -, * (times), / (divided by) and % (the remainder after dividing). As in school maths, * and / happen before + and -, and brackets go first of all.

1const daysLate = 32console.log(5 + daysLate * 2)

With strings, + joins them end to end. Joining a string and a number turns the number into text first, which surprises everyone once. For building text out of values, a template string is clearer: it uses backticks instead of quotes, and ${...} drops a value into the text.

1const title = 'The Hobbit'2const copies = 33console.log(title + ' by Tolkien')       // The Hobbit by Tolkien4console.log('Copies: ' + copies)         // Copies: 35console.log(`${title}: ${copies} left`) // The Hobbit: 3 left

1console.log('2' + 2)

1const title = 'Emma'2const author = 'Jane Austen'3const pages = 4744
5console.log(title + ' by ' + author)6console.log(`${title} has ${pages} pages`)7console.log(`Twice as long: ${pages * 2} pages`)8console.log('2' + 2, 2 + 2)

Your turn. The variables are set up; build two strings from them. The tests check the exact text, spaces included.

1const first = 'Ada'2const last = 'Lovelace'3const books = 34
5const fullName = ''6const summary = ''

Comparison operators ask a question and answer true or false. === asks "is it the same value?", !== asks "is it different?", and <, >, <=, >= compare sizes.

1const copies = 02console.log(copies === 0)    // true3console.log(copies > 0)      // false4console.log('3' === 3)       // false: a string is not a number

1const fine  52console.log(fine  3)   // true

Variable names can use letters, digits, _ and $, but cannot start with a digit or contain spaces. JavaScript code uses camelCase: words joined together, each after the first starting with a capital, like copiesOnShelf. Pick names that say what the value means, not what kind it is.

const x = 'The Hobbit'const n = 3const b = true

const title = 'The Hobbit'const copies = 3const isOnLoan = true

• Strings are text in quotes, numbers have no quotes, booleans are true or false.
• const names a value that stays; let names one that changes.
• * and / happen before + and -; brackets go first.
• + with a string joins text. Template strings drop values into text with ${...}.
• Compare with === and !==, never ==.

So far every line ran. An if statement runs a group of lines only when a condition (an expression that gives a boolean) is true. The lines it controls go in braces { }, a block, and are indented so you can see they belong together. else holds what to do otherwise.

1const copiesOnShelf = 02
3if (copiesOnShelf > 0) {4  console.log('You can borrow it now')5} else {6  console.log('Join the waiting list')7}

Condition

Something that is either true or false, like copies > 0.

Block

Lines grouped in braces { }, run together.

Expression

Any piece of code that produces a value: 3, copies > 0, a + b.

Chain else if to test one condition after another. JavaScript checks them in order and runs the first block whose condition is true, then skips the rest.

1const daysLate = 122
3if (daysLate === 0) {4  console.log('On time')5} else if (daysLate < 7) {6  console.log('A little late')7} else if (daysLate < 30) {8  console.log('Late: a fee applies')9} else {10  console.log('Very late: the book is marked lost')11}

A condition does not have to be a boolean. JavaScript treats a handful of values as false, called falsy: false, 0, '' (the empty string), null, undefined and NaN. Everything else is truthy, including '0' and 'false', because they are non-empty strings.

1const copiesOnShelf = 02if (copiesOnShelf) {3  console.log('Available')4} else {5  console.log('Not available')6}

When you compare one value with several possible answers, switch reads better than a long else if chain. Each case is compared with ===. break ends the switch; without it, the code carries on into the next case. default runs when no case matches.

1const status = 'on-loan'2
3switch (status) {4  case 'available':5    console.log('On the shelf')6    break7  case 'on-loan':8    console.log('Borrowed by a member')9    break10  default:11    console.log('Unknown status')12}

A loop runs a block again and again. The for loop is the classic one: it has three parts in its brackets, separated by ;: a starting step, a condition checked before each round, and a step that runs after each round. One round is called an iteration.

1for (let shelf = 1; shelf <= 3; shelf = shelf + 1) {2  console.log(`Checking shelf ${shelf}`)3}

1for (let i = 0; i < 4; i++) {2  console.log(i)3}

1let total = 02for (let day = 1; day <= 5; day++) {3  total = total + 24  console.log(`Day ${day}: fee so far ${total}`)5}6console.log(`Final fee: ${total}`)

while is a simpler loop: only a condition. It suits work where you do not know in advance how many rounds it takes. Something in the block must eventually make the condition false, or the loop never ends: an infinite loop, which freezes the page or program.

1let waiting = 32while (waiting > 0) {3  console.log(`Serving a member, ${waiting} in the queue`)4  waiting = waiting - 15}6console.log('Queue empty')

• if/else if/else runs the first block whose condition is true.
• && is and, || is or, ! is not.
• false, 0, '', null, undefined and NaN are falsy; everything else is truthy.
• switch compares one value with === against many cases; end each with break.
• for repeats with a counter; while repeats until its condition is false. Make sure it becomes false.

A function is a group of statements with a name. Writing it, called defining it, does not run anything yet. Using its name followed by brackets calls it: runs its statements. Define once, call as many times as you like.

1function openLibrary() {2  console.log('Unlock the door')3  console.log('Turn on the lights')4}5
6openLibrary()   // runs both lines7openLibrary()   // and again, the next morning

Function

A named group of statements that runs when called.

Define

Write a function. Nothing runs yet.

Call

Run a function: its name followed by (). console.log(...) is a call too.

Body

The statements inside the function’s braces.

A function can take inputs. In the definition they are parameters: names listed in the brackets, which act like variables inside the body. In a call, the values you pass are arguments. They are matched by position: the first argument goes to the first parameter.

1function greet(name, booksOnLoan) {2  console.log(`Hello ${name}, you have ${booksOnLoan} books`)3}4
5greet('Ada', 2)6greet('Grace', 0)

1function describe(title, pages) {2  console.log(`${title} has ${pages} pages`)3}4describe(310, 'The Hobbit')

return ends the function and hands a value back to whoever called it: the return value. The call itself then stands for that value, so you can store it, print it or use it in a calculation. Printing and returning are different: console.log shows a value to you, return gives it to the rest of the program.

1function lateFee(daysLate) {2  return daysLate * 23}4
5const fee = lateFee(4)        // fee is 86console.log(fee + lateFee(1))  // 10

1function double(n) {2  console.log(n * 2)3}4const result = double(5)5console.log(result)

An arrow function is written with => and usually stored in a const. With braces it works like any function body and needs return. Without braces, the single expression after the arrow is returned automatically.

1function lateFeeA(days) {2  return days * 23}4
5const lateFeeB = (days) => {6  return days * 27}8
9const lateFeeC = (days) => days * 2   // no braces: returned10
11console.log(lateFeeA(3), lateFeeB(3), lateFeeC(3))  // 6 6 6

1const addFine = (balance, fine)  balance  fine

A variable declared inside a block (a function body, an if, a loop) exists only inside that block. That region is its scope. Code inside can see variables from outside it, but not the other way round. This keeps functions from tripping over each other’s names.

1const libraryName = 'Town Library'2
3function receipt(title) {4  const message = `${libraryName}: you borrowed ${title}`5  return message6}7
8console.log(receipt('Emma'))   // sees libraryName from outside9console.log(message)           // ReferenceError: message is not defined

1const fee = 22function charge(days) {3  const total = fee * days4  return total5}6console.log(/* line 6 */)

If a call leaves out an argument, that parameter is undefined. A default value, written = value after the parameter, is used instead when the argument is missing.

1function loanDays(days = 14) {2  return `Due back in ${days} days`3}4
5console.log(loanDays())    // Due back in 14 days6console.log(loanDays(7))   // Due back in 7 days

Put parameters, return, a default and an if together. The tests call your function with different arguments and check what it returns.

1function lateFee(daysLate, perDay = 2) {2  return 03}

A function is a value, like a number or a string: you can store it in a variable and pass it to another function as an argument. A function passed in this way is called a callback: the receiving function decides when to call it. This idea is everywhere in JavaScript, starting with lists in the next module.

1function repeat(times, action) {2  for (let i = 1; i <= times; i++) {3    action(i)4  }5}6
7repeat(3, (n) => console.log(`Reminder ${n}: return your book`))

1function repeat(times, action) {2  for (let i = 1; i <= times; i++) {3    action(i)4  }5}6
7const remind = (n) => console.log(`Reminder ${n}`)8repeat(3, remind)9repeat(2, (n) => console.log(`Shelf ${n} checked`))

• Define a function once; call it with name(...) whenever you need it.
• Parameters are the names in the definition; arguments are the values in a call, matched by position.
• return hands a value back. Without it, a call gives undefined.
• Arrow functions without braces return their expression; with braces they need return.
• Variables exist only inside the block where they are declared.
• Functions are values: you can pass one as a callback.

An array holds several values in order, written in square brackets and separated by commas. Each value is an element, and its position is its index. Indexes start at 0, so the first element is [0]. .length is how many elements there are.

1const shelf = ['Emma', 'Dune', 'Beloved']2
3console.log(shelf[0])       // Emma4console.log(shelf[2])       // Beloved5console.log(shelf.length)   // 36console.log(shelf[3])       // undefined: there is no fourth book

Array

An ordered list of values: [1, 2, 3].

Element

One value in an array.

Index

An element’s position, counted from 0.

push adds an element at the end, pop removes the last one and returns it, and includes asks whether a value is in the list. These are methods: functions that belong to a value, called with a dot.

1const todo = ['Shelve returns', 'Order new books']2todo.push('Fix the printer')3console.log(todo.length)              // 34const last = todo.pop()               // 'Fix the printer'5console.log(todo.includes('Order new books'))   // true

To do something with each element in turn, use for...of. On every iteration, the variable you name holds the next element. No counter, no index, no off-by-one mistakes.

1const returns = ['Emma', 'Dune', 'Beloved']2
3for (const title of returns) {4  console.log(`Shelving ${title}`)5}

1const pages = [310, 412, 324]2let total = 03for (const p  pages) {4  total  p5}

Three array methods do most everyday work, each by calling your callback on every element. map makes a new array of the callback’s results. filter keeps the elements for which the callback returns true. find returns the first element that matches, or undefined if none does.

1const pages = [310, 412, 96]2
3const minutes = pages.map((p) => p * 2)      // [620, 824, 192]4const long = pages.filter((p) => p > 300)    // [310, 412]5const short = pages.find((p) => p < 100)     // 966const tiny = pages.find((p) => p < 10)       // undefined

1const days = [0, 3, 10, 1]2const fees = days.filter((d) => d > 2).map((d) => d * 2)3console.log(fees)

Chain filter and map. Each number in the list is how many days late a book is; books on time have 0 or less.

1function lateFees(days) {2  return days3}

An object describes one thing with named fields called properties. Each property is a key (its name) and a value. You write objects in braces, and read a property with a dot, or with square brackets when the key is in a variable.

1const book = {2  title: 'Dune',3  author: 'Frank Herbert',4  pages: 412,5  onLoan: false6}7
8console.log(book.title)       // Dune9const field = 'pages'10console.log(book[field])      // 41211book.onLoan = true            // properties can be changed12book.year = 1965              // or added

Object

A value made of named properties: { title: 'Dune' }.

Property

One named value in an object.

Key

A property’s name, such as title.

Method

A property whose value is a function, like push on arrays.

Most real data is an array of objects: a catalogue of books, a list of members, a to-do list. Every lesson so far comes together here.

1const catalogue = [2  { title: 'Emma', pages: 474, onLoan: true },3  { title: 'Dune', pages: 412, onLoan: false },4  { title: 'Beloved', pages: 324, onLoan: false }5]6
7const available = catalogue.filter((book) => !book.onLoan)8const titles = available.map((book) => book.title)9console.log(titles)   // ['Dune', 'Beloved']

A bookshop cart is an array of objects: each line has a title, a price and a quantity. Add it up.

1function cartTotal(cart) {2  let total = 03  // TODO: add each line's price times its quantity4  return total5}

JavaScript has two values for "no value". undefined is what you get when something was never set: a missing property, an index past the end, a function with no return. null is a value you set on purpose to say "deliberately empty", such as a book with no borrower.

1const book = { title: 'Dune', borrower: null }2console.log(book.borrower)   // null: nobody, on purpose3console.log(book.isbn)       // undefined: never set4console.log(book.isbn.length)5// TypeError: Cannot read properties of undefined (reading 'length')

Optional chaining, a?.b, reads b only if a is not null or undefined; otherwise the whole thing is undefined instead of an error. The nullish coalescing operator, a ?? b, gives a unless it is null or undefined, and then gives b: a fallback.

1const member = members.find((m) => m.id === 2)2console.log(member?.name)               // undefined, no crash3console.log(member?.name ?? 'Guest')    // Guest

1const a = book.fine || 52const b = book.fine ?? 5

A variable holding an object or array holds a reference to it: a pointer to one object somewhere in memory. Assigning it to another variable copies the pointer, not the object, so both names change the same thing. To make a copy, use the spread syntax ..., which copies the properties (or elements) into a new one. It copies one level only: objects inside it are still shared.

1const original = { title: 'Dune', onLoan: false }2const same = original3same.onLoan = true4console.log(original.onLoan)   // true: one object, two names5
6const copy = { ...original, onLoan: false }7console.log(original.onLoan)   // still true: copy is separate8const titles = ['Emma']9const more = [...titles, 'Dune']   // ['Emma', 'Dune']

1const a = ['Emma']2const b = a3b.push('Dune')4console.log(a.length)

1const shelf = ['Emma', 'Dune']2const sameShelf = shelf3sameShelf.push('Beloved')4console.log(shelf)5
6const book = { title: 'Dune', onLoan: false }7const copy = { ...book }8copy.onLoan = true9console.log(book.onLoan, copy.onLoan)

• Arrays are ordered lists, indexed from 0; for...of visits each element.
• map transforms, filter keeps matches, find returns the first match or undefined.
• Objects group named properties, read with .key or [key].
• undefined means never set, null means empty on purpose. Reading a property of either crashes.
• ?. reads safely; ?? gives a fallback only for null and undefined.
• Objects and arrays are shared by reference; spread ... makes a copy.

Real programs are split across many files. Each file is a module: its variables and functions are private to it, unless it exports them. Another file can then import them by name. This keeps each file small and focused.

export function lateFee(days) {  return days * 2}
const secretRate = 3 // not exported

import { lateFee } from './fees.js'
console.log(lateFee(4))   // 8

Module

One file of code, with its own private names.

Export

Make a name in a module available to other files.

Import

Use a name another module exports. ./ means "in this folder".

A package is a bundle of modules published for anyone to use. npm is the tool (installed with Node) that downloads them into a node_modules folder and records them in package.json. You import a package by its name, without ./.

1npm init -y            # create package.json in this folder2npm install date-fns   # download a package for working with dates

1import { addDays } from 'date-fns'2
3const due = addDays(new Date(), 14)   // two weeks from now

When a function cannot do its job, it can throw an error. Throwing stops the function at once, and the error travels back up through every caller until something catches it with try...catch. If nothing does, the program stops with the error you saw in module 1.

1function borrow(book) {2  if (book.onLoan) {3    throw new Error(`${book.title} is already on loan`)4  }5  book.onLoan = true6}7
8try {9  borrow({ title: 'Dune', onLoan: true })10  console.log('Enjoy your book')       // skipped11} catch (error) {12  console.log(error.message)           // Dune is already on loan13}

1function borrow(book) {2  if (book.onLoan) {3    throw new Error(`${book.title} is already on loan`)4  }5  book.onLoan = true6}7
8try {9  borrow({ title: 'Dune', onLoan: true })10  console.log('Enjoy your book')11} catch (error) {12  console.log(error.message)13}14console.log('The library stays open')

Some jobs take time: downloading data, reading a file, waiting for a timer. JavaScript does not stop and wait for them. It starts the job, carries on with the next lines, and runs your code for the result later. Work like this is asynchronous; ordinary line-by-line work is synchronous.

1console.log('A')2setTimeout(() => console.log('B'), 0)3console.log('C')

Synchronous

Runs now, line by line; the next line waits for it.

Asynchronous

Started now, finished later; the next line does not wait.

Asynchronous functions return a promise: an object standing in for a result that is not ready yet. A promise starts pending, then either fulfils with a value or rejects with an error. It settles once and never changes after that.

Promise

An object for a result that will be ready later.

Fulfil

Finish successfully, with a value.

Reject

Finish with an error.

Inside a function marked async, await pauses that function until a promise settles, then gives you its value, so asynchronous code reads like ordinary code. fetch is the built-in way to ask a server for data; it returns a promise. Data often comes back as JSON, a text format that looks like JavaScript objects and arrays.

1async function loadBooks() {2  const response = await fetch('https://example.com/api/books')3  const books = await response.json()4  return books.length5}6
7loadBooks().then((count) => console.log(`${count} books`))

async function

A function that can await, and that returns a promise.

await

Pause until a promise settles, then use its value.

JSON

A text format for data: {"title": "Dune", "pages": 412}. Keys are always in double quotes.

API

A set of addresses a server answers with data, for programs rather than people.

When an awaited promise rejects, await throws its error, so ordinary try...catch handles it. The usual mistake goes the other way: forgetting await. Then you get the promise itself, not its value, and the code after it runs too early.

1async function loadMember(id) {2  try {3    const url = `https://example.com/api/members/${id}`4    const response = await fetch(url)5    return await response.json()6  } catch (error) {7    console.log('Could not load the member:', error.message)8    return null9  }10}

countBooks is given load, an async function that gives an array of titles, or rejects when the library’s server is down. The tests pass in pretend versions of load, so nothing really goes over the network.

1export async function countBooks(load) {2  // TODO: await load(), and return the number of titles.3  // If it rejects, return 0.4  return -15}

Awaiting one thing after another is slow when the jobs do not depend on each other. Promise.all takes an array of promises and gives one promise that fulfils with all their values, in the same order, once every one has fulfilled. If any of them rejects, the whole thing rejects.

const books = await loadBooks()const members = await loadMembers()

const [books, members] = await Promise.all([  loadBooks(),  loadMembers()])

• Each file is a module; export shares a name and import uses it.
• Packages are installed with npm and imported by name.
• throw stops and signals an error; try...catch handles it.
• Asynchronous work finishes later; its result comes as a promise.
• In an async function, await waits for a promise and throws if it rejects. Do not forget it.
• Promise.all runs independent jobs at the same time.

Look back at the bugs in the first modules: '2' + 2 giving '22', arguments in the wrong order, reading .name of undefined, a forgotten await. JavaScript ran every one of them without a word, and you found out only when the program did the wrong thing, maybe in front of a user.

TypeScript is JavaScript plus types: labels that say what kind of value each variable, parameter and property holds. A program called the type checker reads those labels and reports code that cannot be right, before anything runs.

Type

A description of a set of values: number is every number, string every text.

Type checker

The program that checks your code against its types. For TypeScript, tsc.

Compile time

When the checker reads your code, before it runs.

Run time

When the code is actually running. Also written "runtime" for the program that runs it.

A type annotation is a colon and a type after a name. TypeScript files end in .ts instead of .js. Everything else you learned about JavaScript still holds: TypeScript adds to the language, it does not replace it.

1function lateFee(daysLate: number): number {2  return daysLate * 23}4
5const fee = lateFee(4)       // fine6const oops = lateFee('4')    // error, before running

1function lateFee(daysLate: number): number {2  return daysLate * 23}4
5const fee = lateFee(4)6console.log(`Fee: ${fee}`)

A type error has a location, a code (TS and a number, useful for searching), and a sentence. Most sentences follow one pattern: "Type A is not assignable to type B", meaning "you gave me an A where a B is required". Read it as: what did I give, and what was wanted?

1fees.ts:6:22 - error TS2345: Argument of type 'string' is not2assignable to parameter of type 'number'.3
46 const oops = lateFee('4')5                       ~~~

Browsers and Node run JavaScript, not TypeScript. So before running, the annotations are erased: deleted, leaving ordinary JavaScript. Checking and erasing are two separate jobs, often done by different tools.

const pages: number = 412function half(n: number): number {  return n / 2}

const pages = 412function half(n) {  return n / 2}

The playground checks as you type, so you can skip this until you start a real project. There, TypeScript is a package installed per project. Its command is tsc, run with npx (which runs a command from an installed package). Its settings live in tsconfig.json.

1npm install --save-dev typescript   # add it to the project2npx tsc --init        # write a tsconfig.json with good defaults3npx tsc --noEmit      # check every file, write nothing4npx tsc               # check, and write .js files5node fees.ts          # recent Node runs .ts directly, unchecked

You do not have to annotate everything. TypeScript infers a type from the value: const pages = 412 is a number without saying so. In an editor such as VS Code, hold the mouse over a name to see the type it inferred. Annotate where values come in: function parameters, always.

1let title = 'Dune'          // inferred: string2let copies = 3              // inferred: number3title = 42                  // error: number is not assignable to string4
5const fee = lateFee(4)      // inferred from lateFee's return type6const titles = ['Emma', 'Dune']   // inferred: string[]

1function total(prices: number[]) {2  let sum = 03  for (const p of prices) sum += p4  return sum5}

This exercise starts with an error on purpose. In strict mode a parameter with no type is an error ("implicitly has an 'any' type"). Fix it, and watch the checker find the next problem.

1function lateFee(daysLate) {2  return daysLate * 23}4
5const fee = lateFee('4')

Editors with TypeScript support, such as VS Code, run the checker constantly. Errors appear as red wavy underlines; hovering shows the message. As you type a dot, the editor lists what is available, from the types: this is autocomplete, and it is half the reason people use TypeScript.

TypeScript can be more or less demanding. "strict": true in tsconfig.json turns on a family of stricter checks, the most important being strict null checks: null and undefined are not allowed where a real value is expected. tsc --init turns it on, and every example in this course assumes it.

1{2  "compilerOptions": {3    "strict": true4  }5}

1const members = [{ id: 1, name: 'Ada' }]2const member = members.find((m) => m.id === 2)3console.log(member.name)

• TypeScript is JavaScript plus types; the checker reports impossible code before it runs.
• Annotate with : type; parameters always, the rest is mostly inferred.
• "A is not assignable to B" means you gave an A where a B was needed.
• Types are erased before running. Nothing checks them at run time.
• npx tsc --noEmit checks a project; the editor checks as you type.
• Keep strict on. It is what makes undefined a type error.

Each kind of value from the JavaScript modules has a type with the same name, in lowercase: string, number, boolean, null and undefined. These are the primitive types, the building blocks every other type is made from.

1const title: string = 'Dune'2const pages: number = 412       // whole numbers and decimals alike3const onLoan: boolean = false4const borrower: null = null

Primitive

A simple value: a string, number, boolean, null or undefined (and two rarer ones, bigint and symbol).

An array of strings is string[]: the element type followed by []. Array<string> means the same; you will see both. Every element must match, and everything you get out of the array has that type.

1const titles: string[] = ['Emma', 'Dune']2titles.push('Beloved')     // fine3titles.push(42)            // error: number is not assignable to string4
5const loud = titles.map((t) => t.toUpperCase())   // string[]6const sizes = titles.map((t) => t.length)         // number[]

1const prices = [4.5, 12, 0]

An object type looks like an object with types instead of values: each property name, a colon, its type. An object must have every property listed, with the right types. Property lines can be separated by ;, , or a new line.

1function describe(book: { title: string; pages: number }) {2  return `${book.title}, ${book.pages} pages`3}4
5describe({ title: 'Dune', pages: 412 })   // fine6describe({ title: 'Dune' })7// error: Property 'pages' is missing in type '{ title: string; }'

1function greet(member: { id: ; name:  }) {2  return `Hello, ${member.name}`3}

1function summary(book: { title: string; pages: number }) {2  return `${book.title}, ${book.pages} pages`3}4
5console.log(summary({ title: 'Dune', pages: 412 }))6console.log(summary({ title: 'Emma', pages: 474 }))

Writing the same object type over and over is tiring and easy to get wrong. A type alias gives any type a name with type Name = .... An interface names an object type with interface Name { ... }. Type names start with a capital letter, by convention.

1type Book = {2  title: string3  author: string4  pages: number5}6
7interface Member {8  id: number9  name: string10}11
12const catalogue: Book[] = []13function welcome(member: Member) {14  return `Welcome, ${member.name}`15}

A ? after a property name makes it optional: it may be missing. Reading it then gives the type or undefined, and the checker makes you handle both. readonly before a name means it may be read but not reassigned.

1interface Book {2  readonly isbn: string3  title: string4  subtitle?: string          // string | undefined when read5}6
7function heading(book: Book) {8  book.isbn = 'x'            // error: isbn is read-only9  return book.subtitle?.toUpperCase() ?? book.title10}