安装

NPM

你可以通过npm 或 yarn 或 pnpm 引入并使用Http-Typedi

$ npm install http-typedi@latest
# or
$ yarn add http-typedi@latest
# or
$ pnpm install http-typedi@latest

TIP

由于Http-Typedi使用了依赖注入设计模式，因此需要安装reflect-metadata，并且需要在项目入口文件中引入reflect-metadata，如下所示：

$ npm install reflect-metadata --save

// main.ts
import 'reflect-metadata'

WARNING

TypeScript 中使用装饰器需要开启 experimentalDecorators 和 emitDecoratorMetadata选项，否则 reflect-metadata 提供的方法将无法获取参数类型信息。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", 
    "module": "esnext", 
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

vite

TIP

如果使用Vite进行构建，还需要安装unplugin-swc，如下所示：

$ npm install unplugin-swc --save

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import Swc from 'unplugin-swc'

export default defineConfig(() => {
  return {
    plugins: [Swc.vite()] 
  }
})

WARNING

如果您的package.json中的"type"为"module"的话，需要去掉"type": "module", 重新运行即可。详情可见issue

那么现在就可以运行起来您的应用程序啦~

webpack

TIP

如果使用webpack进行构建，需要安装一下ts-loader、babel-loader、@babel/preset-env、@babel/plugin-proposal-decorators这些包。

$ npm install ts-loader babel-loader @babel/preset-env @babel/plugin-proposal-decorators --save-dev

还需要修改一下webpack.config.js中的rules，具体配置如下所示：

const path = require('path')

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: { 
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [['@babel/plugin-proposal-decorators', { "legacy": true }]]
            }
          },
          'ts-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
  ...
}

那么现在就可以运行起来您的应用程序啦~