Typescript kullanarak Express Request nesnesini genişletin

Typecript kullanarak bir ara yazılımdan istek nesnesini ifade etmek için bir özellik eklemeye çalışıyorum. Ancak nesneye nasıl ekstra özellikler ekleyeceğimi çözemiyorum. Mümkünse parantez gösterimi kullanmamayı tercih ederim.

Buna benzer bir şey yazmama izin verecek bir çözüm arıyorum (mümkünse):

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

Özel bir tanım oluşturmak ve Typescript'te Declaration Merging adlı bir özellik kullanmak istiyorsunuz . Bu yaygın olarak kullanılır, örneğin method-override.

Bir dosya oluşturun custom.d.tsve bunu eklemeyi unutmayın tsconfig.json'ın files-bölümü varsa. İçerikler aşağıdaki gibi görünebilir:

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

Bu, kodunuzun herhangi bir noktasında şuna benzer bir şey kullanmanıza olanak tanır:

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)
})

İçindeki yorumlarınindex.d.ts önerdiği gibi , Expressherhangi bir yeni üyeyi genel ad alanına bildirmeniz yeterlidir . Misal:

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

Tam Örnek:

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!'))

Küresel ad alanlarının genişletilmesi, GitBook'umda daha fazla ele alınmaktadır .

Express'in daha yeni sürümleri için, express-serve-static-coremodülü genişletmeniz gerekir .

Bu gereklidir, çünkü artık Express nesnesi oradan geliyor: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8fb0e959c2c7529b5fa4793a44b41b797ae671b9/types/express/index.d.ts#L19

Temel olarak aşağıdakileri kullanın:

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

Kabul edilen cevap (diğerleri gibi) benim için işe yaramıyor ama

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

yaptı. Umarım bu birine yardımcı olur.

8 kadar cevap denedikten ve başarılı olamadıktan sonra. Sonunda jd291'in 3mards deposunu işaret eden yorumu ile çalıştırmayı başardım .

Adlı tabanda bir dosya oluşturun types/express/index.d.ts. Ve içine şunu yazın:

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

ve tsconfig.jsonşununla birlikte ekleyin :

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

Daha sonra yourPropertyher istek altında erişilebilir olmalıdır:

import express from 'express';

const app = express();

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

Sunulan çözümlerin hiçbiri benim için işe yaramadı. Sonunda İstek arayüzünü genişlettim:

import {Request} from 'express';

export interface RequestCustom extends Request
{
    property: string;
}

Sonra kullanmak için:

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

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

Düzenleme : TypeScript'in son sürümleri bundan şikayetçi. Bunun yerine yapmak zorundaydım:

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

TypeScript'te arayüzler açık uçludur. Bu, sadece yeniden tanımlayarak onlara her yerden özellikler ekleyebileceğiniz anlamına gelir.

Bu express.d.ts dosyasını kullandığınızı göz önünde bulundurarak , ekstra alan eklemek için İstek arayüzünü yeniden tanımlayabilmelisiniz .

interface Request {
  property: string;
}

Daha sonra ara yazılım işlevinizde, req parametresi de bu özelliğe sahip olmalıdır. Kodunuzda herhangi bir değişiklik yapmadan kullanabilmelisiniz.

Bu çok eski bir soru olsa da, son zamanlarda bu soruna rastladım.Kabul edilen cevap iyi çalışıyor ancak kodumda kullandığım ve kabul edilenle Requestçok iyi çalışmayan bir arayüze özel bir arayüz eklemem gerekiyordu. Cevap. Mantıksal olarak şunu denedim:

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

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

Ancak bu işe yaramadı çünkü Typescript .d.tsdosyaları genel içe aktarmalar olarak ele alıyor ve içlerinde içe aktarmalar olduğunda bunlar normal modüller olarak değerlendiriliyor. Yukarıdaki kodun standart bir typcript ayarında çalışmamasının nedeni budur.

İşte sonunda yaptığım şey

// typings/common.d.ts

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

// interfaces/ITenant.ts

export interface ITenant {
    ...
}

Belki bu konu cevaplanmıştır, ancak biraz paylaşmak istiyorum, şimdi bazen diğer cevaplar gibi bir arayüz biraz fazla kısıtlayıcı olabilir, ancak aslında gerekli özellikleri koruyabilir ve sonra eklenecek diğer özellikleri ekleyerek bir stringdeğer türünde bir türe sahip anahtarany

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();
});

Şimdi, bu nesneye istediğimiz herhangi bir ek özelliği de ekleyebiliriz.

Tüm bu yanıtlar bir şekilde yanlış veya modası geçmiş görünüyor.

Bu benim için Mayıs 2020'de çalıştı:

içinde ${PROJECT_ROOT}/@types/express/index.d.ts:

