In the previous tasks, we set up and implemented the Dictionary App using Vanilla JavaScript. In this task, we’ll convert our existing JavaScript code to TypeScript to take advantage of its static type checking and better tooling support.
While JavaScript is a powerful language, it lacks static type checking, which can lead to runtime errors and make it harder to catch bugs during development. TypeScript addresses this issue by adding optional static typing to JavaScript, allowing us to catch errors during compilation and providing better tooling and code organization.
First, we need to install TypeScript as a development dependency in our project:
pnpm install typescript --save-devWe add typescript as a development dependency because it’s only required during the development phase to compile TypeScript code into JavaScript. The compiled JavaScript code is bundled and served to the client in production.
Next, we need to create a tsconfig.json file in the root of our project. This file defines the TypeScript compiler options and project settings. Run the following command to generate a basic tsconfig.json file:
npx tsc --initThis command creates a tsconfig.json file with default settings. You can customize these settings according to your project’s needs. We will make the following changes to the tsconfig.json file:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}These are the recommended settings for a TypeScript project using a bundler like Vite. Let’s go through some of the key settings:
target: Specifies the ECMAScript target version for the compiled JavaScript code.module: Specifies the module system to use (ESNext for Vite).lib: Specifies the libraries to include when compiling the TypeScript code.moduleResolution: Specifies the module resolution strategy for TypeScript.strict: Enables strict type checking options.noUnusedLocals, noUnusedParameters: Ensures that all declared variables and parameters are used.noFallthroughCasesInSwitch: Prevents fallthrough cases in switch statements.include: Specifies the folders to include when compiling the TypeScript code.package.json ScriptsNext, we need to update the package.json scripts to use TypeScript for building the project. Update the scripts section in package.json as follows:
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview"
}
}Notice that we updated the build script to compile TypeScript code using the TypeScript compiler (tsc) before building the project with Vite.
We don’t need to change the dev script because Vite handles the compilation of TypeScript code during development.
.tsNow that we’ve set up TypeScript in our project, we need to rename our JavaScript files to TypeScript files by changing the file extensions from .js to .ts. In our case, there is only a src.main.js file, which we’ll rename to src/main.ts.
mv src/main.js src/main.tsTypeScript is a super-set of JavaScript, so technically, valid JavaScript code is also valid TypeScript code. However, TypeScript provides additional features like static typing, interfaces, and type annotations that we can use to improve our codebase. We’ll explore these features in the subsequent tasks.
At the moment, if you open the src/main.ts file in VSCode, you might see some TypeScript errors due to the lack of type annotations and TypeScript-specific syntax. Don’t worry; we’ll address these errors in the upcoming tasks.
Given we have renamed the src/main.js file to src/main.ts, we need to update the src/index.html file to point to the new TypeScript file:
- <script type="module" src="./main.js"></script>
+ <script type="module" src="./main.ts"></script>We should also update the tailwind.config.js file to include the new TypeScript file extension:
- content: ["./index.html", "./src/**/*.js"]
+ content: ["./index.html", "./src/**/*.{js,ts}"]The {js,ts} pattern tells Tailwind CSS to scan both JavaScript and TypeScript files for classes to extract.
Similarly, we should update the prettier command in package.json to include TypeScript files:
- "prettier": "prettier --write \"src/**/*.js\" --config \".prettierrc.json\""
+ "prettier": "prettier --write \"src/**/*.{js,ts}\" --config \".prettierrc.json\""This command tells Prettier to format both JavaScript and TypeScript files in the src directory.
Now that we’ve set up TypeScript in our project, we can run the project using the following command:
pnpm devOpen the browser and navigate to http://localhost:5173 to see the Dictionary App running. You should see the same functionality as before, but now the project is using TypeScript.
To build the project for production, run the following command:
pnpm buildThis command compiles the TypeScript code to JavaScript and bundles the project for production. The output will be available in the dist directory. However, since we have not added any TypeScript-specific code yet, the tsc will report many errors. We see these errors since we configured TypeScript to be strict in our tsconfig.json file. Our source code fails to meet these strict requirements. We’ll address these errors in the upcoming tasks.
Let’s add a script to package.json to perform type checking without emitting any files:
{
"scripts": {
"type-check": "tsc --noEmit",
}
}Now, you can run the type-checking script using the following command:
pnpm type-checkThis script will check the TypeScript code for type errors without emitting any JavaScript files. You should see the same errors that were reported during the build process.
Notice running the project in development mode (pnpm dev) doesn’t require type-checking because Vite handles the compilation and type-checking in the background. However, you should run the type-checking script before building the project for production to catch any type errors early.