Skip to content

TypeScript checking for props of <Chrono> doesn't work due to path aliases in typing files #433

Open
@manuel-mauky

Description

@manuel-mauky

In your bundle in dist/components/index.d.ts there is this line: import { TimelineProps } from '@models/TimelineModel';

@models/* is an alias defined in your tsconfig.

However, as a user of your package this won't work as there is no way for a user's TypeScript compiler to know what @models/ means (your tsconfig isn't part of the bundle and even if it would, I don't think it would help).

As a result, there is no TypeScript support for props of <Chrono> component.

To Reproduce

  1. create a React project with TypeScript support
  2. Add <Chrono> component
  3. Use some invalid props, e.g. <Chrono iteams={...} mode="Something"> --> typo in "items" and invalid value for mode
  4. Run TSC. It won't complain even through the props aren't valid

I've tested with version 2.3.1

Expected behavior
It should be possible to strictly check the Props of the <Chrono> component (and maybe others too?) with TypeScript.

I see two options to solve this (maybe there are more):
a) use relative paths in your code base instead of aliases
b) adjusting your build process so that aliases are resolved and replaced with a relative path at build time.

The first option seems to be used in some of your code base, e.g. src/react-chrono.ts is doing import { TimelineItemModel } from './models/TimelineItemModel';
which results in correctly working types in the bundle.

I'm happy to provide a PR but you have to decide which solution you want to have.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions