splitio / redux-client

Redux SDK client for Split Software
https://split.io
Other
5 stars 1 forks source link

SplitIO does not seem to be properly imported into the files #130

Open profaurore opened 1 week ago

profaurore commented 1 week ago

I am working on a Typescript application that makes use of this package, and have been unable to the get Typescript types that use SplitIO.* to correctly resolve; they all resolve to any. Are there some imports that are missing?

For example,

// This should be `SplitIO.TreatmentWithConfig`, but produces `any`.
type LocalTreatmentWithConfig = ISplitState['treatments'][string][string];
EmilianoSanchez commented 1 week ago

Hi @profaurore ,

The problem you have is that the ISplitState interface is not part of the SplitIO namespace, and so, you need to explicitly import it from the @splitsoftware/splitio-redux package (Redux SDK). For example:

import { ISplitState } from '@splitsoftware/splitio-redux';

type LocalTreatmentWithConfig = ISplitState['treatments'][string][string];

const someTreatmentWithConfig: LocalTreatmentWithConfig = {
  treatment: 'on',
  config: null
};

// SplitIO.TreatmentWithConfig and LocalTreatmentWithConfig are the same types
const sameTreatmentWithConfig: SplitIO.TreatmentWithConfig = someTreatmentWithConfig;

Note that the SplitIO namespace, unlike ISplitState, is available automatically when importing any Split SDK. But if you prefer, you can import it explicitly as follows: import SplitIO from '@splitsoftware/splitio/types/splitio';

The SplitIO namespace is defined in the @splitsoftware/splitio package, which is the base JavaScript SDK that the Redux SDK (@splitsoftware/splitio-redux package) extends from. And Redux SDK exports a few more types and interfaces, like ISplitState, that we weren't able to merge into the namespace (due to some conflicts with CommonJS module system) and so they are not part of it.

You can check this line, for the complete list of TypeScript definitions that the Redux SDK exports but are not part of the namespace:

// Types
import type { IStatus, ISplitState, IGetSplitState, IInitSplitSdkParams, IGetTreatmentsParams, IDestroySplitSdkParams, ITrackParams } from '@splitsoftware/splitio-redux';
profaurore commented 6 days ago

Hi @EmilianoSanchez, thank you for the prompt response!

I must have a Typescript configuration that is interfering with the namespace import.

If I do the following, the resulting type is any.

import type { ISplitState } from '@splitsoftware/splitio-redux';

type TestType = ISplitState['treatments'][string][string];

Whereas if I do the following, the resulting type is the expected SplitIO.TreatmentWithConfig | undefined.

import type { ISplitState } from '@splitsoftware/splitio-redux';
import type SplitIO from '@splitsoftware/splitio/types/splitio';

type TestType = ISplitState['treatments'][string][string];

I'll take a closer look on Monday and report back any findings in case others run into the same problem. Feel free to close this issue beforehand, if appropriate.

profaurore commented 4 days ago

The SplitIO namespace is indeed imported into this package via the '@splitsoftware/splitio' imports, but it is not reexported. This can be seen by searching the types directory of the NPM package for a definition of SplitIO or an import of the @splitsoftware/splitio package.

As a result, any projects using this package that want the SplitIO namespace to be imported need to explicitely import the namespace.

As a fix in our project, we imported the namespace globally in @types/splitio.d.ts, which resolves the issue.

import '@splitsoftware/splitio/types/splitio';
EmilianoSanchez commented 3 days ago

Thanks @profaurore for sharing!

Unfortunately, I couldn't reproduce it on my side. Could you share the version of the Redux SDK (npm ls @splitsoftware/splitio-redux) and TypeScript (npm ls typescript) you are using? Or any TS configuration option that you consider relevant for the problem?