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

心已赠人 2023-06-27 12:53 32阅读 0赞

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

*  [http://nodejs.cn/download/][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);

#### 编译测试 ####

终端 > 运行任务 > 选择监视  
![在这里插入图片描述][20200107092315843.png]

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

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

#### 运行结果 ####

![在这里插入图片描述][20200107092703324.png]

#### 最终目录 ####

![在这里插入图片描述][20200107092610185.png]

[http_nodejs.cn_download]: http://nodejs.cn/download/
[20200107092315843.png]: https://img-blog.csdnimg.cn/20200107092315843.png
[20200107092703324.png]: https://img-blog.csdnimg.cn/20200107092703324.png
[20200107092610185.png]: https://img-blog.csdnimg.cn/20200107092610185.png

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关 BurpSuite基本介绍及环境配置

BurpSuite基本介绍及环境配置 2018年08月10日 09:15:50 [WAHK][] 阅读数 1367 **BurpSuite简介** ...

绝地灬酷狼/ 2024年04月17日 05:32/ 0 赞/ 79 阅读

相关 TypeScript环境配置详解

一、TypeScript概述 1.1 TypeScript的概念 `TypeScript`是拥有类型的`JavaScript`超集，它可以编译成普通、干净、完整的`

约定不等于承诺〃/ 2024年04月01日 08:49/ 0 赞/ 86 阅读

相关 Flowable——环境构建及基本应用

目录 1、引入依赖 2、创建流程引擎 3、部署流程定义 4、查询流程定义 5、启动流程示例

港控/mmm°/ 2023年10月16日 04:27/ 0 赞/ 22 阅读

相关 TypeScript 环境配置

阅读目录介绍安装环境编辑器关闭JS的检验编译 TS 常见问题介绍 typescript 是 javascri

╰+哭是因爲堅強的太久メ/ 2023年10月06日 21:52/ 0 赞/ 74 阅读

相关 TypeScript基本操作，配置文件tsconfig.json详解,vscode和HBuilderX基本配置

Node 基本命令 npm安装依赖【npm install xxx】利用 npm 安装xxx依赖到当前命令行所在目录【npm install xxx -g】利

清疚/ 2023年07月08日 06:58/ 0 赞/ 71 阅读

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

安装node构建node环境及npm包管理器 [http://nodejs.cn/download/][http_nodejs.cn_download] 通过n

心已赠人/ 2023年06月27日 12:53/ 0 赞/ 33 阅读

相关 vue环境配置及基本概念

环境配置 1. 一路next安装![在这里插入图片描述][20191031214610147.png] 2. 打开cmd查看是否安装成功 ![在这里插入图

待我称王封你为后i/ 2023年06月12日 06:25/ 0 赞/ 35 阅读

相关 linux基本环境配置

如果是使用VM搭建，则需要进行VM的配置： -------------------- 顺便科普下NAT模式和桥接模式： ![14430142-1a52d649a

男娘i/ 2023年01月24日 04:30/ 0 赞/ 44 阅读

相关 git基本环境配置

yum源中已有的git版太低，所以选择源码编译，也比较简单，由于git上许多项目需要python环境不同，因此保留系统自带的python2.x版本，并编译python3.x

清疚/ 2022年09月24日 16:18/ 0 赞/ 233 阅读

相关 React + Typescript + Webpack 开发环境配置

对于复杂或多人开发的 `React` 项目来说，管理和使用每个组件的 `props` 、 `state` 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对

╰半夏微凉°/ 2022年07月14日 09:21/ 0 赞/ 270 阅读