Search code examples
typescripttypescript-types

TypeScript types exported from one package are aliasing to "any" when imported into another package

I have two Rush packages inside of a monorepo. Lets call them Package-A and Package-B.

There are some TS type definitions that live in Package-A that I want to be able to access within Package-B.

The Setup

Package-A

// Package-A/src/index.ts

export * from './types';

// Package-A/src/types.ts

import type { Props as PackageAComponentPropsForExport } from '~/components/PackageAComponent';

export type PackageAComponentProps = PackageAComponentPropsForExport;

// Package-A/src/components/PackageAComponent

export type Props = {
  name: string;
  age: number;
};

tsconfig.json for Package-A:

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "./types/**/*.ts",
    "./types/**/*.d.ts",
    "./*.js",
    "./.*.js",
    "./*.json",
    "./.*.json"
  ],
  "exclude": [
    "node_modules",
    "cjs",
    "lib"
  ],
  "compilerOptions": {
    "jsx": "react",
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ],
    "allowSyntheticDefaultImports": true,
    "preserveSymlinks": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "lib": [
      "dom",
      "es2020"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "noErrorTruncation": true,
    "noImplicitAny": true,
    "paths": {
      "~/*": [
        "src/*"
      ]
    },
    "plugins": [{
      "transform": "@zerollup/ts-transform-paths"
    }],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "types": [
      "node",
      "jest",
    ]
  }
}

Package-B

// Package-B/src/app/index.tsx

import type { PackageAComponentProps } from 'Package-A';

// 👇 I expect this to error, but instead it says it is aliased to 'any'. 
const test: PackageAComponentProps = {};

The Problem:

When I import the types into Package-B, the types are found / can be imported, however they do not contain any type information. The seem to be aliased to any, and I do not get type hinting in my editor.

I have tried to export the types in a variety of different ways, including:

  1. exporting them directly:
// Package-A/src/types.ts

export type { Props as PackageAComponentPropsForExport } from '~/components/PackageAComponent';
  1. exporting them as a named alias:
// Package-A/src/types.ts

import type { Props as PackageAComponentPropsForExport } from '~/components/PackageAComponent';
export type PackageAComponentProps = PackageAComponentPropsForExport;
  1. exporting them using import() syntax:
// Package-A/src/types.ts

export type PackageAComponentProps = import('~/components/PackageAComponent').Props;

...however, I get the same result with all three. It seems to just export the type but alias its typing information to any.

Solution

  • In your tsconfig.json, you need to set "declaration": true:

    {
  "compilerOptions": {
    "declaration": true, // generate typings
    "declarationMap": true, // generate source maps, if desired
    "declarationDir": "types", // explicit directory
    // ...
  },
  // ...
}

    The tsc will automatically resolve and export the necessary .d.ts files. You shouldn't need to export anything from your module except for the API by which people will utilization your module.