Day03:【TypeScript 学起来】自动编译 tsc + nodemon 好方便

老婆:"下班後买十个包子回来,如果看到卖西瓜的就买一个。"
老公:"好。" (下班後带着一个包子回家)
老婆:"为什麽只有一个包子?"
老公:"因为我看到卖西瓜的。"

// 哈哈哈 这个超经典的 这不是笑话 根本就是日常会发生的事啦 XD


上一篇有提到,我们每写一次都要手动 tsc xx.ts 跟 node xx.js, 是不是很累,我就是很累,所以来分享这篇,让我们可以自动编译,加速学习时间。

  1. 新增2个资料夹 srcdist

  2. src 档案新增 index.ts, 并写入:

const index:string = "this's index";
console.log(index);
  1. 资料夹架构会长这样:
project

└───dist
│   │   
│   
└───src
    │   index.ts
  1. 我们在资料夹初始化专案, 执行 npm 起手式:
npm init -y
  1. 执行下方指令,就会产生 tsconfig.json 档案,是 TS 初始化设置文件。
tsc --init
  1. 打开 tsconfig.json,设定 outDir 及 rootDir 的路径。
"outDir": "./dist", //完成编译後生成 js 文件的路径                           
"rootDir": "./src",   //代表 ts 文件的入口路径
  1. 执行tsc,会看见编译後的index.jsdist的资料夹。
tsc
  1. 执行下方指令, 安装 nodemon 及 concurrently:
npm i nodemon concurrently --save-dev
  1. 在 package.json 修改 script 的指令。
  "scripts": {
    "start:build": "tsc -w",  //watch src的ts档并自动编译js档
    "start:run": "nodemon ./dist/index.js", //当有新的js档产生则去执行
    "start": "concurrently npm:start:*" //执行全部含有start的指令(包含 start:build 及 start:run)
  },
  1. 执行 :
npm start
  1. 此时,我们可以看到dist资料夹已编译好js档, 且在终端机也印出了 this's index, 表示执行成功~
project
│   node_modules
│   package-lock.json 
│   package.json 
│   tsconfig.json 
│
└───dist
│   │   index.js
│   
└───src
    │   index.ts

是不是很方便~demo可看这里, 我有同步在github。


这一篇设定在 tsconfig.json 设定了 outDir 及 rootDir ,下一篇就来笔记 tsconfig.json 还有哪些设定。 因为刚开始在看 handbook 介绍型别时发现他有提到 tsconfig,但那时我根本懵查查,决定把他挪到前面讲, 後面看就会比较顺~


参考资料

https://www.typescripttutorial.net/typescript-tutorial/nodejs-typescript/


<<:  Android学习笔记09

>>:  [DAY 03]物品拍卖价格查询功能(1/4)

论解决问题的爽度XD

哈哈~标题有点…希望不要有人介意哈,介意了也改不了嘿嘿。 这篇我要来说说上篇成果的呈现啦!还好我不放...

[ Day 30 | CSS ] 用 clip-path 绘制多边形

之前一直很好奇有些网站的背景图片是如何裁切成不同形状的, 除了本来就放置裁切好的图片以外不知道还有没...

Guaranteed Results with Updated SASM PDF Questions

Passing Scrum SASM certification exam with minimum...

App Inventor 学习笔记 2 : 密码的张眼与闭眼

现在的密码都会有贴心的 张眼模式, 让我们可以看到所输入的密码是否正确, AI2的PasswordT...

[Day6] 自我必备沟通力:Content & Context

发挥影响力 随时必备的两个元素:Content & Context 自觉、找镜子、了解与掌握...