Использование Path2D в проекте TypeScript не разрешено

Question

Я хочу использовать новый api-файл Path2D в проекте TypeScript, но я не вижу его в lib.es6.d.ts. Каков наилучший способ его использования? У кого-нибудь есть файл d.ts для Path2D?

Answer 1

Я взял меня некоторое время, и я сделал заявление для вас:

Я сделал это следующим такой же стандарт машинопись определяет свои интерфейсы внутри в lib.d.ts.
Обратите внимание, что вы можете легко расширить этот код для будущих функций, и если вы это сделаете, мне бы очень хотелось увидеть его здесь.

Path2D.d.ts (View in TypeScript-Playground)

// Class 
interface Path2D { 
    addPath(path: Path2D, transform?: SVGMatrix); 
    closePath(): void; 
    moveTo(x: number, y: number): void; 
    lineTo(x: number, y: number): void; 
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; 
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; 
    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void; 
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void; 
    /*ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;*/ 
    rect(x: number, y: number, w: number, h: number): void; 
} 

// Constructor 
interface Path2DConstructor { 
    new(): Path2D; 
    new (d: string): Path2D; 
    new (path: Path2D, fillRule?: string): Path2D; 
    prototype: Path2D; 
} 
declare var Path2D: Path2DConstructor; 

// Extend Window 
interface Window { Path2D: Path2DConstructor; } 

// Extend CanvasRenderingContext2D 
interface CanvasRenderingContext2D { 
    fill(path: Path2D): void; 
    stroke(path: Path2D): void; 
    clip(path: Path2D, fillRule?: string): void; 
} 

Примеры:

var canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var path1 = new Path2D(); 
path1.rect(10, 10, 100, 100); 

var path2 = new Path2D(path1); 
path2.moveTo(220, 60); 
path2.arc(170, 60, 50, 0, 2 * Math.PI); 

var m = (<SVGSVGElement>document.createElementNS("http://www.w3.org/2000/svg", "svg")).createSVGMatrix(); 
m.a = 1; m.b = 0; 
m.c = 0; m.d = 1; 
m.e = 300; m.f = 0; 
path2.addPath(path1, m); 

ctx.stroke(path1); 
ctx.fill(path2);