Typescript support about bezierjs HOT 49 OPEN

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

from bezierjs.

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

from bezierjs.

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.

from bezierjs.

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

from bezierjs.

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

from bezierjs.

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

from bezierjs.

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';

from bezierjs.

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.

from bezierjs.

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

from bezierjs.

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

from bezierjs.

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

from bezierjs.

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'

from bezierjs.

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.

from bezierjs.

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

from bezierjs.

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

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

from bezierjs.

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

from bezierjs.

Sure, please push your code someplace.

from bezierjs.

It's all within NPM.

In package.json:

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

So ts-node will internally transpile all typescript.

from bezierjs.

https://github.com/Izhaki/gefri/tree/bezier-ts

If you clone the repository:

git checkout bezier-ts
npm install
npm test

should get you going.

The actual file to modify is https://github.com/Izhaki/gefri/blob/bezier-ts/src/view/viewees/visibles/path/PathSegments.ts

Also note https://github.com/Izhaki/gefri/blob/bezier-ts/src/bezier.d.ts

from bezierjs.

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

from bezierjs.

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

from bezierjs.

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'

from bezierjs.

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

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

from bezierjs.

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.

from bezierjs.

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

from bezierjs.

@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.

from bezierjs.

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
}

from bezierjs.

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

from bezierjs.

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

from bezierjs.

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?

from bezierjs.

@alexjlockwood In the interim, have a look how I got it working: https://github.com/Izhaki/gefri/blob/master/src/view/viewees/visibles/path/bezier-js.d.ts

from bezierjs.

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

from bezierjs.

@Izhaki @alexjlockwood the declaration file seems to have been fixed in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/bezier-js/index.d.ts

from bezierjs.

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?

from bezierjs.

@vjonas
Can you share the import clause?

from bezierjs.

@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
}

from bezierjs.

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

from bezierjs.

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

from bezierjs.

@rikkertkoppes you can send a PR to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/bezier-js/index.d.ts

from bezierjs.

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

from bezierjs.

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');

from bezierjs.

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:

• https://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
• microsoft/TypeScript#2242 (comment)
• https://stackoverflow.com/questions/39415661/what-does-resolves-to-a-non-module-entity-and-cannot-be-imported-using-this

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.

from bezierjs.

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.

from bezierjs.

DefinitelyTyped/DefinitelyTyped#49185

from bezierjs.

Seems like this project lacks a reliable typescript binding.

from bezierjs.

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

from bezierjs.

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.

from bezierjs.

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?

from bezierjs.

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

from bezierjs.