Typescript 開發環境的最佳實踐

Typescript 開發環境的最佳實踐

0️⃣ git init（略）

1️⃣️️ 初始化：$ yarn add -D ts-node typescript

2️⃣ 生成 tsconfig.json：$ yarn tsc -init

3️⃣ 配置 TSLint：$ yarn add tslint -D

4️⃣ 生成 tslint.json：$ yarn tslint --init

5️⃣ 創建 src/index.ts：$ mkdir src && echo "console.log('Hello Typescript')" > src/index.ts

6️⃣ 執行 .ts 文件：$ yarn ts-node src/index.ts

7️⃣ 安裝 husky（沒錯，就是二哈🐕，哈士奇🐕）： $ yarn add husky -D

8️⃣ 打開 package.json，添加 husky 的 hook： 每次提交代碼前，都會執行一次TSLint的檢查命令。

{
    "husky": { "pre-commit": "yarn tslint -c tslint.json './**/*.ts'" } }

9️⃣ 安裝命令行交互神器 commander.js： $ yarn add commander

const commander = require('commander');
const pkg = require('../package.json');

commander
  .version(pkg.version)
  .description(pkg.description)
  .usage('[options] <command> [...]')
  .option('-c, --city [name]', 'Add city name')
  .parse(process.argv);

if (process.argv.slice(2).length === 0) {
    commander.help();
    process.exit()
}

1️⃣0️⃣ 測試命令： $ yarn ts-node src/index.ts -h

$ yarn ts-node src/index.ts -h
yarn run v1.10.1
$ C:\Users\Lee\Desktop\ts-weather\node_modules\.bin\ts-node src/index.ts -h
Usage: index.ts [options] <command> [...]

Options:
  -V, --version  output the version number
  -c, --city     Add city name
  -h, --help     output usage information
Done in 1.91s.

1️⃣1️⃣ 獲取命令行輸入：$ yarn ts-node src/index.ts --city dongguan

console.log(commander.city) // => dongguan

1️⃣2️⃣ 添加命令行顏色： $ yarn add colors

const colors = require('colors');
const commander = require('commander');
const pkg = require('../package.json');

commander
  .version(pkg.version)
  .description(pkg.description)
  .usage('[options] <command> [...]')
  .option('-c, --city [name]', 'Add city name')
  .parse(process.argv);

if (process.argv.slice(2).length === 0) {
    commander.outputHelp(colors.red);
    process.exit()
}

​