V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lrvinye
V2EX  ›  TypeScript

尝试 typescript 这个问题求解

  •  1
     
  •   lrvinye · 2021-09-25 14:59:06 +08:00 · 1133 次点击
    这是一个创建于 1153 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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';
    
    
    lrvinye
        1
    lrvinye  
    OP
       2021-09-25 15:50:50 +08:00 via iPhone
    🔝自顶
    xiaoming1992
        2
    xiaoming1992  
       2021-09-25 16:12:46 +08:00 via Android
    把.d.ts.文件放到 typings 目录下呢?
    xiaoming1992
        3
    xiaoming1992  
       2021-09-25 16:15:25 +08:00 via Android
    还可以看看这个工具库 build 出来的 dist 目录下的文件,看看是怎么样的
    lrvinye
        4
    lrvinye  
    OP
       2021-09-25 17:59:31 +08:00
    @xiaoming1992 放到 typings 目录下,打包出来 dist 还是没有这个文件...
    lrvinye
        5
    lrvinye  
    OP
       2021-09-25 18:01:01 +08:00
    @xiaoming1992 是需要在 typings/index.d.ts 里面引入啥的吗
    xiaoming1992
        6
    xiaoming1992  
       2021-09-25 23:19:00 +08:00   ❤️ 1
    将`.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
        7
    lrvinye  
    OP
       2021-09-25 23:38:57 +08:00 via iPhone
    @xiaoming1992 谢啦,明天去试试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3699 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:33 · PVG 18:33 · LAX 02:33 · JFK 05:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.