ขยายวัตถุคำขอด่วนโดยใช้ typescript

ฉันพยายามเพิ่มคุณสมบัติเพื่อแสดงวัตถุคำขอจากมิดเดิลแวร์โดยใช้ typescript อย่างไรก็ตามฉันไม่สามารถหาวิธีเพิ่มคุณสมบัติพิเศษให้กับวัตถุได้ ฉันไม่ต้องการใช้เครื่องหมายวงเล็บถ้าเป็นไปได้

ฉันกำลังมองหาวิธีแก้ปัญหาที่จะช่วยให้ฉันสามารถเขียนสิ่งที่คล้ายกันนี้ได้ (ถ้าเป็นไปได้):

app.use((req, res, next) => {
    req.property = setProperty(); 
    next();
});

คุณต้องการที่จะสร้างนิยามที่กำหนดเองและใช้คุณลักษณะใน typescript เรียกว่าปฏิญญาผสาน ซึ่งมักใช้กันทั่วไปเช่นในmethod-override.

สร้างไฟล์custom.d.tsและให้แน่ใจว่าจะรวมไว้ในของคุณtsconfig.json's files-section ถ้ามี เนื้อหาสามารถมีลักษณะดังนี้:

declare namespace Express {
   export interface Request {
      tenant?: string
   }
}

สิ่งนี้จะช่วยให้คุณสามารถใช้สิ่งนี้ได้ตลอดเวลาในโค้ดของคุณ:

router.use((req, res, next) => {
    req.tenant = 'tenant-X'
    next()
})

router.get('/whichTenant', (req, res) => {
    res.status(200).send('This is your tenant: '+req.tenant)
})

ตามที่แนะนำโดยความคิดเห็นindex.d.tsคุณเพียงแค่ประกาศต่อExpressสมาชิกใหม่ทั่วโลกเนมสเปซ ตัวอย่าง:

declare global {
  namespace Express {
    interface Request {
      context: Context
    }
  }
}

ตัวอย่างเต็ม:

import * as express from 'express';

export class Context {
  constructor(public someContextVariable) {
  }

  log(message: string) {
    console.log(this.someContextVariable, { message });
  }
}

declare global {
  namespace Express {
    interface Request {
      context: Context
    }
  }
}

const app = express();

app.use((req, res, next) => {
  req.context = new Context(req.url);
  next();
});

app.use((req, res, next) => {
  req.context.log('about to return')
  res.send('hello world world');
});

app.listen(3000, () => console.log('Example app listening on port 3000!'))

ขยาย namespaces ทั่วโลกได้รับการคุ้มครองเพิ่มเติมได้ที่ GitBook

สำหรับ Express เวอร์ชันใหม่ ๆ คุณต้องเพิ่มexpress-serve-static-coreโมดูล

สิ่งนี้จำเป็นเพราะตอนนี้วัตถุ Express มาจากที่นั่น: https://github.com/DefininiteTyped/DefininiteTyped/blob/8fb0e959c2c7529b5fa4793a44b41b797ae671b9/types/express/index.d.ts#L19

โดยทั่วไปให้ใช้สิ่งต่อไปนี้:

declare module 'express-serve-static-core' {
  interface Request {
    myField?: string
  }
  interface Response {
    myField?: string
  }
}

คำตอบที่ยอมรับ (เช่นเดียวกับคนอื่น ๆ ) ไม่ได้ผลสำหรับฉัน แต่

declare module 'express' {
    interface Request {
        myProperty: string;
    }
}

เคยทำ. หวังว่าจะช่วยใครสักคน

หลังจากลอง 8 หรือมากกว่านั้นคำตอบและไม่ประสบความสำเร็จ ในที่สุดผมก็มีการจัดการที่จะได้รับมันทำงานร่วมกับjd291 's ความคิดเห็นที่ชี้ไปยัง3mards Repo

สร้างไฟล์ในฐานที่เรียกว่าtypes/express/index.d.ts. และในนั้นเขียน:

declare namespace Express {
    interface Request {
        yourProperty: <YourType>;
    }
}

และรวมไว้ในtsconfig.json:

{
    "compilerOptions": {
        "typeRoots": ["./types"]
    }
}

จากนั้นyourPropertyควรเข้าถึงได้ภายใต้ทุกคำขอ:

import express from 'express';

const app = express();

app.get('*', (req, res) => {
    req.yourProperty = 
});

ไม่มีโซลูชันใดที่นำเสนอได้ผลสำหรับฉัน ฉันลงเอยด้วยการขยายส่วนต่อประสานคำขอ:

import {Request} from 'express';

export interface RequestCustom extends Request
{
    property: string;
}

จากนั้นจะใช้มัน:

import {NextFunction, Response} from 'express';
import {RequestCustom} from 'RequestCustom';

someMiddleware(req: RequestCustom, res: Response, next: NextFunction): void
{
    req.property = '';
}

แก้ไข : TypeScript เวอร์ชันล่าสุดบ่นเกี่ยวกับเรื่องนี้ แต่ฉันต้องทำ:

someMiddleware(expressRequest: Request, res: Response, next: NextFunction): void
{
    const req = expressRequest as RequestCustom;
    req.property = '';
}

ใน TypeScript อินเทอร์เฟซถูกเปิดสิ้นสุด นั่นหมายความว่าคุณสามารถเพิ่มคุณสมบัติให้กับพวกเขาได้จากทุกที่เพียงแค่กำหนดคุณสมบัติใหม่

เมื่อพิจารณาว่าคุณกำลังใช้ไฟล์express.d.tsนี้คุณควรกำหนดอินเทอร์เฟซคำขอใหม่เพื่อเพิ่มฟิลด์พิเศษได้

interface Request {
  property: string;
}

จากนั้นในฟังก์ชันมิดเดิลแวร์ของคุณพารามิเตอร์reqควรมีคุณสมบัตินี้เช่นกัน คุณควรจะสามารถใช้งานได้โดยไม่มีการเปลี่ยนแปลงรหัสของคุณ

แม้ว่านี่จะเป็นคำถามที่เก่ามาก แต่ฉันก็พบกับปัญหานี้เมื่อไม่นานมานี้คำตอบที่ยอมรับใช้งานได้ดี แต่ฉันจำเป็นต้องเพิ่มอินเทอร์เฟซที่กำหนดเองRequest- อินเทอร์เฟซที่ฉันใช้ในรหัสของฉันและมันใช้งานได้ไม่ดีกับสิ่งที่ยอมรับ ตอบ. ฉันลองสิ่งนี้ตามเหตุผล:

import ITenant from "../interfaces/ITenant";

declare namespace Express {
    export interface Request {
        tenant?: ITenant;
    }
}

แต่ไม่ได้ผลเนื่องจาก typescript ถือว่า.d.tsไฟล์เป็นการนำเข้าส่วนกลางและเมื่อมีการนำเข้าในไฟล์เหล่านั้นจะถือว่าเป็นโมดูลปกติ นั่นคือเหตุผลที่โค้ดด้านบนใช้ไม่ได้กับการตั้งค่าแบบมาตรฐาน

นี่คือสิ่งที่ฉันทำ

// typings/common.d.ts

declare namespace Express {
    export interface Request {
        tenant?: import("../interfaces/ITenant").default;
    }
}

// interfaces/ITenant.ts

export interface ITenant {
    ...
}

บางทีปัญหานี้ได้รับคำตอบแล้ว แต่ฉันต้องการแบ่งปันเพียงเล็กน้อยตอนนี้บางครั้งอินเทอร์เฟซเช่นคำตอบอื่น ๆ อาจมีข้อ จำกัด เล็กน้อย แต่เราสามารถรักษาคุณสมบัติที่ต้องการได้จากนั้นเพิ่มคุณสมบัติเพิ่มเติมที่จะเพิ่มโดยการสร้าง คีย์ที่มีประเภทที่stringมีค่าประเภทany

import { Request, Response, NextFunction } from 'express'

interface IRequest extends Request {
  [key: string]: any
}

app.use( (req: IRequest, res: Response, next: NextFunction) => {
  req.property = setProperty();

  next();
});

