typescript基本环境配置及编辑器代码构建配置

最新推荐文章于 2024-06-28 22:54:10 发布

yw00yw

最新推荐文章于 2024-06-28 22:54:10 发布

阅读量503

点赞数

分类专栏： typescript 文章标签： typescript typescript编译 typescript环境配置

本文链接：https://blog.csdn.net/yw00yw/article/details/103868105

版权

typescript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装node构建node环境及npm包管理器

http://nodejs.cn/download/

通过npm安装typescript

npm install -g typescript

查看typescript版本

tsc -v

创建项目目录并初始化tsconfig.json文件

cd ts
tsc --init

修改生成的tsconfig.json文件

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs'",       
    "outDir": "./js/", 
    "rootDir": "./tscript/", 
    "esModuleInterop": true                   
  }
}

compilerOptions 编译的配置项
target 编译模板是es5
module 模型使用commonjs模块化
outDir 输入目录路径
rootDir 编译的目标路径

在Visual studio code中打开ts目录，在tscript目录中新建test.ts文件。

	function greeter(person: string) {
	    return "Hello, " + person;
	}
	let user = "Jane User";
	document.body.innerHTML = greeter(user);

编译测试

终端 > 运行任务 > 选择监视
在这里插入图片描述

在根目录下新建index.htm并引入构建编译成功的test.js

<body>
    <script src="./js/test.js"></script>
</body>

运行结果

在这里插入图片描述

最终目录

在这里插入图片描述

yw00yw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
typescript基本环境配置及编辑器代码构建配置

安装node构建node环境及npm包管理器http://nodejs.cn/download/通过npm安装typescriptnpm install -g typescript查看typescript版本tsc -v创建项目目录并初始化tsconfig.json文件cd tstsc --init修改生成的tsconfig.json文件{ "compile...
复制链接

扫一扫

专栏目录