import * as express from "express"

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

içinde tsconfig.json, özelliği şu şekilde ekleyin / birleştirin:

"typeRoots": [ "@types" ]

Şerefe.

Express4 ile çalışan bir çözüm arıyorsanız, işte burada:

@ types / express / index.d.ts: -------- /index.d.ts olmalıdır

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",
    ]
  }
}

Referans https://github.com/TypeStrong/ts-node/issues/715#issuecomment-526757308

Olası bir çözüm, "herhangi birine çift yayınlama" kullanmaktır.

1- Mülkünüzle bir arayüz tanımlayın

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

2- çift döküm

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

Çift dökümün avantajları şunlardır:

• tipler mevcuttur
• mevcut tanımları kirletmez, ancak karışıklığı önleyerek genişletir
• atama açık olduğundan, cezaları -noImplicitanybayrakla derler

Alternatif olarak, hızlı (türlenmemiş) rota vardır:

 req['myProperty'] = setProperty()

(kendi özelliklerinizle mevcut tanım dosyalarını düzenlemeyin - bu sürdürülemez. Tanımlar yanlışsa, bir çekme isteği açın)

DÜZENLE

Aşağıdaki yoruma bakın, bu durumda basit döküm çalışır req as MyRequest

Bu cevap npm paketine güvenenler için faydalı olacaktır ts-node.

Ben de aynı istek nesnesini genişletme endişesiyle mücadele ediyordum , stack-overflow'da birçok yanıtı takip ettim ve aşağıda belirtilen stratejiyi takip etmekle bitirdim.

Aşağıdaki dizinde express için genişletilmiş yazmayı ilan ettim .${PROJECT_ROOT}/api/@types/express/index.d.ts

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

sonra benim tsconfig.jsongibi bir şeye güncelliyoruz .

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

Yukarıdaki adımları uyguladıktan sonra bile, görsel stüdyo şikayet etmeyi bıraktı ama maalesef ts-nodederleyici atmaya devam ediyordu.

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

Görünüşe göre, istek nesnesi ts-nodeiçin genişletilmiş tür tanımlarını bulamadı .

Sonunda saatler geçirdikten sonra, VS Code'un şikayet etmediğini ve yazım tanımlarını bulabildiğim için ts-nodecomplier ile ilgili bir şeylerin yanlış olduğunu ima etti .

Başlangıç Güncellenmesi scriptiçinde package.jsonbenim için düzelttim.

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

--filesargümanlar burada kilit rol oynayacak özel tip tanımlarını belirleme bulabilirsiniz.

Daha fazla bilgi için lütfen şu adresi ziyaret edin: https://github.com/TypeStrong/ts-node#help-my-types-are-missing

Burada denemek için başka bir şey arayan herkese yardım etmek, 2020 yılının Mayıs ayının sonlarında ExpressJS'nin İsteğini genişletmeye çalışırken benim için işe yarayan şeydi. Bunu çalıştırmadan önce bir düzineden fazla şeyi denemem gerekiyordu:

• Tsconfig.json dosyanızın "typeRoots" bölümünde herkesin önerdiği sırayı ters çevirin (ve tsconfig'de "./src" gibi bir rootDir ayarınız varsa src yolunu bırakmayı unutmayın). Misal:

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

• Özel uzantı örneği ('./your-custom-types-dir/express/index.d.ts "). Deneyimlerimde sınıfları bir tür olarak kullanmak için satır içi içe aktarmayı ve varsayılan dışa aktarmayı kullanmak zorunda kaldım, böylece de gösteriliyor:

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

• Nodemon.json dosyanızı "--files" komutunu ts-node'a eklemek için güncelleyin, örneğin:

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

Bu cevap için çok geç kalmış olabilir, ama yine de şu şekilde çözdüm:

1. tsconfigDosyanızda tür kaynağınızın bulunduğundan emin olun (bu tamamen yeni bir konu olabilir)
2. Türler dizininizin içine yeni bir dizin ekleyin ve genişletmek veya türleri oluşturmak istediğiniz paket olarak adlandırın. Bu özel durumda, adıyla bir dizin oluşturacaksınız.express
3. expressDizinin içinde bir dosya oluşturun ve adlandırın index.d.ts(TAM OLARAK BUNUN GİBİ OLMALIDIR)
4. Son olarak, türlerin uzantısını yapmak için aşağıdaki gibi bir kod koymanız yeterlidir:

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

Neden sadece bunu yapmaktan sıyrılabiliyorken, yukarıda kabul edilen cevaplarda olduğu gibi neden bu kadar güçlük çekmemiz gerekiyor?

mülkiyetimizi talebe eklemek yerine, başlık istemek için ekleyebiliriz

   req.headers[property] = "hello"