TypeScript文件转JS文件

 

方式一：ts 手动编译成 js

先安装ts

npm install -g typescript

检测版本

tsc -v

ts 编译成 js

1.新建 ts 文件夹，使用 vscode 打开，新建 index.ts，代码如下

(() => {
  const username: string = "小明";
  console.log(username);
})();

2.打开控制台执行 tsc index.ts 自动生成 index.js，代码如下

(function () {
    var username = "小明";
    console.log(username);
})();

 

注意：测试代码要放入 ()() 立即执行函数里，否则执行 tsc index.ts 后 ts 文件变量飘红

 

方式二：ts 自动编译成 js

生成 tsconfig.json 配置文件

新建 ts 文件夹，使用 vscode 打开，终端执行

tsc --init

 

修改 tsconfig.json 配置文件

创建tsconfig.json文件，然后根据自己的需要进行修改，比如输入输出目录，包含的库等等。

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [ "dom", "es5", "es2015.promise"],
    "target": "es5",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "./dist",    // 指定输出目录            
    "rootDir": "./src",  // 指定输出文件目录(用于输出)，用于控制输出目录结构
  },
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules",
    "library",
    "local",
    "temp",
    "build",
    "settings"
  ],
}

 

测试

1.新建 js，ts 文件夹，在 ts 文件夹中新建 index.ts 代码如下

(() => {
  const username: string = "小明";
  console.log(username);
})();

2.vscode 操作：终端 --> 运行任务 --> 选择 tsc:监视-tsconfig.json

这样在修改 ts 文件内容，保存时会自动编译