如何初始化一個typescript專案

myskies 發表於 2022-05-01

本文將展示如何從0開始初始化一個typescript專案。

點選訪問git倉庫, 點選下載程式碼包

初始化

首先,我們選定一個資料夾,然後在資料夾中執行npm init -y命令來對專案進行初始化。

[email protected] typescript-init % npm init -y
Wrote to /Users/panjie/github/yunzhiclub/typescript-init/package.json:

{
  "name": "typescript-init",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yunzhiclub/typescript-init.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/yunzhiclub/typescript-init/issues"
  },
  "homepage": "https://github.com/yunzhiclub/typescript-init#readme"
}

該命令將為我們生成一個package.json檔案:

[email protected] typescript-init % tree
.
├── README.md
└── package.json

0 directories, 2 files

安裝typescript

接下來,我們使用npm i typescript --save-dev來安裝ts

[email protected] typescript-init % npm i typescript --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description

+ [email protected]
added 1 package from 1 contributor and audited 1 package in 2.22s
found 0 vulnerabilities

typescript初始化

ts安裝後,我們也需要一個初始化操作,該操作將預設生成ts的配置檔案,對應的命令為npx tsc --init

[email protected] typescript-init % npx tsc --init

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

該命令將為我們自動生成tsconfig.json,如果你想進行一些定製,則只需要開啟此檔案,找到對應的項進行修改或啟用即可。

index.ts

基本的初始化工作完成後,便可以建立index.ts,並進行程式碼的測試了。

'use strict';

const hello = (world: string) => {
  console.log(`hello ${world}`);
}

hello('world');

編譯執行

檔案建立完成後進行編譯及執行:

[email protected] typescript-init % npx tsc index.ts
[email protected] typescript-init % node index.js
hello world

自動編譯執行

每次變更檔案化都手動執行一下編譯及執行固然可行,但這種方式的確無法忍受。tsc-watch則專門為此而生,執行npm install tsc-watch --save-dev來安裝tsc-watch

[email protected] typescript-init % npm install tsc-watch --save-dev
npm WARN [email protected] No description

+ [email protected]
added 20 packages from 16 contributors and audited 21 packages in 3.788s
found 0 vulnerabilities

安裝完成後,我們開啟package.json檔案,在scripts中增加以下dev項:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tsc-watch --noClear -p ./tsconfig.json --onSuccess \"node ./index.js\""
  },

然後我們在命令列中執行npm run dev則可以實現:當檔案變更時重新編譯、重新執行的目的。

參考文件