尝试 typescript 这个问题求解

2021-09-25 14:59:06 +08:00
 lrvinye

typescript 怎么编写公共工具库同时携带自己的声明文件?

使用 nestjs 写项目,因为需要将部分 公共工具类、常量 还有 TS 的接口等抽离出来

因此新建了一个工具库 主要结构如下

common-ts                          
├─ src                             
│  ├─ constants                    
│  │  ├─ Delimiter.ts              
│  │  ├─ Formation.ts               
│  │  └─ index.ts                   
│  ├─ interface                    
│  │  ├─ AppId.interface.ts        
│  │  ├─ index.ts                  
│  │  ├─ TraceId.interface.ts      
│  │  └─ Validatable.interface.ts  
│  ├─ util                         
│  │  ├─ EnvUtil.ts                
│  │  ├─ index.ts                  
│  │  ├─ JwtUtil.ts                
│  │  ├─ RespUtil.ts               
│  │  └─ StrUtil.ts     
│  ├─ lib                         
│  │  └─ IBC.d.ts                
│  └─ index.ts                      
├─ typings                         
│  └─ index.d.ts                   
├─ gulpfile.ts                      
├─ package-lock.json               
├─ package.json                    
├─ rollup.config.ts                
├─ tsconfig.eslint.json            
├─ tsconfig.json           

现在遇到一个问题,我在 src/lib/IBC.d.ts 中手写了如下声明

declare namespace IBC {
  export interface Response {
    code: number;
    msg: string;
    timeStamp: string;

    data?: ResponseData;
    traceId?: string;
  }
  ...
}

然后工具类 src/util/RespUtil.ts 中如下代码

//RespUtil.ts
/**
 * 响应失败
 *
 * @param code - 响应码
 * @param msg - 响应消息
 * @return IBC.Response
 *
 * @public
 */
export function fail(code: number, msg: string): IBC.Response {
  return {
    code: code,
    msg: msg,
    timeStamp: moment().format(),
  };
}

这个工具类中使用了 IBC.d.ts 其它工具类中都没有使用

现在在另一个项目中引入这个工具库, 结果没办法使用 IBC.d.ts 里面写好的描述 也没办法找到 RespUtil

而其它的公共类都可以正常使用。

tsconfig.json 如下

{
  "compilerOptions": {
    "experimentalDecorators": true,
    /* 基础配置 */
    "target": "esnext",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "removeComments": false,
    "declaration": true,
    "sourceMap": true,
    "allowJs": true,

    /* 强类型检查配置 */
    "strict": true,
    //会防止你忘记在函数末尾返回值。
    "noImplicitAny": false,
    //会防止在 switch 代码块里的两个 case 之间忘记添加 break 语句。
    "noFallthroughCasesInSwitch": true,

    /* 模块分析配置 */
    "baseUrl": ".",
    "outDir": "./dist",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
  },
  "include": ["src/**/*", "typings/**/*"],
  "exclude": ["node_modules", "build", "dist", "scripts", "webpack", "jest"]
}

typings/index.d.ts 如下:

declare module 'rollup-plugin-babel';
declare module 'rollup-plugin-eslint';
declare module 'conventional-changelog';

1128 次点击
所在节点    TypeScript
7 条回复
lrvinye
2021-09-25 15:50:50 +08:00
🔝自顶
xiaoming1992
2021-09-25 16:12:46 +08:00
把.d.ts.文件放到 typings 目录下呢?
xiaoming1992
2021-09-25 16:15:25 +08:00
还可以看看这个工具库 build 出来的 dist 目录下的文件,看看是怎么样的
lrvinye
2021-09-25 17:59:31 +08:00
@xiaoming1992 放到 typings 目录下,打包出来 dist 还是没有这个文件...
lrvinye
2021-09-25 18:01:01 +08:00
@xiaoming1992 是需要在 typings/index.d.ts 里面引入啥的吗
xiaoming1992
2021-09-25 23:19:00 +08:00
将`.d.ts`改成`.ts`,将会打包出`.d.ts`文件;并`export namespace IBC`,使用时`import { IBC } from 'XXX'`

另一种方法没试过,不知道是否可行:将`.d.ts`改成`.ts`,放在`src/@types/`目录下,将会打包出`.d.ts`文件;然后在其他项目中需要引用时,将`lib/dist/@types`目录加入到项目`tsconfig`的`typeRoots`配置中。
lrvinye
2021-09-25 23:38:57 +08:00
@xiaoming1992 谢啦,明天去试试

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/804153

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX