Setting Up the Project 관련

Learn TypeScript – A Handbook for Developers

---

This handbook will teach you the basics of TypeScript, including what it is, why it is useful, and the key features it offers. TypeScript was created by Anders Hejlsberg, a prominent software engineer at Microsoft who’s also known for his work on C# ...

---

Learn TypeScript – A Handbook for Developers

This handbook will teach you the basics of TypeScript, including what it is, why it is useful, and the key features it offers. TypeScript was created by Anders Hejlsberg, a prominent software engineer at Microsoft who’s also known for his work on C# ...

We will be using Vite to set up our TypeScript project. Vite is a modern build tool designed to offer a faster and leaner development experience for web projects.

To get started, run the following command to create a new Vite project with TypeScript support:

npm create vite@latest

Then enter a name for your project (you may choose any name you prefer). Follow the instructions carefully in the subsequent steps

creating a project with npm create vite@latest

Select your project template by choosing ‘React’ from the available options. We will be using React with TypeScript for this project's development.

project template when you run, npm create vite@latest

When prompted for a variant selection, choose 'TypeScript' from the available options.

variant selection of typescript, in create vite@latest template

After completing these steps, you will be prompted to navigate to your project directory and run npm install. You can use any code editor of your choice. For this example, I will be using VS Code.

overview of your project in vscode and running npm install to install project dependencies

After running npm install, run npm run dev to start the project on the local server. Once that’s up and running, we are ready to dive into learning TypeScript concepts.

our landing page after running npm run dev in our project

But first, let's create our first TypeScript file, test.ts (you can choose to use .ts or .tsx). Create the test.ts file inside the src folder of your project, and add the following code to log a test message:

console.log('Testing our first TypeScript file');

To view this in the console, import the test.ts file into the main.tsx file located in the src folder.

highlighting the main.tsx and test.tsx file

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import "./test.ts";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

To view the log in the console, make sure to import the test.ts file into the main.tsx file located in the src folder. After that, check the console of your project running on the local server, and you should see the logged message displayed there.

Voilà!

our result in console.log

Now let’s get down to the real business of learning TypeScript.