您好,登錄后才能下訂單哦!
JavaScript 是一門(mén)動(dòng)態(tài)弱類(lèi)型語(yǔ)言,對(duì)變量的類(lèi)型非常寬容。JavaScript使用靈活,開(kāi)發(fā)速度快,但是由于類(lèi)型思維的缺失,一點(diǎn)小的修改都有可能導(dǎo)致意想不到的錯(cuò)誤,使用TypeScript可以很好的解決這種問(wèn)題。TypeScript是JavaScript的一個(gè)超集,擴(kuò)展了 JavaScript 的語(yǔ)法,增加了靜態(tài)類(lèi)型、類(lèi)、模塊、接口和類(lèi)型注解等功能,可以編譯成純JavaScript。本文將介紹如何在node服務(wù)中使用TypeScript。
npm install typescript --save
npm install ts-node --save
npm install nodemon --save
或者
yarn add typescript
yarn add ts-node
yarn add nodemon
另外,還需要安裝依賴模塊的類(lèi)型庫(kù):
npm install @types/koa --save
npm install @types/koa-router --save
…
或者
yarn add @types/koa
yarn add @types/koa-router
…
當(dāng)使用tsc命令進(jìn)行編譯時(shí),如果未指定ts文件,編譯器會(huì)從當(dāng)前目錄開(kāi)始去查找tsconfig.json文件,并根據(jù)tsconfig.json的配置進(jìn)行編譯。
可以通過(guò)files屬性來(lái)指定需要編譯的文件,如下所示:
{
"files": [
"src/server.ts"
]
}
另外也可以通過(guò)使用”include”和”exclude”屬性來(lái)指定,采用類(lèi)似glob文件匹配模式,如下所示:
{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
支持的通配符:
compilerOptions 屬性用于配置編譯選項(xiàng),與tsc命令的選項(xiàng)一致,常用的配置如下所示:
{
"compilerOptions": {
// 指定編譯為ECMAScript的哪個(gè)版本。默認(rèn)為"ES3"
"target": "ES6",
// 編譯為哪種模塊系統(tǒng)。如果target為"ES3"或者"ES5",默認(rèn)為"CommonJS",否則默認(rèn)為"ES6"
"module": "CommonJS",
// 模塊解析策略,"Classic" 或者 "Node"。如果module為"AMD"、"System"或者"ES6",默認(rèn)為"Classic",否則默認(rèn)為"Node"
"moduleResolution": "Node",
// 是否支持使用import cjs from 'cjs'的方式引入commonjs包
"esModuleInterop": true,
// 編譯過(guò)程中需要引入的庫(kù)。target為"ES5"時(shí),默認(rèn)引入["DOM","ES5","ScriptHost"];target為"ES6"時(shí),默認(rèn)引入["DOM","ES6","DOM.Iterable","ScriptHost"]
"lib": ["ES6"],
// 編譯生成的js文件所輸出的根目錄,默認(rèn)輸出到ts文件所在的目錄
"outDir": "dist",
// 生成相應(yīng)的.map文件
"sourceMap": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
target是編譯目標(biāo),可以指定編譯為ECMAScript的哪個(gè)版本,默認(rèn)為”ES3”。ECMAScript的版本有:”ES3” 、”ES5”、 “ES6” 或者 “ES2015”、 “ES2016”、 “ES2017”、”ES2018”、”ES2019”、 “ES2020”、”ESNext”。
module指定編譯為哪種模塊系統(tǒng),如果target為”ES3”或者”ES5”,默認(rèn)為”CommonJS”,否則默認(rèn)為”ES6”。可選用的模塊系統(tǒng)有:”None”、 “CommonJS”、 “AMD”,、”System”、 “UMD”、”ES6”或者”ES2015”、”ESNext”。
moduleResolution指定模塊解析策略,模塊解析策略有:”Classic”、”Node”,如果module為”AMD”、”System”或者”ES6”,默認(rèn)為”Classic”,否則默認(rèn)為”Node”。
在/root/src/moduleA.ts中以import { b } from “./moduleB” 方式相對(duì)引用一個(gè)模塊。
Classic解析策略,查找過(guò)程:
/root/src/moduleB.ts
/root/src/moduleB.d.ts
Node解析策略,查找過(guò)程:
/root/src/moduleB.ts
/root/src/moduleB.tsx
/root/src/moduleB.d.ts
/root/src/moduleB/package.json (如果指定了"types"屬性)
/root/src/moduleB/index.ts
/root/src/moduleB/index.tsx
/root/src/moduleB/index.d.ts
在/root/src/moduleA.ts中以import { b } from “moduleB” 方式非相對(duì)引用一個(gè)模塊。
Classic解析策略,查找過(guò)程:
/root/src/moduleB.ts
/root/src/moduleB.d.ts
/root/moduleB.ts
/root/moduleB.d.ts
/moduleB.ts
/moduleB.d.ts
Node解析策略,查找過(guò)程:
/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (如果指定了"types"屬性)
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts
/root/node_modules/moduleB.ts
/root/node_modules/moduleB.tsx
/root/node_modules/moduleB.d.ts
/root/node_modules/moduleB/package.json (如果指定了"types"屬性)
/root/node_modules/moduleB/index.ts
/root/node_modules/moduleB/index.tsx
/root/node_modules/moduleB/index.d.ts
/node_modules/moduleB.ts
/node_modules/moduleB.tsx
/node_modules/moduleB.d.ts
/node_modules/moduleB/package.json (如果指定了"types"屬性)
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts
esModuleInterop為true時(shí),表示支持使用import d from ‘cjs’的方式引入commonjs包。當(dāng)commonjs模塊轉(zhuǎn)化為esm時(shí),會(huì)增加 importStar 和 importDefault 方法來(lái)處理轉(zhuǎn)化問(wèn)題。
cjs為commonjs模塊,代碼如下:
module.exports = { name: 'cjs' };
另外一個(gè)模塊以esm方式引用了cjs模塊,代碼如下:
import cjsDefault from 'cjs';
import * as cjsStar from 'cjs';
console.log('cjsDefault =', cjsDefault);
console.log('cjsStar =', cjsStar);
輸出結(jié)果為:
cjsDefault = { name: 'cjs' }
cjsStar = { name: 'cjs', default: { name: 'cjs' } }
編譯后生成的代碼如下:
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const cjs_1 = __importDefault(require("cjs"));
const cjsStar = __importStar(require("cjs"));
console.log('cjsDefault =', cjs_1.default);
console.log('cjsStar =', cjsStar);
lib指定編譯過(guò)程中需要引入的庫(kù)。target為”ES5”時(shí),默認(rèn)引入[“DOM”,”ES5”,”ScriptHost”];target為”ES6”時(shí),默認(rèn)引入[“DOM”,”ES6”,”DOM.Iterable”,”ScriptHost”]。由于本示例TypeScript是用于服務(wù)端的,不需要使用DOM和ScriptHost,所以lib設(shè)為[“ES6”]。
輸出目錄,編譯生成的js文件所輸出的根目錄,默認(rèn)輸出到ts文件所在的目錄。
是否生成source map文件,通過(guò)使用source map 可以在錯(cuò)誤信息中可以顯示源碼位置。
要想根據(jù)source map 顯示錯(cuò)誤信息源碼位置,還需要在入口文件引入source-map-support 模塊,如下:
import 'source-map-support/register';
入口文件為src/server.ts,package.json中的scripts配置如下:
{
"scripts": {
"dev": "nodemon --watch src -e ts,tsx --exec ts-node src/server.ts",
"build": "tsc",
"start": "node dist/server.js"
},
…
}
TypeScript 會(huì)自動(dòng)從 node_modules/ @types 目錄獲取模塊的類(lèi)型定義,引用的模塊都需要安裝對(duì)應(yīng)類(lèi)型庫(kù),如:
npm install @types/koa --save
安裝后,會(huì)在node_modules/ @types 目錄下找到koa 文件夾,該文件夾下有koa相關(guān)的類(lèi)型定義文件。當(dāng)引用koa模塊時(shí)會(huì)自動(dòng)引入node_modules/ 和 node_modules/ @types下的 koa 包。如果某個(gè)模塊沒(méi)有類(lèi)型庫(kù)或者對(duì)某個(gè)模塊進(jìn)行了擴(kuò)展需要修改類(lèi)型定義,這時(shí)需要引入自定義的類(lèi)型。
{
"compilerOptions": {
…
// 類(lèi)型聲明文件所在目錄
"typeRoots": ["./node_modules/@types", "./src/types"],
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
src/types是存放自定義類(lèi)型的目錄,本示例中src/types目錄已被include包含,如果自定義的類(lèi)型目錄未被include包含還需要在include中添加該目錄。
import * as Koa from "koa";
declare module "koa" {
interface Request {
body?: object;
rawBody: string;
}
}
這里給koa的request對(duì)象增加body和rawBody兩個(gè)屬性,分別用于存放請(qǐng)求體的json對(duì)象和原始字符串。
import Koa from "koa";
function getRawBody(ctx: Koa.Context): Promise<string> {
return new Promise((resolve, reject) => {
try {
let postData: string = '';
ctx.req.addListener('data', (data) => {
postData += data;
});
ctx.req.on('end', () => {
resolve(postData);
});
} catch (e) {
console.error('獲取body內(nèi)容失敗', e);
reject(e);
}
})
}
export default function jsonBodyParser (): Koa.Middleware {
return async(ctx: Koa.Context, next: Koa.Next) => {
const rawBody: string = await getRawBody(ctx);
const request: Koa.Request = ctx.request;
request.rawBody = rawBody;
if (rawBody) {
try {
request.body = JSON.parse(rawBody);
} catch (e) {
request.body = {};
}
}
await next();
};
}
jsonBodyParser()會(huì)返回一個(gè)koa中間件,這個(gè)中間件將獲取請(qǐng)求體的內(nèi)容,將原始內(nèi)容字符串賦值到ctx.request.rawBody,將請(qǐng)求體內(nèi)容json對(duì)象賦值到ctx.request.body。由于src/types/koa/index.d.ts自定義類(lèi)型已經(jīng)擴(kuò)展了Koa.Request的這兩個(gè)屬性,執(zhí)行npm run build命令,使用 tsc 進(jìn)行編譯,可以編譯成功。但是當(dāng)執(zhí)行 npm run dev 時(shí),會(huì)提示編譯錯(cuò)誤,那是因?yàn)閠s-node默認(rèn)不會(huì)根據(jù)配置中的files、include 和 exclude 加載所有ts文件,而是從入口文件開(kāi)始根據(jù)引用和依賴加載文件。最簡(jiǎn)單的解決辦法就是在 ts-node 命令后增加 —files 參數(shù),表示按配置的files、include 和 exclude加載ts文件,如下:
{
"scripts": {
"dev": " nodemon --watch src -e ts,tsx --exec ts-node --files src/server.ts",
}
}
本文介紹了如何在node服務(wù)中使用TypeScript,具體的TypeScript語(yǔ)法規(guī)則網(wǎng)上有很多相關(guān)的資料,這里就不再介紹了。本文相關(guān)的代碼已提交到GitHub以供參考,
項(xiàng)目地址:
https://github.com/liulinsp/node-server-typescript-demo。
作者:宜信技術(shù)學(xué)院 劉琳
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。