ตอนนี้เรายังสามารถเพิ่มคุณสมบัติเพิ่มเติมที่เราต้องการให้กับวัตถุนี้ได้

คำตอบเหล่านี้ดูเหมือนจะผิดหรือล้าสมัยไม่ทางใดก็ทางหนึ่ง

สิ่งนี้ใช้ได้ผลสำหรับฉันในเดือนพฤษภาคม 2020:

ใน${PROJECT_ROOT}/@types/express/index.d.ts:

import * as express from "express"

declare global {
    namespace Express {
        interface Request {
            my_custom_property: TheCustomType
        }
    }
}

ในtsconfig.jsonเพิ่ม / รวมคุณสมบัติเพื่อที่:

"typeRoots": [ "@types" ]

ไชโย

หากคุณกำลังมองหาโซลูชันที่ใช้ได้กับ express4 นี่คือ:

@ types / express / index.d.ts: -------- ต้องเป็น /index.d.ts

declare namespace Express { // must be namespace, and not declare module "Express" { 
  export interface Request {
    user: any;
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "typeRoots" : [
      "@types", // custom merged types must be first in a list
      "node_modules/@types",
    ]
  }
}

อ้างอิงจากhttps://github.com/TypeStrong/ts-node/issues/715#issuecomment-526757308

ทางออกหนึ่งที่เป็นไปได้คือการใช้ "double casting to any"

1- กำหนดส่วนต่อประสานกับทรัพย์สินของคุณ

export interface MyRequest extends http.IncomingMessage {
     myProperty: string
}

2- นักแสดงคู่

app.use((req: http.IncomingMessage, res: http.ServerResponse, next: (err?: Error) => void) => {
    const myReq: MyRequest = req as any as MyRequest
    myReq.myProperty = setProperty()
    next()
})

ข้อดีของการหล่อสองชั้นคือ:

• มีการพิมพ์
• ไม่ก่อให้เกิดมลพิษต่อคำจำกัดความที่มีอยู่ แต่ขยายขอบเขตออกไปเพื่อหลีกเลี่ยงความสับสน
• เนื่องจากการคัดเลือกนักแสดงมีความชัดเจนจึงรวบรวมค่าปรับด้วย-noImplicitanyธง

อีกวิธีหนึ่งคือเส้นทางด่วน (ไม่ได้พิมพ์):

 req['myProperty'] = setProperty()

(อย่าแก้ไขไฟล์ข้อกำหนดที่มีอยู่ด้วยคุณสมบัติของคุณเองซึ่งเป็นสิ่งที่ไม่สามารถเข้าถึงได้หากคำจำกัดความไม่ถูกต้องให้เปิดคำขอดึง)

แก้ไข

ดูความคิดเห็นด้านล่างการหล่อแบบง่ายในกรณีนี้ req as MyRequest

คำตอบนี้จะเป็นประโยชน์ต่อผู้ที่ใช้แพ็คเกจ npm ts-nodeคำตอบนี้จะเป็นประโยชน์ต่อผู้ที่พึ่งพาแพคเกจ

ฉันยังดิ้นรนกับความกังวลเดียวกันกับการขอขยายเวลาวัตถุฉันติดตามคำตอบมากมายใน stack-overflow และจบลงด้วยการทำตามกลยุทธ์ที่กล่าวถึงด้านล่าง

ฉันประกาศการพิมพ์เพิ่มเติมสำหรับExpressในไดเร็กทอรีต่อไปนี้${PROJECT_ROOT}/api/@types/express/index.d.ts

declare namespace Express {
  interface Request {
    decoded?: any;
  }
}

แล้วอัปเดตของฉันtsconfig.jsonเป็นแบบนี้

{
  "compilerOptions": {
     "typeRoots": ["api/@types", "node_modules/@types"]
      ...
  }
}

แม้ว่าจะทำตามขั้นตอนข้างต้นแล้วสตูดิโอภาพก็หยุดบ่น แต่น่าเสียดายที่ts-nodeคอมไพเลอร์ยังคงใช้การโยน

 Property 'decoded' does not exist on type 'Request'.

