We will set up the project using Vite, similar to how we did in the previous project.
Create a new Vite project using the following command:
pnpm create vite vanilla-counter-app Select the following options when prompted:
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScriptNavigate to the project directory and open it in Visual Studio Code:
cd vanilla-counter-app && code .The project structure is similar to the previous project, with the following files and directories:
└── vanilla-counter-app
├── .gitignore
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── counter.ts
│ ├── main.ts
│ ├── style.css
│ ├── typescript.svg
│ └── vite-env.d.ts
└── tsconfig.jsonNotice that the source code is already in the src directory (unlike the Vanilla JavaScript template where we had to move the files). The style.css file is also placed in the src directory.
The src/vite-env.d.ts file is a declaration file used in Vite projects to declare types for global variables or modules, particularly for Vite’s environment variables. Vite injects some special types and environment variables, and to get proper type checking and autocompletion for those in TypeScript, you need to have a declaration file like vite-env.d.ts.
The scaffolded project also includes a tsconfig.json file for TypeScript configuration. The TypeScript configuration is set up to target ESNext, use the bundler mode, and enable strict type checking.
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}The package.json file includes dependencies for Vite and TypeScript. The build script is configured to transpile TypeScript code to JavaScript using the tsc command, followed by building the project with Vite.
Let’s simplify the project by removing the unnecessary files and code. Run the following commands:
rm src/counter.ts
rm src/typescript.svg
rm public/vite.svg
echo "" > src/main.ts
echo "" > src/style.cssNext, download the following favicon.png and add it to the public folder.
Finally, replace the content of the index.html file with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="favicon.png" type="image/png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Counter</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>We have set up a new Vite project for the Vanilla TypeScript Counter App. We could also install TailwindCSS and Prettier like we did in the previous projects, but we will skip that for now. We also skip adding .github/workflows/deploy.yml to keep the project simple.