使用 TypeScript 實作「密碼產生器」套件

TypeScript
, , , ,

建立專案

1
mkdir password-generator-js

使用以下指令建立 package.json 檔：

1
npm init

安裝 TypeScript 和 Jest 測試套件。

1
npm i -D typescript jest ts-jest @types/jest

建立 tsconfig.json 檔：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "outDir": "dist",
    "lib": [
      "es2016",
    ],
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

安裝 eslint 代碼檢查套件。

1
2
3
4
5
npm install eslint \
    eslint-config-airbnb-typescript \
    eslint-plugin-import@^2.22.0 \
    @typescript-eslint/eslint-plugin@^4.4.1 \
    --save-dev

修改 .eslintrc.js 檔：

1
2
3
4
5
6
7
8
module.exports = {
  extends: [
    'airbnb-typescript/base',
  ],
  parserOptions: {
    project: './tsconfig.json',
  },
};

新增 .eslintignore 檔：

1
2
3
node_modules/
dist/
jest.config.js

在 package.json 檔的腳本中，加入以下指令：

1
2
3
4
5
6
7
{
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "lint": "eslint src test"
  },
}

實作

在 src 資料夾建立 index.ts 檔：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
interface Config {
  length: number,
  letters: boolean,
  symbols: boolean,
  numbers: boolean,
}

export default class Generator {
  static generate(config: Config): string {
    const { length } = config;
    const letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
    const numbers = '012345678901234567890123456789012345678901234567890123456789';
    let characters = '';
    if (config.letters) characters += letters;
    if (config.symbols) characters += symbols;
    if (config.numbers) characters += numbers;
    if (!characters) return '';
    const rdn = (n: number): number => Math.floor(Math.random() * n);
    const rds = (s: string): string => s[(rdn(s.length))];
    let s = '';
    for (let i = 0; i < length; i += 1) { s += rds(characters); }
    return s;
  }
}

測試

在 test 資料夾新增 index.test.ts 檔：

1
2
3
4
5
6
7
8
9
10
11
12
import Generator from '../src';

test('generate', () => {
  const config = {
    length: 20,
    letters: true,
    symbols: false,
    numbers: false,
  };
  const password = Generator.generate(config);
  expect(password).toHaveLength(20);
});

執行測試。

1
npm run test

發布套件

建立 .gitignore 檔，並推送至 GitHub。

1
2
dist/
node_modules/

修改 package.json 檔，指定只有 dist 資料夾中的內容需要被發布。

1
2
3
4
5
6
{
  "main": "dist/index.js",
  "files": [
    "dist"
  ]
}

測試發布，查看即將發布的檔案列表。

1
npm publish --dry-run

登入 npm 套件管理平台。

1
npm login

發布套件。

1
npm publish --access=public

程式碼