What is the type of a continuous numeric d3.scaleLinear() scale in typescript
I am passing d3 linear scales into a function using typescript.
import {scaleLinear} from 'd3-scale'
const myScale = scaleLinear().domain([0,10]).range([0,1])
const myFunc = (myScale : ScaleLinear<what, where, why>) => {
//draw something
}
I looked at @types d3 scale documentation and found this line
export interface ScaleLinear<Range, Output, Unknown = never> extends ScaleContinuousNumeric<Range, Output, Unknown> {
//...
}
but it really doesn't clear anything up for me.
I think I need to put some info inside the ScaleLinear brackets <> but I don't know what.
Any tips?
The first generic in ScaleLinear
is Range
, and the second is Output
.
Range
The Range
generic is for the type of the range data. If the range is specified in numbers (as in range([1, 10])
) the range is of type number
.
If the scale range is specified in strings, as is the case with colors (as in range(['red', 'blue'])
), then the Range type is string
.
Output
The Output
generic is for the type of data that the scale outputs. If the scale interpolates numbers (as in range([1, 10])
), the output is a number between 1 and 10, and so output is also of type number
.
If the scale interpolates colors (as in range(['red', 'blue'])
), the output is a color string (such as #9a3439
), which is of type string
.
For most cases, you can use ScaleLinear<number, number>
for scales that interpolate numbers and ScaleLinear<string, string>
for scales that interpolate color strings. In those cases where they are equal, you can also use the shorthand ScaleLinear<number>
or ScaleLinear<string>
.