question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bring back the uPlot typescript namespace

See original GitHub issue

Hey @leeoniya 👋 Since this commit from v1.4.0, all the types/interfaces related to uPlot are no longer in a namespace:

Before

import uPlot from 'uplot'

const axisStyles: uPlot.Axis = {
    font: `500 12px ${htmlStyles.fontFamily}`,
    stroke: htmlStyles.color,
    grid: { stroke: 'rgba(0,0,0, 0.05)' },
    ticks: { show: false }
}

const plot = new uPlot()

After

 // Loss of information about where the Axis type comes from.
import uPlot from 'uplot'
import type { Axis } from 'uplot'

const axisStyles: Axis = {
}

const plot = new uPlot()

or

// Having to import uplot twice.
import uPlot from 'uplot'
import type * as uPlotTypes from 'uplot'

const axisStyles: uPlotTypes.Axis = {
}

const plot = new uPlot()

or

// This is the closest to where we had before, but having to access the
// `default` export for the constructor is not good.
import * as uPlot from 'uplot'

const axisStyles: uPlot.Axis = {
}

const plot = new uPlot.default()

With a namespace that is named the same as the uPlot class like it was before, we can use the TypeScript and JavaScript values at the same time.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:24 (24 by maintainers)

github_iconTop GitHub Comments

1reaction
leeoniyacommented, Feb 4, 2021

ok, i tried this again and it does all work properly if you use declare module 'uplot':

import uPlot, { Series, Options } from 'uplot';

declare module 'uplot' {
  interface Series {
    foo?: boolean
  }
}

const s1: Series       = { foo: true, stroke: "red" };
const s2: uPlot.Series = { foo: true, stroke: "red" };

let opts: Options = {
  width: 300,
  height: 300,
  series: [
    {},
    s1,
    s2,
  ]
};

new uPlot(opts, [[0, 1], [0, 1]], document.body);
0reactions
leeoniyacommented, Feb 3, 2021

i don’t think module augmentation works with the way React types are done, either:

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I use namespaces with TypeScript external ...
We need to go back to the origins of why namespaces exist in the first place and examine whether those reasons make sense...
Read more >
Documentation - Namespaces
This post outlines the various ways to organize your code using namespaces (previously “internal modules”) in TypeScript. As we alluded in our note...
Read more >
Typescript Namespace Tricks
Hello! I wanted to share a blog post I wrote, Typescript Namespace Tricks , about ways to use Typescript Namespaces that I wish...
Read more >
How to call Xrm.WebApi using TypeScript
If you do not have namespaces and two files define the same function (onLoad for example) the file that will get loaded last...
Read more >
A brand new website interface for an even better experience!
Bring back the uPlot typescript namespace.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found