我正在建立一个应用程序，其中有2个repo。一个是前端，使用react，另一个是函数repo，这是一个包含云函数的repo（后端是firebase）。我想创建另一个repo，这将是一种类型repo，所以前端和函数repo将共享相同的类型。
现在我所做的是创建一个libs目录，在其中设置一个基本的tsconfig和src文件夹，并在lib目录中设置一个测试接口. tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "composite": true
  },
  "include": ["src"],
}

我创建的接口：

export interface Test {
  test: string
}

前端目录中的tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"],
  "references": [
    {
      "path": "../libs/test"
    }
  ]
}

现在我可以在前端使用这个接口，导入方式如下：

import { Test } from "../../../../libs/test/src/test-interface";

但我有几个问题：
1.我不能自动导入它。我的意思是我不能只写接口的名称，vscode会建议从正确的源导入。我必须手动键入导入
1.我必须手动建立类型目录，我希望它能自动建立当我运行npm开始在前端。
有什么办法可以做到这一点吗？