極簡Typescript+Node.js 安裝教程

FatGe發表於2018-12-25
TypeScriptNode.js

概述：此處有Typescript好處各種，Node.js好處各種，所以兩者結合一下。

1. 安裝環境 
win10 64位
node: v8.12.0
npm: 6.1.0
複製程式碼
  1. 專案構建
  • 首先建立目錄，並初始化node專案
# 建立目錄
mkdir ts-node-example
cd ts-node-example
# 初始化node專案
npm init -y
npm i --save-dev ts-node
複製程式碼

之後建立tsconfig.json配置檔案，用來指定編譯該專案的相關選項，該檔案需在TypeScript專案的根目錄下，類似於webpack的package.json配置。其內容為

{
  // 編譯選項,可以被忽略，這時編譯器會使用預設值
  "compilerOptions": {
    // 目的碼型別
    "target": "es5",
    // 指定生成哪個模組系統程式碼
    "module": "commonjs",
    // 生成相應的.d.ts檔案
    "declaration": true,
    // 編譯後結果所在目錄
    "outDir": "build"
  }
}
複製程式碼

tsconfig.json的相關配置文件；

  • 建立TypeScript + Node.js 專案

全域性安裝typescript

npm i -g typescript
// 建立src目錄，用於放置.ts檔案
mkdir src
複製程式碼

在src目錄下，建立index.ts檔案，內容為

console.log('Hello World!');
複製程式碼

之後修改package.json

{
    "name": "ts-node-example",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        // 新增compile
        "compile": "tsc",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "ts-node": "^7.0.1"
    }
}
複製程式碼

執行npm run compile

專案目錄變為

├── build
│   ├── index.d.ts
│   └── index.js
├── node_modules
├── package.json
├── package-lock.json
├── src
│   └── index.ts
└── tsconfig.json
複製程式碼
  1. 構建dev環境

監聽src目錄下.ts檔案的變化，如果發生變化，重新載入。

npm i --save-dev nodemon
// 區域性安裝typescript
npm i --save-dev typescript
複製程式碼

然後將ts-node並將其指向src的入口檔案

{
    "name": "ts-node-example",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "compile": "tsc && node build/index.js",
        // 新增 dev
        "dev": "nodemon --exec ./node_modules/.bin/ts-node -- ./src/index.ts",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "nodemon": "^1.18.9",
        "ts-node": "^7.0.1",
        "typescript": "^3.2.2"
    }
}
複製程式碼

執行npm run dev

  1. 構建TypeScript Module

在src目錄下建立greeter.ts檔案

├── build
│   ├── index.d.ts
│   └── index.js
├── node_modules
├── package.json
├── package-lock.json
├── src
│   └── index.ts
│   └── greeter.ts
└── tsconfig.json
複製程式碼

其內容為

export function Greeter(name: string): string {
    return 'Hello there, ' + name + '!'
}
複製程式碼

在index.ts中引入，有兩種引入方式

import { Greeter } from './lib/greeter'
/* 
import action = require('./lib/greeter')
const { Greeter } = action
*/
console.log(Greeter('Yang'));
複製程式碼
  1. 總結 一步步來吧，應該沒啥問題，記得把.json裡面的註釋刪掉就好。主要參考

相關文章