Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript support #65

Open
Izhaki opened this issue Dec 6, 2016 · 49 comments
Open

Typescript support #65

Izhaki opened this issue Dec 6, 2016 · 49 comments

Comments

@Izhaki
Copy link

Izhaki commented Dec 6, 2016

Having spent futile 4 hours trying to use this library in a typescript code base (ES6 module imports), I wonder if anyone has managed, and show how.

Seems like @danmarshall did some work on this, but none seem to work.

There's this typescript fork/port, which I couldn't install at all - it just throws errors when you run npm install; it is also at 2.1.0 at the moment.

Then, there's the typings definitions, and an npm package for @types/bezier-js, but the devil will take me I only get compilation/run-time errors with these.

Anyone?

@danmarshall
Copy link

Yes I've ported it to TypeScript, what version are you using?

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

2.0.3

  "devDependencies": {
    "@angular/core": "^2.0.1",
    "@types/bezier-js": "0.0.5",
    "@types/es6-shim": "^0.31.32",
    "@types/jasmine": "^2.5.35",
    "bezier-js": "^2.2.1",
    "browserify": "^13.0.1",
    "chokidar-cli": "^1.2.0",
    "figlet-cli": "^0.1.0",
    "http-server": "^0.9.0",
    "istanbul": "^1.1.0-alpha.1",
    "jasmine": "^2.4.1",
    "jasmine-fail-fast": "^2.0.0",
    "jsdom": "^9.4.1",
    "npm-run-all": "^3.1.0",
    "rxjs": "^5.0.0-beta.12",
    "ts-node": "^1.4.3",
    "tsify": "^2.0.2",
    "typescript": "^2.0.3",
    "uglify-js": "^2.7.0",
    "zone.js": "^0.6.25"
  },

Then:

import { Bezier } from 'bezier-js';

@danmarshall
Copy link

I'll have to look in to how @types works for v1.8 / v2.0. I'm not sure why it wouldn't be backward compatible.

@danmarshall
Copy link

I just did an npm install on a fresh clone, no errors. What are the errors you see on npm install ?

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

npm install danmarshall/bezierjs --save-dev

Throws:

npm ERR! git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 master: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 master: 
npm ERR! git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 master: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 master: 
npm ERR! git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 master: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 master: 
npm ERR! Darwin 14.5.0
npm ERR! argv "/Users/izhaki/.nvm/versions/node/v4.4.7/bin/node" "/Users/izhaki/.nvm/versions/node/v4.4.7/bin/npm" "install" "danmarshall/bezierjs" "--save-dev"
npm ERR! node v4.4.7
npm ERR! npm  v3.10.3
npm ERR! code 128

npm ERR! Command failed: git rev-list -n1 master
npm ERR! fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! Use '--' to separate paths from revisions, like this:
npm ERR! 'git <command> [<revision>...] -- [<file>...]'
npm ERR! 
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Volumes/Data/Cloud/CloudStation/Development/gefri/npm-debug.log

@danmarshall
Copy link

Can you just npm install bezier-js --save and then just use the d.ts file ?

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

