How to Compile TypeScript with Visual Studio Code? - 面试题

Installation of TypeScript Extension:

Ensure your Visual Studio Code version supports TypeScript. Typically, the latest Visual Studio Code versions come with TypeScript support pre-installed.
If not installed, search for and install the TypeScript extension via Visual Studio Code's Extensions and Update Manager. Creating a TypeScript Project:
Open Visual Studio Code, click "File" -> "New" -> "Project".
Select "TypeScript" from the project types, then choose a template, such as "HTML Application with TypeScript" or "Node.js Project with TypeScript".
Enter the project name and location, then click "OK" to create the project. Adding TypeScript Files:
In the project, right-click on the project name in the Explorer, select "Add" -> "New Item".
Select "TypeScript File", enter the filename, then click "Add". Writing TypeScript Code:
Write your code in the newly created TypeScript file. Configuring Compilation Options:
Compilation options for TypeScript can be set in the tsconfig.json file of the project. If this file is missing, add it manually.
In tsconfig.json, configure options such as the target JavaScript version (target), module system (module), and output directory (outDir). Compiling TypeScript:
In Visual Studio Code, compile the project by selecting "Build Solution" from the "Build" menu or using the shortcut (e.g., Ctrl + Shift + B).
TypeScript files will be compiled into JavaScript files according to the rules defined in tsconfig.json. Running and Debugging:
Depending on the project type, run and debug the compiled JavaScript code directly in Visual Studio Code using the built-in server or Node.js environment. Example: Suppose you are developing a simple web application; you might have an app file with the following content:

typescript
function greet(person: string) {
    return "Hello, " + person;
}

document.body.textContent = greet("world");

In the above steps, ensure tsconfig.json includes the correct compilation options, for example:

json
{
    "compilerOptions": {
        "target": "es5",
        "module": "none"
    }
}

After compilation, you can see output such as "Hello, world" in the browser. This is the basic workflow for compiling TypeScript in Visual Studio Code.