Dictionary App

We will start with a simple dictionary app written in JavaScript that looks up word definitions using the Free Dictionary API. Then, we will refactor the code to TypeScript to see the benefits of static typing.

Getting Started

Go to the dictionary-app repository and click Use this template → Create a new repository to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> dictionary-app
cd dictionary-app
code .

The template is pre-configured with Vite (just like the projects from previous chapters). Install dependencies and start the dev server:

pnpm install
pnpm dev

Open the dev server in your browser. You should see the dictionary app layout with a search bar.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Build a dynamic web app that fetches data from an external API and renders it to the DOM
  • Structure and manipulate the DOM programmatically to display nested, variable-shaped data
  • Convert a JavaScript project to TypeScript, including configuration and tooling setup
  • Define and apply types, interfaces, and generics to model API data and function signatures
  • Use type annotations, assertions, and safe property access to write type-safe DOM code
  • Debug a TypeScript application in VSCode using breakpoints and source maps

Sections

  1. Explore the Layout
  2. Free Dictionary API
  3. Fetching Data from the Dictionary API
  4. Displaying Word Definitions
  5. Displaying Word Phonetics
  6. Adding TypeScript to the Project
  7. Declaring Types for the API Response
  8. Using Interfaces for Type Declarations
  9. Refactor searchWord to TypeScript
  10. Refactor extractFromEntry to TypeScript
  11. Adding Type Annotations to DOM Functions
  12. Adding Type Annotations to Remaining DOM Functions
  13. Adding Type Annotations to the Event Listener
  14. Wrapping Up the TypeScript Refactoring
  15. Debugging TypeScript in VSCode
  16. Practice Questions