Write and run TypeScript online
www.typescr
After the code is written, click the "Run" button to run the generated JavaScript code.
TypeScript configuration items:
The "Config" tab provides visual tools for configuring the TypeScript compiler.
Target: used to specify the version of the ECMAScript specification that the output JavaScript code refers to.
JSX: Used to specify the generation method of JSX code, also known as JavsScript XML, which is an extension of the JavaScript language and is commonly used in React applications.
Module: used to specify the format for generating module code.
Lang: used to specify the programming language used by the edit box on the left.
Compiler options from the TS Config：用于
Write and run TypeScript locally
Install Visual Studio Code
The easiest way to install the TypeScript language is to use the npm tool.
If Noje.js is not installed, you need to download the LTS version of the installation package from the Node.js official website (nodejs.org/en/) and install it.
When Node.js is installed, the npm tool will also be automatically installed.
Use the following command to verify whether the npm tool installation is successful:
node -vNext, install TypeScript globally using the following command:
npm install -g typescript"npm install" is one of the commands provided by the npm command line tool. This command is used to install npm code packages and their dependencies;
The "-g" option indicates using global mode (nmp installation command instructions: docs.npmjs.com/cli/install) to install the TypeScript language;
The last "typescript" represents the name of the TypeScript language in the npm registry.
Use the following command to verify that TypeScript is installed successfully:
tsc --versionMicrosoft Windows [Version 10.0.22000.1574]
(c) Microsoft Corporation. All rights reserved.
C:\Users\a-xiaobodou>node -v
v16.17.0
C:\Users\a-xiaobodou>npm install -g typescript
added 1 package in 3s
npm notice
npm notice New minor version of npm available! 9.3.1 -> 9.6.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.1
npm notice Run npm install -g [email protected] to update!
npm notice
C:\Users\a-xiaobodou>tsc --version
Version 4.9.5
C:\Users\a-xiaobodou>npm install -g [email protected]
removed 4 packages, and changed 62 packages in 7s
16 packages are looking for funding
run `npm fund` for details
C:\Users\a-xiaobodou>npm install -g typescript
changed 1 package in 2s
C:\Users\a-xiaobodou>tsc --version
Version 4.9.5
C:\Users\a-xiaobodou>
Create a file
First, create a new file name, use the sample directory as the root directory, start Visual Studio Code, and then drag the sample folder into the Visual Studio Code window. Or use the shortcut key "Ctrl+K Ctrl+O" to open the "Open Folder..." dialog box
Create a new tsconfig.json file
Use the New File shortcut "Ctr+N" to create a file and enter the following code:
{
"compilerOptions":{
"strict":true,
"target":"es5"
}
}Use the save file shortcut "Ctrl+S" to save this file as "tsconfig.json". "tsconfig.json" is the configuration file used by the TypeScript compiler by default.
Create a new hello-world.ts file
Use the New File shortcut "Ctr+N" to create a file and enter the following code:
const greeting='hello, world';
console.log(greeting);Use the save file shortcut "Ctrl+S" to save this file as "hello-world.ts". The general extension for TypeScript source files is ".ts".
Compiler
Use the shortcut key "Ctrl+Shift+B" or select "Terminal->Run Build Task" from the menu bar to open and run the build task panel, and then select "tsc:build-tsconfig.json" to compile the TypeScript program.
Before deleting tasks in tasks.json:
After deleting the contents of tasks in tasks.json:
Later I found a way: open the settings.json file in the .vscode folder, then select "Terminal->Run Build Task" in the menu bar, select "tsc:build-tsconfig.json", as follows:
The result is that the new file hello-world.js is successfully compiled, as follows:
When the compilation is completed, a "hello-world.js" file with the same name will be generated in the directory of the "hello-world.ts" file, which is the compiled output JavsScript program.
The directory structure at this time is as follows:
Run program
Use the "Ctrl+`" ("`" is a backtick mark, located to the left of the number key 1 on the keyboard) shortcut key to open the command line window in Visual Studio Code. Then, use the Node.js command line tool to run "hello-world.js". The example is as follows:
node hello-world.jsRunning the above command will print out the information "hello, world" as follows:
Optional step: Set a default build task
In order to facilitate running and compiling TypeScript commands multiple times in the future, you can set "tsc:build-tsconfig.json" as the default build task. Use the shortcut key "Ctr+Shift+B" to open the run build task panel, and click the gear-shaped configuration button on the right to open the task configuration file.
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": "build",
"label": "tsc: build - tsconfig.json"
}
]
}Then, enter the following configuration into the tasks.json file and save it:
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}After this configuration, the TypeScript program will be compiled directly when using the shortcut key "Ctrl+Shift+B".
other:
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> tsc.cmd -v
Version 4.9.5
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> tsc.cmd --init
error TS5054: A 'tsconfig.json' file is already defined at: 'C:/Users/a-xiaobodou/OneDrive - Microsoft/Projects/TypeScript/sample/tsconfig.json'.
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> Get-ExecutionPolicy
AllSigned
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> Set-ExecutionPolicy -Scope CurrentUs
cmdlet Set-ExecutionPolicy at command pipeline position 1
Supply values for the following parameters:
ExecutionPolicy: RemoteSigned
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> Get-ExecutionPolicy
RemoteSigned
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> tsc hello-world.ts
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> node hello-world.js
hello, world
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> npm i -g ts-node
added 19 packages in 5s
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample> ts-node hello.ts
node:internal/modules/cjs/loader:959
throw err;
^
Error: Cannot find module './hello.ts'
Require stack:
- C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample\imaginaryUncacheableRequireResolveScript
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
at Function.resolve (node:internal/modules/cjs/helpers:108:19)
at requireResolveNonCached (C:\Users\a-xiaobodou\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js:549:16)
at getProjectSearchDir (C:\Users\a-xiaobodou\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js:519:40)
at phase3 (C:\Users\a-xiaobodou\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js:267:27)
at bootstrap (C:\Users\a-xiaobodou\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js:47:30)
at main (C:\Users\a-xiaobodou\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js:33:12)
at Object.<anonymous> (C:\Users\a-xiaobodou\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js:579:5)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\a-xiaobodou\\OneDrive - Microsoft\\Projects\\TypeScript\\sample\\imaginaryUncacheableRequireResolveScript'
]
}
PS C:\Users\a-xiaobodou\OneDrive - Microsoft\Projects\TypeScript\sample>