TS之模块

类型声明

*.d.ts

• 只能声明类型
• 默认情况下，*.d.ts中的type/interface全局生效；
• 当使用 import/export 导入或导出模块时全局不生效
  • 当*.d.ts里面有导入导出则只在当前文件模块生效；

declare global

• 使用declare将带有导入导出的*.d.ts文件变为全局生效；

  // types.d.ts
  declare global {
    type User = {
      name: string;
      age: number;
    };
  
    interface Person {
      name: string;
      age: number;
    }
  }
  

*.d.ts与js

• 有同名的JS文件，则会自动产生关联

  // lih.d.ts
  const user: { name: string;  age: number };
  const sayHi: (name: string) => void;
  export default user;
  export { sayHi };
  

  // lih.js
  const user = { name: "fang", age: 18 };
  const sayHi = (name) => console.log(`Hi, ${name}`);
  export default user;
  export { sayHi };
  

  // main.ts
  // 可导入 lih定义的类型
    import lih, { sayHi } from "./lih";
  console.log(lih.name);
  console.log(lih.age);
  sayHi(lih.name);
  

• 结论

  

类型

• 以下类型从哪里来？

  • `Object、Array、Map、Set等
  • Document、HTMLElement等

• 通过设置tsconfig.json文件中lib属性

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
  }
}

React

• 通过@types/react包提供类型
  • 源码是JS和Flow，通过*.d.ts提供类型

Vue3

• 自动提供类*.d.ts
  • 源码是TS，自动生成*.d.ts

node.js

• 通过@types/node包提供类型

reference

-通过 reference 引入依赖的文件 typescript /// <reference path="user.ts" />

总结

• 给JS文件添加类型声明的方法
  1. 声明全局类型
     • 使用global.d.td
     • 使用types.d.ts，如果有import/export则使用declare global
  2. 对已存在的js文件进行类型声明
     • 使用同名的*.d.ts文件声明模块类型
  3. 下载@types包添加类型
     • tsconfig.json默认自动导入类型
     • 通过设置types属性手动导入

     {
       "compilerOptions": {
         "types": ["react"],
       }
     }