快捷導(dǎo)航

Node.js和Express中設(shè)置TypeScript的實(shí)現(xiàn)步驟

更新時(shí)間：2023年11月28日 11:47:58 作者：wusp1994

本文主要介紹了Node.js和Express中設(shè)置TypeScript的實(shí)現(xiàn)步驟文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

創(chuàng)建初始文件夾和package.json

mkdir node-express-typescript
cd node-express-typescript
npm init --yes

在初始化package.json文件之后，新創(chuàng)建的文件可能會(huì)像下面的代碼一樣：

{
  "name": "Your File Name",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts", // 將入口點(diǎn)從js更改為.ts
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安裝TypeScript和其他依賴項(xiàng)

npm install express mongoose cors mongodb dotenv

npm install  -D typescript ts-node-dev @types/express @types/cors

生成tsconfig.json文件

npx tsc --init

上述命令將生成一個(gè)名為tsconfig.json的新文件，其中包含以下默認(rèn)的編譯器選項(xiàng)：

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

在打開tsconfig.json文件后，您會(huì)看到許多其他被注釋掉的編譯器選項(xiàng)。在tsconfig.json中，compilerOptions是一個(gè)必填字段，需要指定。
- 將rootDir和outDir設(shè)置為src和dist文件夾

{
  "compilerOptions": {
    "outDir": "./dist"

    // other options remain same
  }
}

使用.ts擴(kuò)展名創(chuàng)建一個(gè)Express服務(wù)器

創(chuàng)建一個(gè)名為index.ts的文件并打開它

import express, { Express, Request, Response , Application } from 'express';
import dotenv from 'dotenv';

//For env File 
dotenv.config();

const app: Application = express();
const port = process.env.PORT || 8000;

app.get('/', (req: Request, res: Response) => {
  res.send('Welcome to Express & TypeScript Server');
});

app.listen(port, () => {
  console.log(`Server is Fire at http://localhost:${port}`);
});

監(jiān)聽文件更改并構(gòu)建目錄

npm install  nodemon

安裝這些開發(fā)依賴項(xiàng)后，更新package.json文件中的腳本：

{

  "scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
    "dev": "nodemon index.ts"
  }
}

運(yùn)行代碼

npm run dev

如果一切正常，您將在控制臺(tái)中看到以下消息：
Server is Fire at http://localhost:8000

到此這篇關(guān)于Node.js和Express中設(shè)置TypeScript的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)Node和Express設(shè)置TypeScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: