首页 前端知识 VSCode开发TypeScript 不能编译通过

VSCode开发TypeScript 不能编译通过

2024-06-03 12:06:43 前端知识 前端哥 639 406 我要收藏

VSCode开发TypeScript 不能编译通过

TypeScript是JaveScript的超集,为JavaScript增加了很多特性,它可以编译成纯JavaScript在浏览器上运行。TypeScript已经成为各种流行框架和前端应用开发的首选。本文概要介绍使用VS Code开发TypeScript的过程。

第一个程序

在VS Code中开发TypeScript,首先要安装TypeScript,这里使用npm安装:

npm install typescript -g

安装完成后,运行下面代码看一下版本:

tsc -version

进入控制台,创建一个文件夹,进入这个文件夹,运行命令code .。这会启动VS Code,并且打开当前的文件夹。在文件夹中创建一个文件hello.ts,写几句代码:

let v="hello";
console.log(v);

进入控制台,输入 tsc hello.ts,会生成对应的hello.js,输入node hello.js,会运行代码。

配置文件tsconfig.json

现在我们创建TypeScript项目的配置文件tsconfig.json,最简单的内容如下:

"compilerOptions": { "target": "es5", "module": "commonjs" }

编辑这个文件时,VSCode的智能提示很有帮助。常用的设置还有:js代码的输出路径、是否可以包括js文件、调试时使用的代码映射等等,下面是复杂一些的配置:

"compilerOptions": { "target": "es5", "module": "commonjs", "allowJs": true, "sourceMap": true, "outDir": "out" }

这里输出路径设置为out,我们把前面编译生成的js文件删掉,重新编译一下,注意,由于有了tsconfig.json文件,在终端中只要输入tsc就可以了。

可以看到,编译的文件保存在out子目录中,并且多了map文件。

现在我们看如何在VS Code中进行调试,在前面的ts代码界面,按F5调试,会出现选择环境的提示框,选择Node.js,出现错误

选择“配置任务”,然后选择“tsc: 构建 - tsconfig.json”,这时,会创建新的文件夹.vscode,在这个文件夹中创建task.json,内容如下

"version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": [ "$tsc" ], "group": "build", "label": "tsc: 构建 - tsconfig.json" } ]

再次按F5,仍然出现上面的错误。选择添加配置,会创建“launch.json”文件:

"version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "启动程序", "skipFiles": [ "<node_internals>/**" ], "program": "${workspaceFolder}\\helloworld.ts", "preLaunchTask": "tsc: build - tsconfig.json", "outFiles": [ "${workspaceFolder}/out/**/*.js" ] } ]

waring:
 launch.json 中,一定要加一句
"preLaunchTask": "tsc: build - tsconfig.json",
如果不加,还是编译不通过的

再次按F5,仍然会出现错误,检查一下,会发现生成的两个文件中,任务的名称是不一样的,将task.json中的“tsc: 构建 - tsconfig.json”修改为“tsc: build - tsconfig.json”,再次按F5运行,这次可以了。试着加个断点,也可以:

模块化

我们希望模块化开发我们的代码,将代码分割到独立的文件中,便于分别开发与调试。我们希望显示地声明引用,避免全局变量函数等等带来的混乱。这时,我们需要使用export声明可以被其它模块使用的函数和变量,在使用这些函数和变量的模块中,使用import导入需要的函数、变量等等。我们创建一个新的文件myfunctions.ts,里面只有一个函数:

export function myName(){
    return "张三";
}

修改helloworld.ts,调用这个函数:

import {myName} from './myfunctions'
let v="hello"+myName();
console.log(v);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10629.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!