Tried that (with https://github.com/danmarshall/bezierjs/blob/gh-pages/bezier.d.ts), but it exports BezierJs and I import 'bezier-js' so I get compilation error 'module not found'

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

When I import using

import { Bezier } from 'bezier-js';

That line compiles (and VS Code hints the right definition):

new Bezier( 0, 0, 0, 0, 0, 0 )

So the @types/bezier-js seems to be sound.

It's just that at runtime I get complains:

TypeError: bezier_js_1.Bezier is not a function

If I console.log(Bezier) I get undefined.

If I import using import * as Bezier from 'bezier-js', then console.log( Bezier ) I get:

{ [Function]
  fromSVG: [Function],
  quadraticFromPoints: [Function],
  cubicFromPoints: [Function],
  getUtils: [Function] }

Which seems to be the definition of class Bezier (with its static functions).

But then if I try

new Bezier( ... )

I get:

Cannot use 'new' with an expression whose type lacks a call or construct signature.

@danmarshall
Copy link

How about import { BezierJs } from 'bezier-js';

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

Module '"bezier-js"' has no exported member 'BezierJs'.

I can push the non-working code for you to play with.

@danmarshall
Copy link

Also are you "packaging" the Node version of bezier-js or are you using a <script> tag ?

@danmarshall
Copy link

Sure, please push your code someplace.

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

It's all within NPM.

In package.json:

    "test": "ts-node ./tests/unit/jasmine.js"

So ts-node will internally transpile all typescript.

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

@danmarshall
Copy link

I'll take a look. Meanwhile, you might want to see how I do it in Maker.js : https://github.com/Microsoft/maker.js/blob/master/src/models/BezierCurve.ts

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

In Maker.js seems to make make use of the global var in the browser. Do you have a non-browser example (ie, Node?)

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

By the way, the reason your fork won't install is because the bezier repository hasn't got a master branch. This worked:

npm install danmarshall/bezierjs#gh-pages --save-dev

But tsc still complains:

Cannot find module 'bezier-js'

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

OK. Have made some progress (with some help from this SO answer).

If I just:

npm install bezier-js --save-dev

Add bezier-js.d.ts:

declare module 'bezier-js' {
  export = class Bezier {
    constructor(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4?: number, y4?: number);
  }
}

And:

import Bezier = require( 'bezier-js' );

I can now call:

new Bezier( 0, 0, 0, 0, 0, 0)

Looking at https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/bezier-js/index.d.ts, it seems to export a namespace, whereas my bezier-js.d.ts file exports the class directly.

@danmarshall
Copy link

@Izhaki do you still get Intellisense for the rest of the Bezier properties?

@paulvanbrenk should the definition be fixed in the @types repo ?

@paulvanbrenk
Copy link

Yes, any updates you make to definition should be in the Definitely Typed repo, or you can ship the d.ts file as part of the npm package... and keep them in the bezierjs repo.

@danmarshall
Copy link

In Maker.js for Node, the same declaration works if a global var Bezier is brought into scope

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

@danmarshall If I use my (4 lines) bezier-js.d.ts, which was used without the @types/bezier-js, then obviously not. But I can simply copy the content of https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/bezier-js/index.d.ts (without the namespace) to get these.

I'm not an expert on typings, but I have a feeling that the @types file simply doesn't need the namespace - it will make it work in node and looking at Maker.js, I'm pretty sure you'll get it working there as well.

@Izhaki
Copy link
Author

Izhaki commented Dec 6, 2016

OK, just to confirm.

npm install bezier-js @types/bezier-js --save-dev

then if I manually edit node_modules/@types/bezier-js/index.d.ts to the file below. It complies and run, and works with Intellisense (so long you import using import Bezier = require( 'bezier-js' );).

Note that when installing via npm, bezier-js doesn't export utils or PolyBezier, only Bezier. Whilst you can get utils from Bezier.getUtils(), I'm not sure how to expose PolyBezier with the current code (again, not an expert).

// Type definitions for Bezier.js
// Project: https://github.com/Pomax/bezierjs
// Definitions by: Dan Marshall <https://github.com/danmarshall>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

interface Point {
    x: number;
    y: number;
    z?: number;
}
interface Projection extends Point {
    t?: number;
    d?: number;
}
interface Inflection {
    x: number[];
    y: number[];
    z?: number[];
    values: number[];
}
interface Offset extends Point {
    c: Point;
    n: Point;
}
interface Pair {
    left: Bezier;
    right: Bezier;
}
interface Split extends Pair {
    span: Point[];
    _t1?: number;
    _t2?: number;
}
interface MinMax {
    min: number;
    mid?: number;
    max: number;
    size?: number;
}
interface BBox {
    x: MinMax;
    y: MinMax;
    z?: MinMax;
}
interface Line {
    p1: Point;
    p2: Point;
}
interface Arc extends Point {
    e: number;
    r: number;
    s: number;
}
interface Shape {
    startcap: BezierCap;
    forward: Bezier;
    back: Bezier;
    endcap: BezierCap;
    bbox: BBox;
    intersections: (shape: Shape) => string[][] | number[][];
}
interface ABC {
    A: Point;
    B: Point;
    C: Point;
}
interface Closest {
    mdist: number;
    mpos: number;
}
/**
 * Bezier curve constructor. The constructor argument can be one of three things:
 *
 * 1. array/4 of {x:..., y:..., z:...}, z optional
 * 2. numerical array/8 ordered x1,y1,x2,y2,x3,y3,x4,y4
 * 3. numerical array/12 ordered x1,y1,z1,x2,y2,z2,x3,y3,z3,x4,y4,z4
 *
 */
declare class Bezier {
    private _linear;
    clockwise: boolean;
    _3d: boolean;
    _t1: number;
    _t2: number;
    _lut: Point[];
    dpoints: Point[][];
    order: number;
    points: Point[];
    dims: string[];
    dimlen: number;
    constructor(points: Point[]);
    constructor(coords: number[]);
    constructor(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4?: number, y4?: number);
    constructor(p1: Point, p2: Point, p3: Point, p4?: Point);
    static fromSVG(svgString: string): Bezier;
    static getABC(n: number, S: Point, B: Point, E: Point, t: number): ABC;
    static quadraticFromPoints(p1: Point, p2: Point, p3: Point, t: number): Bezier;
    static cubicFromPoints(S: Point, B: Point, E: Point, t: number, d1: number): Bezier;
    static getUtils(): typeof utils;
    getUtils(): typeof utils;
    valueOf(): string;
    toString(): string;
    toSVG(): string;
    update(): void;
    computedirection(): void;
    length(): number;
    getLUT(steps?: number): Point[];
    on(point: Point, error: number): number;
    project(point: Point): Projection;
    get(t: number): Point;
    point(idx: number): Point;
    compute(t: number): Point;
    raise(): Bezier;
    derivative(t: number): Point;
    inflections(): number[];
    normal(t: number): Point;
    private __normal2(t);
    private __normal3(t);
    private __normal(t);
    hull(t: number): Point[];
    split(t1: number): Split;
    split(t1: number, t2: number): Bezier;
    extrema(): Inflection;
    bbox(): BBox;
    overlaps(curve: Bezier): boolean;
    offset(t: number, d?: number): Offset | Bezier[];
    simple(): boolean;
    reduce(): Bezier[];
    scale(d: Function): Bezier;
    scale(d: number): Bezier;
    outline(d1: number, d2?: number, d3?: number, d4?: number): PolyBezier;
    outlineshapes(d1: number, d2: number, curveIntersectionThreshold?: number): Shape[];
    intersects(curve: Bezier, curveIntersectionThreshold?: number): string[] | number[];
    intersects(curve: Line): string[] | number[];
    lineIntersects(line: Line): number[];
    selfintersects(curveIntersectionThreshold?: number): string[];
    curveintersects(c1: Bezier[], c2: Bezier[], curveIntersectionThreshold?: number): string[];
    arcs(errorThreshold?: number): Arc[];
    private _error(pc, np1, s, e);
    private _iterate(errorThreshold, circles);
}
declare class BezierCap extends Bezier {
    virtual: boolean;
}

declare namespace utils {
    var Tvalues: number[];
    var Cvalues: number[];
    function arcfn(t: number, derivativeFn: Function): number;
    function between(v: number, m: number, M: number): boolean;
    function approximately(a: number, b: number, precision?: number): boolean;
    function length(derivativeFn: Function): number;
    function map(v: number, ds: number, de: number, ts: number, te: number): number;
    function lerp(r: number, v1: Point, v2: Point): Point;
    function pointToString(p: Point): string;
    function pointsToString(points: Point[]): string;
    function copy(obj: Object): any;
    function angle(o: Point, v1: Point, v2: Point): number;
    function round(v: number, d: number): number;
    function dist(p1: Point, p2: Point): number;
    function closest(LUT: Point[], point: Point): Closest;
    function abcratio(t: number, n: number): number;
    function projectionratio(t: number, n: number): number;
    function lli8(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): Point;
    function lli4(p1: Point, p2: Point, p3: Point, p4: Point): Point;
    function lli(v1: Offset, v2: Offset): Point;
    function makeline(p1: Point, p2: Point): Bezier;
    function findbbox(sections: Bezier[]): BBox;
    function shapeintersections(s1: Shape, bbox1: BBox, s2: Shape, bbox2: BBox, curveIntersectionThreshold?: number): string[][] | number[][];
    function makeshape(forward: Bezier, back: Bezier, curveIntersectionThreshold?: number): Shape;
    function getminmax(curve: Bezier, d: string, list: number[]): MinMax;
    function align(points: Point[], line: Line): Point[];
    function roots(points: Point[], line: Line): number[];
    function droots(p: number[]): number[];
    function inflections(points: Point[]): number[];
    function bboxoverlap(b1: BBox, b2: BBox): boolean;
    function expandbox(bbox: BBox, _bbox: BBox): void;
    function pairiteration(c1: Bezier, c2: Bezier, curveIntersectionThreshold?: number): string[];
    function getccenter(p1: Point, p2: Point, p3: Point): Arc;
}

/**
 * Poly Bezier
 * @param {[type]} curves [description]
 */
declare class PolyBezier {
    curves: Bezier[];
    private _3d;
    points: Point[];
    constructor(curves: Bezier[]);
    valueOf(): string;
    toString(): string;
    addCurve(curve: Bezier): void;
    length(): number;
    curve(idx: number): Bezier;
    bbox(): BBox;
    offset(d: number): PolyBezier;
}

declare module "bezier-js" {
  export = Bezier
}

@danmarshall
Copy link

I don't think the lib exports the PolyBezier constructor, it's just there for declaring the result of Bezier.outline()

@Pomax
Copy link
Owner

Pomax commented Dec 7, 2016

It's not exposed for a really simple reason: it's a shim at best. It's not a true PolyBezier that does proper on/off-curve point manipulation, etc. It's just an array of Beziers, with the smallest number of fall-through functions to make working with the result from reduce() and outline() possible

@alexjlockwood
Copy link

Has this been fixed? I was unable to get this working too... I can use the library but typescript won't resolve the types. Is it possible there is a bug in the DefinitelyTyped definitions?

@Izhaki
Copy link
Author

Izhaki commented Jan 24, 2017

@danmarshall
Copy link

@Izhaki since you got it working would you mind sending a PR to the DefinitelyTyped repo?

@Izhaki
Copy link
Author

Izhaki commented Jan 24, 2017

@danmarshall Sure. But will need to find a bit of time (to test it all).

@danmarshall
Copy link

@vjonas
Copy link

vjonas commented May 5, 2017

hi
@Izhaki when I try to import it in a component in typescript, it says:
... exercise.component/exercise.component.ts (3,8): Module '"bezier-js"' has no default export.
how can I fix that?

@Izhaki
Copy link
Author

Izhaki commented May 5, 2017

@vjonas
Can you share the import clause?

@vjonas
Copy link

vjonas commented May 6, 2017

@Izhaki
I tried to import it into a Typescript class this way: import Bezier from 'bezier-js';
Which said there is no module or default module to load. The problem was due to the last line of code in the node_modules/@types/bezier-js/index.d.ts file. I had to change it to:
declare module "bezier-js" {
export default Bezier
}

@danmarshall
Copy link

@vjonas you should now be able to npm install --save @types/bezier-js

@rikkertkoppes
Copy link
Contributor

rikkertkoppes commented Oct 7, 2017

The problem is still there. @tooxoot seems to have a solution in the reference above.

The way I solved it without replacing the d.ts file is by importing the type and the constructor separately:

import { Bezier } from 'bezier-js';
let BezierClass: typeof Bezier = require('bezier-js');

But this really is a bandaid fix

@KidScripty
Copy link

Had major issues with trying to get this to work as I cannot use require for my current project. Is there a fix that works for standard import statements yet? Seemingly the problem I am seeing so far is that the Javascript file: 'bezier-js/lib/bezier.js' has:

module exports = Bezier.

Then when using:

import * as BezierJs from 'bezier-js'

let Bezier:BezierJs.Bezier = new BezierJs.Bezier()

I get error saying that Bezier does not exist on BezierJS.

logging BezierJs is resolving to the class Bezier instead of a namespace/module object

@Pomax
Copy link
Owner

Pomax commented Oct 16, 2017

The immediate question is: does import Bezier from 'bezier-js' not work?

@davidm-public
Copy link

Problem still remains, exactly as described by @Izhaki .
Bandaid fix by @rikkertkoppes works for me.

import { Bezier } from 'bezier-js';
let BezierClass: typeof Bezier = require('bezier-js');

@danmarshall
Copy link

Digging into this, I've learned that importing CommonJS with TypeScript uses the following format:
import m = require("mod");

Note that the ES6 from keyword is not used with CommonJS modules in TypeScript. So, this will not work:
import Bezier from 'bezier-js'

Also just to be clear, we are only talking about TypeScript and not any other dialect like Babel.

Here's a couple more discussions regarding this "legacy" syntax:

Now, there is a fault in the current declaration file: the final bit should look like this:

declare module "bezier-js" {
  export = BezierJs.Bezier;    //currently is: export = BezierJs;
}

When this gets fixed (meaning a PR needs to be filed, merged, then deployed to npm/@types/bezier-js as part of the process of DefinitelyTyped) this will enable the import statement to look like this:

import Bezier = require('bezier-js');

But, IMHO, this legacy syntax is a little muddy - one thinks they are using ES6 modules, but import ... require ... is not exactly import ... from .... People may want to use an entirely old-school TypeScript syntax to make it perfectly clear that you are using CommonJS:

const Bezier = require('bezier-js') as typeof BezierJs.Bezier;

Lastly, I just want to thank Mike @Pomax for enduring this discussion. This repo is about Bezier curve stuff. Discussions about TypeScript typings belong in the DefinitelyTyped GitHub repo. If there is a problem with the typings, everyone is free to send a PR to fix them up.

@lgrosz
Copy link

lgrosz commented Oct 28, 2020

This most recent comment does not seem to be a solution.

My question is why doesn't this work:

npm i bezier-js
npm i @types/bezier-js

then

import Bezier from 'bezier-js

or

import { Bezier } from 'bezier-js

Opening an issue in DefinitelyTyped.

@lgrosz
Copy link

lgrosz commented Oct 28, 2020

@danmarshall
Copy link

Now that version 3 of bezier-js has been released (cheers, @Pomax!) the existing typings also need an upgrade.

@P0oOOOo0YA
Copy link

Seems like this project lacks a reliable typescript binding.

@Pomax
Copy link
Owner

Pomax commented Mar 6, 2021

Correct, because I don't use TypeScript, so any TS support is community driven.

@Zielak
Copy link

Zielak commented Jul 3, 2021

Hi @Pomax, are you open for transforming this project to Typescript? I'm in the middle of rewriting it just for fun, and wanted to check if you're okay with a PR :)

I believe keeping type definitions right with the project is a better way, than waiting for someone else to double check and rewrite the types manually in some other place.

@Pomax
Copy link
Owner

Pomax commented Jul 3, 2021

I am not: I have no interest in writing or using TS.

@iamravisingh
Copy link

Hi @Pomax @danmarshall I am using brezier-js as v6.1.4 with @@types/bezier-js as 4.1.3. I am trying to calculate curvature for 3d as below
`
// Extract x, y, z coordinates from the points
const x = points.map((point) => point[0]);
const y = points.map((point) => point[1]);
const z = points.map((point) => point[2]);

    // Create a cubic Bézier curve using the points
    const bezierCurve = new Bezier(x[0], y[0], x[1], y[1], x[2], y[2]);

    // Calculate curvature along the curve
    const curvature = bezierCurve.curvature();
    // const curvatures = [];
    `
  however, for `.curvature()` ts yells as it doesn't have been defined in (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/bezier-js/index.d.ts)
  
  is there any solution to this? do I need to create a bezier.d.ts file in my project and declare a module with the curvature method?

@danmarshall
Copy link

@iamravisingh you might want to take a look at the types at DefinitelyTyped and see if they need to be updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests