javascript 前端 css 编写TypeScript并运行TypeScript程序（弄不出来）

在线编写并运行TypeScript

www.typescr

在代码编写完成之后，点击“Run”按钮即可运行生成的JavaScript代码。

TypeScript配置项：

“Config”（设置）标签页提供了用于配置TypeScript编译器的可视化工具。

Target：用于指定输出的JavaScript代码所参照的ECMAScript规范的版本。

JSX：用于指定JSX代码的生成方式，又名JavsScript XML，是JavaScript语言的扩展，常用在React应用中。

Module：用于指定生成模块代码的格式。

Lang：用于指定左侧编辑框使用的编程语言。

Compiler options from the TS Config：用于

本地编写并运行TypeScript

安装Visual Studio Code

安装TypeScript语言最简单的试是使用npm工具。

如果没有安装Noje.js，则需要到Node.js官网（nodejs.org/en/）上下载LTS版本的安装包并安装。

在安装Node.js的同时，也会自动安装npm工具。

使用如下命令来验证安装npm工具是否成功：

node -v

接下来，使用下面的命令全局安装TypeScript：

npm install -g typescript

“npm install”是npm命令行工具提供的命令之一，该命令用来安装npm代码包及其依赖项；

“-g”选项表示使用全局模式（nmp安装命令说明：docs.npmjs.com/cli/install）安装TypeScript语言；

最后的“typescript”代表是TypeScript语言在npm注册表中的名字。

使用下面的命令来验证TypeScript是否安装成功：

tsc --version

Microsoft 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 npm@9.6.1 to update!

npm notice

C:\Users\a-xiaobodou>tsc --version

Version 4.9.5

C:\Users\a-xiaobodou>npm install -g npm@9.6.1

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>

创建文件

首先，新建一个文件名，sample的目录作为根目录，启动Visual Studio Code，然后将sample文件夹拖曳到Visual Studio Code窗口中。或者使用快捷键"Ctrl+K Ctrl+O"打开"Open Folder..."对话框

新建tsconfig.json文件

使用新建文件快捷键“Ctr+N”来创建一个文件并输入以下代码：

{

"compilerOptions":{

"strict":true,

"target":"es5"

}

}

使用保存文件快捷键“Ctrl+S”将这个文件保存为“tsconfig.json”。“tsconfig.json”是TypeScript编译器默认使用的配置文件。

新建hello-world.ts文件

使用新建文件快捷键“Ctr+N”来创建一个文件并输入以下代码： 

const greeting='hello, world';

console.log(greeting);

使用保存文件快捷键“Ctrl+S”将这个文件保存为“hello-world.ts”。TypeScript源文件的常规扩展名为“.ts”。

编译程序

使用快捷键”Ctrl+Shift+B“或从菜单栏里选择”Terminal->Run Build Task“来打开并运行构建任务面板，然后再选择”tsc:build-tsconfig.json“来编译TypeScript程序。

tasks.json里tasks删除之前：

tasks.json里tasks删除内容之后：

后来找到了方法：在打开.vscode文件夹里settings.json文件打开，然后菜单栏里选择“Terminal->Run Build Task”，选择"tsc:build-tsconfig.json"，如下：

 结果成功编译新文件hello-world.js，如下：

当编译完成后，在”hello-world.ts“文件的目录下会生成一个同名的”hello-world.js“文件，它就是编译输出的JavsScript程序。

此时的目录结构如下所示：

运行程序

在Visual Studio Code里使用"Ctrl+`"（“`”为反引号，位于键盘上数字键1的左侧）快捷键打开命令行窗口。然后，使用Node.js命令行工具来运行"hello-world.js"，示例如下：

node hello-world.js

运行上述命令将打印出信息“hello,world”如下：

可选步骤：设置默认构建任务

为了便于以后多次运行、编译TypeScript命令，可以将“tsc:build-tsconfig.json”设置为默认构建任务。使用快捷键“Ctr+Shift+B”打开运行构建任务面板，点击右侧齿轮形状的配置按钮打开任务配置文件。

{

"version": "2.0.0",

"tasks": [

{

"type": "typescript",

"tsconfig": "tsconfig.json",

"problemMatcher": [

"$tsc"

],

"group": "build",

"label": "tsc: build - tsconfig.json"

}

]

}

然后，将下面的配置输入task.json文件并保存：

{

"version": "2.0.0",

"tasks": [

{

"type": "typescript",

"tsconfig": "tsconfig.json",

"problemMatcher": [

"$tsc"

],

"group": {

"kind": "build",

"isDefault": true

}

}

]

}

这样配置之后，当使用快捷键“Ctrl+ Shift + B”时会直接编译TypeScript程序。

其它：

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. (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>

相关阅读