เห็นได้ชัดว่าts-nodeไม่สามารถค้นหาข้อกำหนดประเภทเพิ่มเติมสำหรับการร้องขอวัตถุที่

ในที่สุดหลังจากใช้เวลาหลายชั่วโมงเนื่องจากฉันรู้ว่า VS Code ไม่ได้บ่นและสามารถค้นหาคำจำกัดความการพิมพ์ได้ซึ่งหมายความว่ามีบางอย่างผิดปกติ ts-nodeตาม

การอัปเดตการเริ่มต้นscriptในpackage.jsonการแก้ไขนั้นสำหรับฉัน

"start": "ts-node --files api/index.ts",

--filesข้อโต้แย้งที่มีบทบาทสำคัญที่นี่พบว่าการกำหนดคำจำกัดความของประเภทที่กำหนดเอง

ดูข้อมูลเพิ่มเติมได้ที่https://github.com/TypeStrong/ts-node#help-my-types-are-missing

เพื่อช่วยให้ทุกคนที่กำลังมองหาสิ่งอื่นลองนี่คือสิ่งที่ใช้ได้ผลสำหรับฉันในปลายเดือนพฤษภาคมปี 2020 เมื่อพยายามขยายคำขอของ ExpressJS ฉันต้องพยายามมากกว่าหนึ่งโหลก่อนที่จะใช้งานได้:

• พลิกลำดับของสิ่งที่ทุกคนแนะนำใน "typeRoots" ของ tsconfig.json ของคุณ (และอย่าลืมวางเส้นทาง src หากคุณมีการตั้งค่า rootDir ใน tsconfig เช่น "./src") ตัวอย่าง:

"typeRoots": [
      "./node_modules/@types",
      "./your-custom-types-dir"
]

• ตัวอย่างส่วนขยายที่กำหนดเอง ("./your-custom-types-dir/express/index.d.ts") ฉันต้องใช้การนำเข้าแบบอินไลน์และการเอ็กซ์พอร์ตเริ่มต้นเพื่อใช้คลาสเป็นประเภทในประสบการณ์ของฉันเพื่อให้แสดงด้วย:

declare global {
  namespace Express {
    interface Request {
      customBasicProperty: string,
      customClassProperty: import("../path/to/CustomClass").default;
    }
  }
}

• อัปเดตไฟล์ nodemon.json ของคุณเพื่อเพิ่มคำสั่ง "--files" ไปยัง ts-node ตัวอย่าง:

{
  "restartable": "rs",
  "ignore": [".git", "node_modules/**/node_modules"],
  "verbose": true,
  "exec": "ts-node --files",
  "watch": ["src/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js,json,ts"
}

คำตอบนี้อาจจะสายไปแล้ว แต่นี่คือวิธีที่ฉันแก้ไข:

1. ตรวจสอบให้แน่ใจว่าคุณมีแหล่งที่มาประเภทของคุณรวมอยู่ในtsconfigไฟล์ของคุณ(อาจเป็นเธรดใหม่ทั้งหมด)
2. ภายในไดเร็กทอรี types ของคุณให้เพิ่มไดเร็กทอรีใหม่และตั้งชื่อเป็นแพ็กเกจที่คุณต้องการขยายหรือสร้างชนิด ในกรณีนี้คุณจะสร้างไดเร็กทอรีที่มีชื่อexpress
3. ภายในexpressไดเร็กทอรีสร้างไฟล์และตั้งชื่อindex.d.ts(ต้องเป็นแบบนั้นทุกประการ)
4. สุดท้ายในการสร้างส่วนขยายประเภทที่คุณต้องใส่รหัสดังต่อไปนี้:

declare module 'express' {
    export interface Request {
        property?: string;
    }
}

ทำไมเราต้องทำอะไรให้ยุ่งยากมากเช่นในคำตอบที่ได้รับการยอมรับข้างต้นเมื่อเราสามารถหลีกหนีจากการทำสิ่งนี้ได้

แทนที่จะแนบทรัพย์สินของเราเพื่อขอเราสามารถแนบเพื่อขอส่วนหัวได้

   req.headers[property] = "hello"