Merge pull request #30734 from DefinitelyTyped/ts-3.2-more-dom-updates

More TS 3.2 DOM updates
2026-10-03 14:27:04 +00:00 · 2018-12-14 09:50:52 -08:00
parent d79ae8bfd3 3d61ce43e1
commit deae5d3052
33 changed files with 1169 additions and 122 deletions
@@ -2,7 +2,7 @@
 // Project: http://peerjs.com/
 // Definitions by: Toshiya Nakakura <https://github.com/nakakura>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 3.0

 /// <reference types="webrtc" />

@@ -0,0 +1,7 @@
+{
+    "private": true,
+    "types": "index",
+    "typesVersions": {
+        ">=3.2.0-0": { "*": ["ts3.2/*"] }
+    }
+}
@@ -40,7 +40,7 @@ var connection = peerById.connect("id", {
    metadata: {message: 'hi i want to chat with you!'}
 });

-var call = peerById.call('callto-id', (<any>window).localStream);
+var call = peerById.call('callto-id', (window as any).localStream);

 var openHandler=()=> console.log("open");
 peerById.on("open", openHandler);
@@ -0,0 +1,194 @@
+// Type definitions for PeerJS
+// Project: http://peerjs.com/
+// Definitions by: Toshiya Nakakura <https://github.com/nakakura>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace PeerJs{
+    interface PeerJSOption{
+        key?: string;
+        host?: string;
+        port?: number;
+        path?: string;
+        secure?: boolean;
+        config?: RTCConfiguration;
+        debug?: number;
+    }
+
+    interface PeerConnectOption{
+        label?: string;
+        metadata?: any;
+        serialization?: string;
+        reliable?: boolean;
+
+    }
+
+    interface DataConnection{
+        send(data: any): void;
+        close(): void;
+        on(event: string, cb: ()=>void): void;
+        on(event: 'data', cb: (data: any)=>void): void;
+        on(event: 'open', cb: ()=>void): void;
+        on(event: 'close', cb: ()=>void): void;
+        on(event: 'error', cb: (err: any)=>void): void;
+        off(event: string, fn: Function, once?: boolean): void;
+        dataChannel: RTCDataChannel;
+        label: string;
+        metadata: any;
+        open: boolean;
+        peerConnection: any;
+        peer: string;
+        reliable: boolean;
+        serialization: string;
+        type: string;
+        buffSize: number;
+    }
+
+    interface MediaConnection{
+        answer(stream?: any): void;
+        close(): void;
+        on(event: string, cb: ()=>void): void;
+        on(event: 'stream', cb: (stream: any)=>void): void;
+        on(event: 'close', cb: ()=>void): void;
+        on(event: 'error', cb: (err: any)=>void): void;
+        off(event: string, fn: Function, once?: boolean): void;
+        open: boolean;
+        metadata: any;
+        peer: string;
+        type: string;
+    }
+
+    interface utilSupportsObj {
+        audioVideo: boolean;
+        data: boolean;
+        binary: boolean;
+        reliable: boolean;
+    }
+
+    interface util{
+        browser: string;
+        supports: utilSupportsObj;
+    }
+
+    export interface Peer{
+        /**
+         *
+         * @param id The brokering ID of the remote peer (their peer.id).
+         * @param options for specifying details about Peer Connection
+         */
+        connect(id: string, options?: PeerJs.PeerConnectOption): PeerJs.DataConnection;
+        /**
+         * Connects to the remote peer specified by id and returns a data connection.
+         * @param id The brokering ID of the remote peer (their peer.id).
+         * @param stream The caller's media stream
+         * @param options Metadata associated with the connection, passed in by whoever initiated the connection.
+         */
+        call(id: string, stream: any, options?: any): PeerJs.MediaConnection;
+        /**
+         * Calls the remote peer specified by id and returns a media connection.
+         * @param event Event name
+         * @param cb Callback Function
+         */
+        on(event: string, cb: ()=>void): void;
+        /**
+         * Emitted when a connection to the PeerServer is established.
+         * @param event Event name
+         * @param cb id is the brokering ID of the peer
+         */
+        on(event: 'open', cb: (id: string)=>void): void;
+        /**
+         * Emitted when a new data connection is established from a remote peer.
+         * @param event Event name
+         * @param cb Callback Function
+         */
+        on(event: 'connection', cb: (dataConnection: PeerJs.DataConnection)=>void): void;
+        /**
+         * Emitted when a remote peer attempts to call you.
+         * @param event Event name
+         * @param cb Callback Function
+         */
+        on(event: 'call', cb: (mediaConnection: PeerJs.MediaConnection)=>void): void;
+        /**
+         * Emitted when the peer is destroyed and can no longer accept or create any new connections.
+         * @param event Event name
+         * @param cb Callback Function
+         */
+        on(event: 'close', cb: ()=>void): void;
+        /**
+         * Emitted when the peer is disconnected from the signalling server
+         * @param event Event name
+         * @param cb Callback Function
+         */
+        on(event: 'disconnected', cb: ()=>void): void;
+        /**
+         * Errors on the peer are almost always fatal and will destroy the peer.
+         * @param event Event name
+         * @param cb Callback Function
+         */
+        on(event: 'error', cb: (err: any)=>void): void;
+        /**
+         * Remove event listeners.(EventEmitter3)
+         * @param {String} event The event we want to remove.
+         * @param {Function} fn The listener that we need to find.
+         * @param {Boolean} once Only remove once listeners.
+         */
+        off(event: string, fn: Function, once?: boolean): void;
+        /**
+         * Close the connection to the server, leaving all existing data and media connections intact.
+         */
+        disconnect(): void;
+        /**
+         * Attempt to reconnect to the server with the peer's old ID
+         */
+        reconnect(): void;
+        /**
+         * Close the connection to the server and terminate all existing connections.
+         */
+        destroy(): void;
+
+        /**
+         * Retrieve a data/media connection for this peer.
+         * @param peer
+         * @param id
+         */
+        getConnection(peer: Peer, id: string): any;
+
+        /**
+         * Get a list of available peer IDs
+         * @param callback
+         */
+        listAllPeers(callback: (peerIds: Array<string>)=>void): void;
+        /**
+         * The brokering ID of this peer
+         */
+        id: string;
+        /**
+         * A hash of all connections associated with this peer, keyed by the remote peer's ID.
+         */
+        connections: any;
+        /**
+         * false if there is an active connection to the PeerServer.
+         */
+        disconnected: boolean;
+        /**
+         * true if this peer and all of its connections can no longer be used.
+         */
+        destroyed: boolean;
+    }
+}
+
+declare var Peer: {
+    prototype: RTCIceServer;
+    /**
+     * A peer can connect to other peers and listen for connections.
+     * @param id Other peers can connect to this peer using the provided ID.
+     *     If no ID is given, one will be generated by the brokering server.
+     * @param options for specifying details about PeerServer
+     */
+    new (id: string, options?: PeerJs.PeerJSOption): PeerJs.Peer;
+
+    /**
+     * A peer can connect to other peers and listen for connections.
+     * @param options for specifying details about PeerServer
+     */
+    new (options: PeerJs.PeerJSOption): PeerJs.Peer;
+};
@@ -0,0 +1,54 @@
+var peerByOption: PeerJs.Peer = new Peer({
+    key: 'peerKey',
+    debug: 3,
+});
+
+peerByOption.on("connection", dataConnection => {
+    var type: string = dataConnection.type;
+});
+
+peerByOption.listAllPeers(function(items){
+    for(var i in items){
+        console.log(decodeURI(items[i]));
+    }
+});
+
+var peerById: PeerJs.Peer = new Peer("peerid");
+
+var peerByIdAndOption: PeerJs.Peer = new Peer(
+    "peerId",
+    {
+        key: 'peerKey',
+        debug: 3,
+    });
+peerByIdAndOption.on("call", mediaConnection => {
+    var isOpen: boolean = mediaConnection.open;
+});
+
+var id = peerByOption.id;
+var connections = peerByOption.connections;
+var flag = peerByOption.disconnected;
+flag = peerByOption.destroyed;
+
+peerByOption.disconnect();
+peerByOption.reconnect();
+peerByOption.destroy();
+
+var connection = peerById.connect("id", {
+    label: 'chat',
+    serialization: 'none',
+    metadata: {message: 'hi i want to chat with you!'}
+});
+
+var call = peerById.call('callto-id', (window as any).localStream);
+
+var openHandler=()=> console.log("open");
+peerById.on("open", openHandler);
+peerById.on("connection", (c)=> console.log("connection"));
+peerById.on("call", (media)=> console.log("call"));
+peerById.on("close", ()=> console.log("close"));
+peerById.on("disconnected", ()=> console.log("disconnected"));
+peerById.on("error", (err)=> console.log(err));
+peerById.off("open", openHandler);
+
+var connection2 = peerById.getConnection(peerByOption, "callto-id");
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "peerjs-tests.ts"
+    ]
+}
@@ -0,0 +1,79 @@
+{
+    "extends": "dtslint/dt.json",
+    "rules": {
+        "adjacent-overload-signatures": false,
+        "array-type": false,
+        "arrow-return-shorthand": false,
+        "ban-types": false,
+        "callable-types": false,
+        "comment-format": false,
+        "dt-header": false,
+        "eofline": false,
+        "export-just-namespace": false,
+        "import-spacing": false,
+        "interface-name": false,
+        "interface-over-type-literal": false,
+        "jsdoc-format": false,
+        "max-line-length": false,
+        "member-access": false,
+        "new-parens": false,
+        "no-any-union": false,
+        "no-boolean-literal-compare": false,
+        "no-conditional-assignment": false,
+        "no-consecutive-blank-lines": false,
+        "no-construct": false,
+        "no-declare-current-package": false,
+        "no-duplicate-imports": false,
+        "no-duplicate-variable": false,
+        "no-empty-interface": false,
+        "no-for-in-array": false,
+        "no-inferrable-types": false,
+        "no-internal-module": false,
+        "no-irregular-whitespace": false,
+        "no-mergeable-namespace": false,
+        "no-misused-new": false,
+        "no-namespace": false,
+        "no-object-literal-type-assertion": false,
+        "no-padding": false,
+        "no-redundant-jsdoc": false,
+        "no-redundant-jsdoc-2": false,
+        "no-redundant-undefined": false,
+        "no-reference-import": false,
+        "no-relative-import-in-test": false,
+        "no-self-import": false,
+        "no-single-declare-module": false,
+        "no-string-throw": false,
+        "no-unnecessary-callback-wrapper": false,
+        "no-unnecessary-class": false,
+        "no-unnecessary-generics": false,
+        "no-unnecessary-qualifier": false,
+        "no-unnecessary-type-assertion": false,
+        "no-useless-files": false,
+        "no-var-keyword": false,
+        "no-var-requires": false,
+        "no-void-expression": false,
+        "no-trailing-whitespace": false,
+        "object-literal-key-quotes": false,
+        "object-literal-shorthand": false,
+        "one-line": false,
+        "one-variable-per-declaration": false,
+        "only-arrow-functions": false,
+        "prefer-conditional-expression": false,
+        "prefer-const": false,
+        "prefer-declare-function": false,
+        "prefer-for-of": false,
+        "prefer-method-signature": false,
+        "prefer-template": false,
+        "radix": false,
+        "semicolon": false,
+        "space-before-function-paren": false,
+        "space-within-parens": false,
+        "strict-export-declare-modifiers": false,
+        "trim-file": false,
+        "triple-equals": false,
+        "typedef-whitespace": false,
+        "unified-signatures": false,
+        "void-return": false,
+        "whitespace": false
+    }
+}
@@ -2,12 +2,10 @@
 // Project: https://www.w3.org/TR/generic-sensor/
 // Definitions by: Kenneth Rohde Christiansen <https://github.com/kenchris>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.2
+// TypeScript Version: 3.0

 // Explainer: https://www.w3.org/TR/motion-sensors/

-/// <reference types="geometry-dom" />
-
 declare class SensorErrorEvent extends Event {
    constructor(type: string, errorEventInitDict: SensorErrorEventInit);
    readonly error: Error;
@@ -82,7 +80,7 @@ declare class UncalibratedMagnetometer extends Sensor {

 // Orientation Sensor: https://www.w3.org/TR/orientation-sensor/

-type RotationMatrixType = Float32Array | Float64Array | GeometryDom.DOMMatrix;
+type RotationMatrixType = Float32Array | Float64Array | DOMMatrix;

 declare class OrientationSensor extends Sensor {
    readonly quaternion?: number[];
@@ -0,0 +1,14 @@
+{
+    "private": true,
+    "types": "index",
+    "typesVersions": {
+        ">=3.2.0-0": {
+            "*": [
+                "ts3.2/*"
+            ]
+        }
+    },
+    "dependencies": {
+        "typescript": "^2.2.2"
+    }
+}
@@ -0,0 +1,90 @@
+// Explainer: https://www.w3.org/TR/motion-sensors/
+
+declare class SensorErrorEvent extends Event {
+    constructor(type: string, errorEventInitDict: SensorErrorEventInit);
+    readonly error: Error;
+}
+
+interface SensorErrorEventInit extends EventInit {
+    error: Error;
+}
+
+declare class Sensor extends EventTarget {
+    readonly activated: boolean;
+    readonly timestamp?: number; // Should be DOMHighResTimeStamp.
+    start(): void;
+    stop(): void;
+
+    onreading: (this: this, ev: Event) => any;
+    onactivate: (this: this, ev: Event) => any;
+    onerror: (this: this, ev: SensorErrorEvent) => any;
+
+    addEventListener(type: "reading" | "activate", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+    addEventListener(type: "error", listener: (this: this, ev: SensorErrorEvent) => any, useCapture?: boolean): void;
+}
+
+interface SensorOptions {
+    frequency?: number;
+}
+
+// Accelerometer: https://www.w3.org/TR/accelerometer/
+
+declare class Accelerometer extends Sensor {
+  constructor(options?: SensorOptions);
+  readonly x?: number;
+  readonly y?: number;
+  readonly z?: number;
+}
+
+declare class LinearAccelerationSensor extends Accelerometer {
+    constructor(options?: SensorOptions);
+}
+
+declare class GravitySensor extends Accelerometer {
+    constructor(options?: SensorOptions);
+}
+
+// Gyroscope: https://www.w3.org/TR/gyroscope/
+
+declare class Gyroscope extends Sensor {
+    constructor(options?: SensorOptions);
+    readonly x?: number;
+    readonly y?: number;
+    readonly z?: number;
+}
+
+// Magnetometer: https://www.w3.org/TR/magnetometer/
+
+declare class Magnetometer extends Sensor {
+    constructor(options?: SensorOptions);
+    readonly x?: number;
+    readonly y?: number;
+    readonly z?: number;
+}
+
+declare class UncalibratedMagnetometer extends Sensor {
+    constructor(options?: SensorOptions);
+    readonly x?: number;
+    readonly y?: number;
+    readonly z?: number;
+    readonly xBias?: number;
+    readonly yBias?: number;
+    readonly zBias?: number;
+}
+
+// Orientation Sensor: https://www.w3.org/TR/orientation-sensor/
+
+type RotationMatrixType = Float32Array | Float64Array | DOMMatrix;
+
+declare class OrientationSensor extends Sensor {
+    readonly quaternion?: number[];
+    populateMatrix(targetMatrix: RotationMatrixType): void;
+}
+
+declare class AbsoluteOrientationSensor extends OrientationSensor {
+    constructor(options?: SensorOptions);
+}
+
+declare class RelativeOrientationSensor extends OrientationSensor {
+    constructor(options?: SensorOptions);
+}
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "w3c-generic-sensor-tests.ts"
+    ]
+}
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
@@ -0,0 +1,246 @@
+// Accelerometer: https://www.w3.org/TR/accelerometer/
+
+const accelerometer1 = () => {
+    const sensor = new Accelerometer();
+    sensor.start();
+
+    sensor.onreading = () => {
+        console.log("Acceleration along X-axis: " + sensor.x);
+        console.log("Acceleration along Y-axis: " + sensor.y);
+        console.log("Acceleration along Z-axis: " + sensor.z);
+    };
+
+    sensor.onerror = event => console.log(event.error.name, event.error.message);
+};
+
+// Gyroscope: https://www.w3.org/TR/gyroscope/
+
+const gyroscope1 = () => {
+    const sensor = new Gyroscope();
+    sensor.start();
+
+    sensor.onreading = () => {
+        console.log("Angular velocity around the X-axis " + sensor.x);
+        console.log("Angular velocity around the Y-axis " + sensor.y);
+        console.log("Angular velocity around the Z-axis " + sensor.z);
+    };
+
+    sensor.onerror = event => console.log(event.error.name, event.error.message);
+};
+
+// From Magnetometer spec: https://www.w3.org/TR/magnetometer/
+
+const magnetometer1 = () => {
+    const sensor = new Magnetometer();
+    sensor.start();
+
+    sensor.onreading = () => {
+        console.log("Magnetic field along the X-axis " + sensor.x);
+        console.log("Magnetic field along the Y-axis " + sensor.y);
+        console.log("Magnetic field along the Z-axis " + sensor.z);
+    };
+
+    sensor.onerror = event => console.log(event.error.name, event.error.message);
+};
+
+const magnetometer2 = () => {
+    const sensor = new Magnetometer();
+    sensor.start();
+
+    sensor.onreading = () => {
+        if (!sensor.y || !sensor.x) {
+            return;
+        }
+        const heading = Math.atan2(sensor.y, sensor.x) * (180 / Math.PI);
+        console.log('Heading in degrees: ' + heading);
+    };
+};
+
+const magnetometer3 = () => {
+    const sensor = new Magnetometer();
+    sensor.start();
+
+    sensor.onreading = async () => {
+        if (!sensor.y || !sensor.x) {
+            return;
+        }
+        const heading = Math.atan2(sensor.y, sensor.x) * (180 / Math.PI);
+
+        // Get the latitude and longitude, omitted for brevity here.
+        const latitude = 0;
+        const longitude = 0;
+
+        // Get the magnetic declination at the given latitude and longitude.
+        const response = await fetch('https://www.ngdc.noaa.gov/geomag-web/calculators/calculateDeclination' +
+            `?lat1=${latitude}&lon1=${longitude}&resultFormat=csv`);
+        const text = await response.text();
+
+        const declination = parseFloat(text.replace(/^#.*$/gm, '').trim().split(',')[4]);
+
+        // Compensate for the magnetic declination to get the geographic north.
+        console.log('True heading in degrees: ' + (heading + declination));
+    };
+};
+
+// From Orientation Sensor spec: https://www.w3.org/TR/orientation-sensor/
+
+const orientation1 = () => {
+    const sensor = new AbsoluteOrientationSensor();
+    const mat4 = new Float32Array(16);
+    sensor.start();
+    sensor.onerror = event => console.log(event.error.name, event.error.message);
+
+    sensor.onreading = () => {
+        sensor.populateMatrix(mat4);
+    };
+};
+
+const orientation2 = () => {
+    const sensor = new AbsoluteOrientationSensor({ frequency: 60 });
+    const mat4 = new Float32Array(16);
+    sensor.start();
+    sensor.onerror = event => console.log(event.error.name, event.error.message);
+
+    function draw() {
+        window.requestAnimationFrame(draw);
+        try {
+            sensor.populateMatrix(mat4);
+        } catch (err) {
+            console.log("mat4 has not been updated: " + err);
+        }
+        // Drawing...
+    }
+
+    window.requestAnimationFrame(draw);
+};
+
+// From Explainer: https://www.w3.org/TR/motion-sensors/
+
+const explainer1 = () => {
+    class LowPassFilterData {
+        x: number;
+        y: number;
+        z: number;
+        bias: number;
+
+        constructor(reading: Accelerometer | Gyroscope | Magnetometer, bias: number) {
+            Object.assign(this, { x: reading.x, y: reading.y, z: reading.z });
+            this.bias = bias;
+        }
+
+        update(reading: Accelerometer | Gyroscope | Magnetometer) {
+            if (!reading.x || !reading.y || !reading.z) {
+                return;
+            }
+
+            this.x = this.x * this.bias + reading.x * (1 - this.bias);
+            this.y = this.y * this.bias + reading.y * (1 - this.bias);
+            this.z = this.z * this.bias + reading.z * (1 - this.bias);
+        }
+    }
+
+    const accl = new Accelerometer({ frequency: 20 });
+
+    // Isolate gravity with low-pass filter.
+    const filter = new LowPassFilterData(accl, 0.8);
+
+    accl.onreading = () => {
+        filter.update(accl); // Pass latest values through filter.
+        console.log(`Isolated gravity (${filter.x}, ${filter.y}, ${filter.z})`);
+    };
+
+    accl.start();
+};
+
+const explainer2 = () => {
+    class HighPassFilterData {
+        cutoff: number;
+        timestamp?: number;
+        x?: number;
+        y?: number;
+        z?: number;
+
+        constructor(reading: Accelerometer | Gyroscope | Magnetometer, cutoffFrequency: number) {
+            this.x = reading.x;
+            this.y = reading.y;
+            this.z = reading.z;
+            this.cutoff = cutoffFrequency;
+            this.timestamp = reading.timestamp;
+        }
+
+        update(reading: Accelerometer | Gyroscope | Magnetometer) {
+            if (!this.timestamp || !this.x || !this.y || !this.z) {
+                this.x = reading.x;
+                this.y = reading.y;
+                this.z = reading.z;
+                this.timestamp = reading.timestamp;
+                return;
+            }
+
+            if (!reading.timestamp || !reading.x || ! reading.y || !reading.z) {
+                return;
+            }
+
+            const dt = reading.timestamp - this.timestamp / 1000;
+            this.timestamp = reading.timestamp;
+
+            const alpha = this.cutoff / (this.cutoff + dt);
+            this.x = this.x + alpha * (reading.x - this.x);
+            this.y = this.y + alpha * (reading.y - this.y);
+            this.z = this.z + alpha * (reading.z - this.z);
+        }
+    }
+
+    const gyro = new Gyroscope({ frequency: 20 });
+
+    // Remove drift with a  high pass filter.
+    const filter = new HighPassFilterData(gyro, 0.8);
+
+    gyro.onreading = () => {
+        filter.update(gyro); // Pass latest values through filter.
+        console.log(`Steady gyroscope (${filter.x}, ${filter.y}, ${filter.z})`);
+    };
+
+    gyro.start();
+};
+
+const explainer3 = () => {
+    const options = { frequency: 50 };
+
+    const accl = new Accelerometer(options);
+    const gyro = new Gyroscope(options);
+
+    let timestamp = 0;
+    let alpha = 0;
+    let beta = 0;
+    let gamma = 0;
+    const bias = 0.98;
+
+    gyro.onreading = () => {
+        if (!gyro.timestamp || !gyro.x || !gyro.y || !gyro.z || !accl.x || !accl.y || !accl.z) {
+            return;
+        }
+
+        const dt = timestamp ? (gyro.timestamp - timestamp) / 1000 : 0;
+        timestamp = gyro.timestamp;
+
+        // Treat the acceleration vector as an orientation vector by normalizing it.
+        // Keep in mind that the if the device is flipped, the vector will just be
+        // pointing in the other direction, so we have no way to know from the
+        // accelerometer data which way the device is oriented.
+        const norm = Math.sqrt(accl.x ** 2 + accl.y ** 2 + accl.z ** 2);
+
+        // As we only can cover half (PI rad) of the full spectrum (2*PI rad) we multiply
+        // the unit vector with values from [-1, 1] with PI/2, covering [-PI/2, PI/2].
+        const scale = Math.PI / 2;
+
+        alpha = alpha + gyro.z * dt;
+        beta = bias * (beta + gyro.x * dt) + (1.0 - bias) * (accl.x * scale / norm);
+        gamma = bias * (gamma + gyro.y * dt) + (1.0 - bias) * (accl.y * -scale / norm);
+
+        // Do something with Euler angles (alpha, beta, gamma).
+    };
+
+    accl.start();
+    gyro.start();
+};
@@ -21,4 +21,4 @@
        "index.d.ts",
        "w3c-generic-sensor-tests.ts"
    ]
-}
+}
@@ -2,7 +2,7 @@
 // Project: https://www.w3.org/TR/image-capture/
 // Definitions by: Cosium <https://github.com/cosium>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 3.0

 /// <reference types="webrtc" />

@@ -0,0 +1,8 @@
+{
+    "private": true,
+    "types": "index",
+    "typesVersions": {
+        ">=3.1.0-0": { "*": ["ts3.1/*"] },
+        ">=3.2.0-0": { "*": ["ts3.2/*"] }
+    }
+}
@@ -0,0 +1,13 @@
+type ScreenOrientationLockType = "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary";
+
+interface ScreenOrientation extends EventTarget {
+    lock(orientation: ScreenOrientationLockType): Promise<void>;
+    unlock(): void;
+    readonly type: OrientationType;
+    readonly angle: number;
+    addEventListener(type: "change", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+}
+
+interface Screen {
+    readonly orientation: ScreenOrientation;
+}
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "w3c-screen-orientation-tests.ts"
+    ]
+}
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
@@ -0,0 +1,36 @@
+// Example 1 (from the spec):
+const show = () => {
+    console.log("Orientation type is " + screen.orientation.type);
+    console.log("Orientation angle is " + screen.orientation.angle);
+};
+
+screen.orientation.addEventListener("change", show);
+window.onload = show;
+
+// Example 2 (from the spec):
+const start = () => {
+    document.onfullscreenchange = () => {
+        screen.orientation.lock('natural').then(startInternal);
+    };
+    document.documentElement.requestFullscreen();
+};
+
+// Example 3 (from the spec):
+const startInternal = () => {};
+
+const start2 = () => {
+    screen.orientation.lock('landscape-primary').then(startInternal, () => {
+        alert('To start, rotate your screen to landscape.');
+
+        const orientationChangeHandler = () => {
+            if (!screen.orientation.type.startsWith('landscape')) {
+                return;
+            }
+            screen.orientation.removeEventListener('change', orientationChangeHandler);
+            startInternal();
+        };
+
+        screen.orientation.addEventListener('change', orientationChangeHandler);
+    });
+};
+window.onload = start2;
@@ -0,0 +1,13 @@
+type ScreenOrientationLockType = "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary";
+
+interface ScreenOrientation extends EventTarget {
+    lock(orientation: ScreenOrientationLockType): Promise<void>;
+    unlock(): void;
+    readonly type: OrientationType;
+    readonly angle: number;
+    addEventListener(type: "change", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+}
+
+interface Screen {
+    readonly orientation: ScreenOrientation;
+}
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "w3c-screen-orientation-tests.ts"
+    ]
+}
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
@@ -0,0 +1,36 @@
+// Example 1 (from the spec):
+const show = () => {
+    console.log("Orientation type is " + screen.orientation.type);
+    console.log("Orientation angle is " + screen.orientation.angle);
+};
+
+screen.orientation.addEventListener("change", show);
+window.onload = show;
+
+// Example 2 (from the spec):
+const start = () => {
+    document.onfullscreenchange = () => {
+        screen.orientation.lock('natural').then(startInternal);
+    };
+    document.documentElement.requestFullscreen();
+};
+
+// Example 3 (from the spec):
+const startInternal = () => {};
+
+const start2 = () => {
+    screen.orientation.lock('landscape-primary').then(startInternal, () => {
+        alert('To start, rotate your screen to landscape.');
+
+        const orientationChangeHandler = () => {
+            if (!screen.orientation.type.startsWith('landscape')) {
+                return;
+            }
+            screen.orientation.removeEventListener('change', orientationChangeHandler);
+            startInternal();
+        };
+
+        screen.orientation.addEventListener('change', orientationChangeHandler);
+    });
+};
+window.onload = start2;
@@ -2,10 +2,10 @@
 // Project: https://github.com/web-animations/web-animations-js
 // Definitions by: Kristian Moerch <https://github.com/kritollm>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.0

 type AnimationEffectTimingFillMode = "none" | "forwards" | "backwards" | "both" | "auto";
 type AnimationEffectTimingPlaybackDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
-type AnimationPlayState = "idle" | "running" | "paused" | "finished";

 interface AnimationPlaybackEvent {
    target: Animation;
@@ -68,18 +68,7 @@ interface ComputedTimingProperties {
    currentIteration: number | null;
 }

-declare class KeyframeEffect implements AnimationEffectReadOnly {
-    constructor(target: HTMLElement, effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming, id?: string);
-    activeDuration: number;
-    onsample: (timeFraction: number | null, effect: KeyframeEffect, animation: Animation) => void | undefined;
-    parent: KeyframeEffect | null;
-    target: HTMLElement;
-    timing: number;
-    getComputedTiming(): ComputedTimingProperties;
-    getFrames(): AnimationKeyFrame[];
-    remove(): void;
-}
-type AnimationEventListener = (this: Animation, evt: AnimationPlaybackEvent) => any;
+type AnimationEventListener = ((this: Animation, evt: AnimationPlaybackEvent) => any) | null;

 interface Animation extends EventTarget {
    currentTime: number | null;
@@ -88,7 +77,7 @@ interface Animation extends EventTarget {
    onfinish: AnimationEventListener;
    readonly playState: AnimationPlayState;
    playbackRate: number;
-    startTime: number;
+    startTime: number | null;
    cancel(): void;
    finish(): void;
    pause(): void;
@@ -96,15 +85,15 @@ interface Animation extends EventTarget {
    reverse(): void;
    addEventListener(type: "finish" | "cancel", handler: EventListener): void;
    removeEventListener(type: "finish" | "cancel", handler: EventListener): void;
-    effect: AnimationEffectReadOnly;
+    effect: AnimationEffect | null;
    readonly finished: Promise<Animation>;
    readonly ready: Promise<Animation>;
-    timeline: AnimationTimeline;
+    timeline: AnimationTimeline | null;
 }

 declare var Animation: {
    prototype: Animation;
-    new(effect?: AnimationEffectReadOnly, timeline?: AnimationTimeline): Animation;
+    new(effect?: AnimationEffect | null, timeline?: AnimationTimeline | null): Animation;
 };

 declare class SequenceEffect extends KeyframeEffect {
@@ -114,9 +103,10 @@ declare class GroupEffect extends KeyframeEffect {
    constructor(effects: KeyframeEffect[]);
 }
 interface Element {
-    animate(effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming): Animation;
+    animate(effect: AnimationKeyFrame | AnimationKeyFrame[] | null, timing: number | AnimationEffectTiming): Animation;
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
    getAnimations(): Animation[];
 }
 interface Document {
-    timeline: AnimationTimeline;
+    readonly timeline: AnimationTimeline;
 }
@@ -0,0 +1,7 @@
+{
+    "private": true,
+    "types": "index",
+    "typesVersions": {
+        ">=3.2.0-0": { "*": ["ts3.2/*"] }
+    }
+}
@@ -0,0 +1,105 @@
+type AnimationEffectTimingFillMode = "none" | "forwards" | "backwards" | "both" | "auto";
+type AnimationEffectTimingPlaybackDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
+
+interface AnimationPlaybackEvent {
+    target: Animation;
+    readonly currentTime: number | null;
+    readonly timelineTime: number |  null;
+    type: string;
+    bubbles: boolean;
+    cancelable: boolean;
+    currentTarget: Animation;
+    defaultPrevented: boolean;
+    eventPhase: number;
+    timeStamp: number;
+}
+
+interface AnimationPlaybackEventInit extends EventInit {
+    currentTime?: number | null;
+    timelineTime?: number | null;
+}
+
+declare var AnimationPlaybackEvent: {
+    prototype: AnimationPlaybackEvent;
+    new(type: string, eventInitDict?: AnimationPlaybackEventInit): AnimationPlaybackEvent;
+};
+
+interface AnimationKeyFrame {
+    easing?: string | string[];
+    offset?: number | Array<number | null> | null;
+    opacity?: number | number[];
+    transform?: string |  string[];
+    // [key: string]: string | number | [string | number, string | number] | undefined; (duplicate string indexer in TypeScript 2.7+)
+}
+
+interface AnimationTimeline {
+    readonly currentTime: number | null;
+    getAnimations(): Animation[];
+    play(effect: KeyframeEffect): Animation;
+}
+interface AnimationEffectTiming {
+    delay?: number;
+    direction?: AnimationEffectTimingPlaybackDirection;
+    duration?: number;
+    easing?: string;
+    endDelay?: number;
+    fill?: AnimationEffectTimingFillMode;
+    iterationStart?: number;
+    iterations?: number;
+    playbackRate?: number;
+}
+
+interface AnimationEffectReadOnly {
+    readonly timing: number;
+    getComputedTiming(): ComputedTimingProperties;
+}
+
+interface ComputedTimingProperties {
+    endTime: number;
+    activeDuration: number;
+    localTime: number | null;
+    progress: number | null;
+    currentIteration: number | null;
+}
+
+type AnimationEventListener = ((this: Animation, evt: AnimationPlaybackEvent) => any) | null;
+
+interface Animation extends EventTarget {
+    currentTime: number | null;
+    id: string;
+    oncancel: AnimationEventListener;
+    onfinish: AnimationEventListener;
+    readonly playState: AnimationPlayState;
+    playbackRate: number;
+    startTime: number | null;
+    cancel(): void;
+    finish(): void;
+    pause(): void;
+    play(): void;
+    reverse(): void;
+    addEventListener(type: "finish" | "cancel", handler: EventListener): void;
+    removeEventListener(type: "finish" | "cancel", handler: EventListener): void;
+    effect: AnimationEffect | null;
+    readonly finished: Promise<Animation>;
+    readonly ready: Promise<Animation>;
+    timeline: AnimationTimeline | null;
+}
+
+declare var Animation: {
+    prototype: Animation;
+    new(effect?: AnimationEffect | null, timeline?: AnimationTimeline | null): Animation;
+};
+
+declare class SequenceEffect extends KeyframeEffect {
+    constructor(effects: KeyframeEffect[]);
+}
+declare class GroupEffect extends KeyframeEffect {
+    constructor(effects: KeyframeEffect[]);
+}
+interface Element {
+    animate(effect: AnimationKeyFrame | AnimationKeyFrame[] | null, timing: number | AnimationEffectTiming): Animation;
+    getAnimations(): Animation[];
+}
+interface Document {
+    readonly timeline: AnimationTimeline;
+}
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es5",
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "web-animations-js-tests.ts"
+    ]
+}
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
@@ -0,0 +1,90 @@
+// From the documentation
+function test_doc() {
+    const elem = document.createElement('div');
+    const animation = elem.animate({
+        opacity: [0.5, 1],
+        transform: ['scale(0.5)', 'scale(1)']
+    }, {
+            direction: 'alternate',
+            duration: 500,
+            iterations: Infinity
+        });
+}
+// From https://io2015codelabs.appspot.com/codelabs/web-animations-transitions-playbackcontrol
+// To test KeyframeEffect, SequenceEffect and GroupEffect
+function test_AnimationsApiNext() {
+    function buildFadeIn(target: HTMLElement) {
+        const steps = [
+            { opacity: 0, transform: 'translate(0, 20em)' },
+            { opacity: 1, transform: 'translate(0)' }
+        ];
+        return new KeyframeEffect(target, steps, {
+            duration: 500,
+            delay: -1000,
+            fill: 'backwards',
+            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+        });
+    }
+    function buildFadeOut(target: HTMLElement) {
+        const angle = Math.pow((Math.random() * 16) - 6, 3);
+        const offset = (Math.random() * 20) - 10;
+        const transform = `translate(${offset}em, 20em) rotate(${angle}deg) scale(0)`;
+        const steps = [
+            { visibility: 'visible', opacity: 1, transform: 'none' },
+            { visibility: 'visible', opacity: 0, transform }
+        ];
+        return new KeyframeEffect(target, steps, {
+            duration: 1500,
+            easing: 'ease-in'
+        });
+    }
+    const effectNode = document.createElement('div');
+    effectNode.className = 'circleEffect';
+    const bounds = document.documentElement.getBoundingClientRect();
+    effectNode.style.left = `${bounds.left + bounds.width / 2}px`;
+    effectNode.style.top = `${bounds.top + bounds.height / 2}px`;
+    const header = document.querySelector('header');
+    if (header) {
+        header.appendChild(effectNode);
+    }
+    const newColor = `hsl(${Math.round(Math.random() * 255)}, 46%, 42%)`;
+    effectNode.style.background = newColor;
+    const scaleSteps = [{ transform: 'scale(0)' }, { transform: 'scale(1)' }];
+    const timing: AnimationEffectTiming = { duration: 2500, easing: 'ease-in-out', fill: "backwards" };
+    const scaleEffect = new KeyframeEffect(effectNode, scaleSteps, timing);
+    const fadeEffect = new SequenceEffect([buildFadeOut(effectNode), buildFadeIn(effectNode)]);
+    const allEffects = [scaleEffect, fadeEffect];
+    // Play all animations within this group.
+    const groupEffect = new GroupEffect(allEffects);
+    const anim = document.timeline.play(groupEffect);
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation
+// http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010
+function test_whiteRabbit() {
+    const whiteRabbit = document.getElementById("rabbit");
+    if (whiteRabbit) {
+        const rabbitDownKeyframes = new KeyframeEffect(
+            whiteRabbit,
+            [
+                { transform: 'translateY(0%)' },
+                { transform: 'translateY(100%)' }
+            ],
+            { duration: 3000, fill: 'forwards' }
+        );
+        const rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+        // On tap or click,
+        whiteRabbit.addEventListener("mousedown", downHeGoes, false);
+        whiteRabbit.addEventListener("touchstart", downHeGoes, false);
+
+        // Trigger a single-fire animation
+        function downHeGoes(event: Event) {
+            // Remove those event listeners
+            whiteRabbit!.removeEventListener("mousedown", downHeGoes, false);
+            whiteRabbit!.removeEventListener("touchstart", downHeGoes, false);
+
+            // Play rabbit animation
+            rabbitDownAnimation.play();
+        }
+    }
+}
@@ -14,10 +14,7 @@ function test_doc() {
 // To test KeyframeEffect, SequenceEffect and GroupEffect
 function test_AnimationsApiNext() {
    function buildFadeIn(target: HTMLElement) {
-        const steps = [
-            { opacity: 0, transform: 'translate(0, 20em)' },
-            { opacity: 1, transform: 'translate(0)' }
-        ];
+        const steps: Keyframe[] = [];
        return new KeyframeEffect(target, steps, {
            duration: 500,
            delay: -1000,
@@ -29,10 +26,7 @@ function test_AnimationsApiNext() {
        const angle = Math.pow((Math.random() * 16) - 6, 3);
        const offset = (Math.random() * 20) - 10;
        const transform = `translate(${offset}em, 20em) rotate(${angle}deg) scale(0)`;
-        const steps = [
-            { visibility: 'visible', opacity: 1, transform: 'none' },
-            { visibility: 'visible', opacity: 0, transform }
-        ];
+        const steps: Keyframe[] = [];
        return new KeyframeEffect(target, steps, {
            duration: 1500,
            easing: 'ease-in'
@@ -40,7 +34,8 @@ function test_AnimationsApiNext() {
    }
    const effectNode = document.createElement('div');
    effectNode.className = 'circleEffect';
-    const bounds = document.documentElement.getBoundingClientRect();
+    // tslint:disable-next-line:no-unnecessary-type-assertion
+    const bounds = document.documentElement!.getBoundingClientRect();
    effectNode.style.left = `${bounds.left + bounds.width / 2}px`;
    effectNode.style.top = `${bounds.top + bounds.height / 2}px`;
    const header = document.querySelector('header');
@@ -49,7 +44,7 @@ function test_AnimationsApiNext() {
    }
    const newColor = `hsl(${Math.round(Math.random() * 255)}, 46%, 42%)`;
    effectNode.style.background = newColor;
-    const scaleSteps = [{ transform: 'scale(0)' }, { transform: 'scale(1)' }];
+    const scaleSteps: Keyframe[] = [];
    const timing: AnimationEffectTiming = { duration: 2500, easing: 'ease-in-out', fill: "backwards" };
    const scaleEffect = new KeyframeEffect(effectNode, scaleSteps, timing);
    const fadeEffect = new SequenceEffect([buildFadeOut(effectNode), buildFadeIn(effectNode)]);
@@ -66,10 +61,7 @@ function test_whiteRabbit() {
    if (whiteRabbit) {
        const rabbitDownKeyframes = new KeyframeEffect(
            whiteRabbit,
-            [
-                { transform: 'translateY(0%)' },
-                { transform: 'translateY(100%)' }
-            ],
+            [],
            { duration: 3000, fill: 'forwards' }
        );
        const rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
@@ -88,31 +80,3 @@ function test_whiteRabbit() {
        }
    }
 }
-// Testing onsample
-// https://github.com/web-animations/web-animations-js/releases
-function test_onsample_And_addEventListener() {
-    const elem = document.createElement("div");
-    if (elem) {
-        elem.style.width = '150px';
-        elem.style.color = 'black';
-        elem.textContent = "HELLO";
-        document.body.appendChild(elem);
-        const myEffect = new KeyframeEffect(elem, [], 1000);
-        myEffect.onsample = (timeFraction, effect, animation) => {
-            console.log("fraction", timeFraction);
-            // After finish event, timeFraction is null
-            if (timeFraction) {
-                effect.target.style.opacity = timeFraction.toFixed(2);
-            }
-        };
-        // onsample is write only
-        console.log(myEffect.onsample); // => undefined
-        const myAnimation = document.timeline.play(myEffect);
-        myAnimation.addEventListener("finish", (e) => {
-            console.log("finished", e);
-        });
-        myAnimation.addEventListener("cancel", (e) => {
-            console.log("canceled", e);
-        });
-    }
-}
@@ -11,8 +11,6 @@

 /// <reference path='MediaStream.d.ts' />

-type EventHandler = (event: Event) => void;
-
 // https://www.w3.org/TR/webrtc/#idl-def-rtcofferansweroptions
 interface RTCOfferAnswerOptions {
    voiceActivityDetection?: boolean; // default = true
@@ -27,21 +25,12 @@ interface RTCOfferOptions extends RTCOfferAnswerOptions {
 interface RTCAnswerOptions extends RTCOfferAnswerOptions {
 }

-// https://www.w3.org/TR/webrtc/#idl-def-rtcpeerconnectionstate
-type RTCPeerConnectionState = 'new' | 'connecting' | 'connected' | 'disconnected' | 'failed' | 'closed';
-
-// https://www.w3.org/TR/webrtc/#idl-def-rtcicecredentialtype
-type RTCIceCredentialType = 'password' | 'token';
-
 // https://www.w3.org/TR/webrtc/#idl-def-rtciceserver
 interface RTCIceServer {
    //urls: string | string[];
    credentialType?: RTCIceCredentialType; // default = 'password'
 }

-// https://www.w3.org/TR/webrtc/#idl-def-rtcrtcpmuxpolicy
-type RTCRtcpMuxPolicy = 'negotiate' | 'require';
-
 // https://www.w3.org/TR/webrtc/#idl-def-rtciceparameters
 interface RTCIceParameters {
    //usernameFragment: string;
@@ -49,6 +38,7 @@ interface RTCIceParameters {
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcicetransport
+type IceTransportEventHandler = ((this: RTCIceTransport, ev: Event) => any) | null;
 interface RTCIceTransport {
    //readonly role: RTCIceRole;
    //readonly component: RTCIceComponent;
@@ -59,17 +49,18 @@ interface RTCIceTransport {
    getSelectedCandidatePair(): RTCIceCandidatePair | null;
    getLocalParameters(): RTCIceParameters | null;
    getRemoteParameters(): RTCIceParameters | null;
-    onstatechange: EventHandler;
-    ongatheringstatechange: EventHandler;
-    onselectedcandidatepairchange: EventHandler;
+    onstatechange: IceTransportEventHandler;
+    ongatheringstatechange: IceTransportEventHandler;
+    onselectedcandidatepairchange: IceTransportEventHandler;
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcdtlstransport
+type DtlsTransportEventHandler = ((this: RTCDtlsTransport, ev: Event) => any) | null;
 interface RTCDtlsTransport {
    readonly transport: RTCIceTransport;
    //readonly state: RTCDtlsTransportState;
    getRemoteCertificates(): ArrayBuffer[];
-    onstatechange: EventHandler;
+    onstatechange: DtlsTransportEventHandler;
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtpcodeccapability
@@ -79,7 +70,7 @@ interface RTCRtpCodecCapability {

 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtpheaderextensioncapability
 interface RTCRtpHeaderExtensionCapability {
-    uri: string;
+    uri?: string;
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtpcapabilities
@@ -98,18 +89,12 @@ interface RTCRtpFecParameters {
    //ssrc: number;
 }

-// https://www.w3.org/TR/webrtc/#idl-def-rtcdtxstatus
-type RTCDtxStatus = 'disabled' | 'enabled';
-
-// https://www.w3.org/TR/webrtc/#idl-def-rtcprioritytype
-type RTCPriorityType = 'very-low' | 'low' | 'medium' | 'high';
-
 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtpencodingparameters
 interface RTCRtpEncodingParameters {
    //ssrc: number;
    //rtx: RTCRtpRtxParameters;
    //fec: RTCRtpFecParameters;
-    dtx: RTCDtxStatus;
+    dtx?: RTCDtxStatus;
    //active: boolean;
    //priority: RTCPriorityType;
    //maxBitrate: number;
@@ -121,7 +106,7 @@ interface RTCRtpEncodingParameters {
 interface RTCRtpHeaderExtensionParameters {
    //uri: string;
    //id: number;
-    encrypted: boolean;
+    encrypted?: boolean;
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtcpparameters
@@ -136,7 +121,7 @@ interface RTCRtpCodecParameters {
    mimeType: string;
    //clockRate: number;
    channels?: number; // default = 1
-    sdpFmtpLine: string;
+    sdpFmtpLine?: string;
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtpparameters
@@ -152,9 +137,9 @@ interface RTCRtpParameters {
 // https://www.w3.org/TR/webrtc/#dom-rtcrtpcontributingsource
 interface RTCRtpContributingSource {
    //readonly timestamp: number;
-    readonly source: number;
+    source: number;
    //readonly audioLevel: number | null;
-    readonly voiceActivityFlag: boolean | null;
+    readonly voiceActivityFlag?: boolean;
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtpcapabilities
@@ -182,16 +167,13 @@ interface RTCRtpReceiver {
    getContributingSources(): RTCRtpContributingSource[];
 }

-// https://www.w3.org/TR/webrtc/#idl-def-rtcrtptransceiverdirection
-type RTCRtpTransceiverDirection = 'sendrecv' | 'sendonly' | 'recvonly' | 'inactive';
-
 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtptransceiver
 interface RTCRtpTransceiver {
    readonly mid: string | null;
    readonly sender: RTCRtpSender;
    readonly receiver: RTCRtpReceiver;
    readonly stopped: boolean;
-    readonly direction: RTCRtpTransceiverDirection;
+    direction: RTCRtpTransceiverDirection;
    setDirection(direction: RTCRtpTransceiverDirection): void;
    stop(): void;
    setCodecPreferences(codecs: RTCRtpCodecCapability[]): void;
@@ -200,8 +182,8 @@ interface RTCRtpTransceiver {
 // https://www.w3.org/TR/webrtc/#idl-def-rtcrtptransceiverinit
 interface RTCRtpTransceiverInit {
    direction?: RTCRtpTransceiverDirection; // default = 'sendrecv'
-    streams: MediaStream[];
-    sendEncodings: RTCRtpEncodingParameters[];
+    streams?: MediaStream[];
+    sendEncodings?: RTCRtpEncodingParameters[];
 }

 // https://www.w3.org/TR/webrtc/#dom-rtccertificate
@@ -240,13 +222,8 @@ interface RTCDataChannelInit {
    id?: number;
 }

-// https://www.w3.org/TR/webrtc/#idl-def-rtcdatachannelstate
-type RTCDataChannelState = 'connecting' | 'open' | 'closing' | 'closed';
-
-// https://www.w3.org/TR/websockets/#dom-websocket-binarytype
-type RTCBinaryType = 'blob' | 'arraybuffer';
-
 // https://www.w3.org/TR/webrtc/#idl-def-rtcdatachannel
+type DataChannelEventHandler<E extends Event> = ((this: RTCDataChannel, ev: E) => any) | null;
 interface RTCDataChannel extends EventTarget {
    readonly label: string;
    readonly ordered: boolean;
@@ -254,33 +231,33 @@ interface RTCDataChannel extends EventTarget {
    readonly maxRetransmits: number | null;
    readonly protocol: string;
    readonly negotiated: boolean;
-    readonly id: number;
+    readonly id: number | null;
    readonly readyState: RTCDataChannelState;
    readonly bufferedAmount: number;
    bufferedAmountLowThreshold: number;
-    binaryType: RTCBinaryType;
+    binaryType: string;

    close(): void;
    send(data: string | Blob | ArrayBuffer | ArrayBufferView): void;

-    onopen: EventHandler;
-    onmessage: (event: MessageEvent) => void;
-    onbufferedamountlow: EventHandler;
-    onerror: (event: ErrorEvent) => void;
-    onclose: EventHandler;
+    onopen: DataChannelEventHandler<Event>;
+    onmessage: DataChannelEventHandler<MessageEvent>;
+    onbufferedamountlow: DataChannelEventHandler<Event>;
+    onerror: DataChannelEventHandler<RTCErrorEvent>;
+    onclose: DataChannelEventHandler<Event>;
 }

 // https://www.w3.org/TR/webrtc/#h-rtctrackevent
 interface RTCTrackEvent extends Event {
    readonly receiver: RTCRtpReceiver;
    readonly track: MediaStreamTrack;
-    readonly streams: MediaStream[];
+    readonly streams: ReadonlyArray<MediaStream>;
    readonly transceiver: RTCRtpTransceiver;
 }

 // https://www.w3.org/TR/webrtc/#h-rtcpeerconnectioniceevent
 interface RTCPeerConnectionIceEvent extends Event {
-    readonly url: string;
+    readonly url: string | null;
 }

 // https://www.w3.org/TR/webrtc/#h-rtcpeerconnectioniceerrorevent
@@ -297,6 +274,7 @@ interface RTCDataChannelEvent {
 }

 // https://www.w3.org/TR/webrtc/#idl-def-rtcpeerconnection
+type PeerConnectionEventHandler<E extends Event> = ((this: RTCPeerConnection, ev: E) => any) | null;
 interface RTCPeerConnection extends EventTarget {
    createOffer(options?: RTCOfferOptions): Promise<RTCSessionDescriptionInit>;
    createAnswer(options?: RTCAnswerOptions): Promise<RTCSessionDescriptionInit>;
@@ -320,8 +298,8 @@ interface RTCPeerConnection extends EventTarget {
    setConfiguration(configuration: RTCConfiguration): void;
    close(): void;

-    onicecandidateerror: (event: RTCPeerConnectionIceErrorEvent) => void;
-    onconnectionstatechange: EventHandler;
+    onicecandidateerror: PeerConnectionEventHandler<RTCPeerConnectionIceErrorEvent>;
+    onconnectionstatechange: PeerConnectionEventHandler<Event>;

    // Extension: https://www.w3.org/TR/webrtc/#h-rtcpeerconnection-interface-extensions
    getSenders(): RTCRtpSender[];
@@ -330,12 +308,12 @@ interface RTCPeerConnection extends EventTarget {
    addTrack(track: MediaStreamTrack, ...streams: MediaStream[]): RTCRtpSender;
    removeTrack(sender: RTCRtpSender): void;
    addTransceiver(trackOrKind: MediaStreamTrack | string, init?: RTCRtpTransceiverInit): RTCRtpTransceiver;
-    ontrack: (event: RTCTrackEvent) => void;
+    ontrack: PeerConnectionEventHandler<RTCTrackEvent>;

    // Extension: https://www.w3.org/TR/webrtc/#h-rtcpeerconnection-interface-extensions-1
    readonly sctp: RTCSctpTransport | null;
    createDataChannel(label: string | null, dataChannelDict?: RTCDataChannelInit): RTCDataChannel;
-    ondatachannel: (event: RTCDataChannelEvent) => void;
+    ondatachannel: PeerConnectionEventHandler<RTCDataChannelEvent>;

    // Extension: https://www.w3.org/TR/webrtc/#h-rtcpeerconnection-interface-extensions-2
    getStats(selector?: MediaStreamTrack | null): Promise<RTCStatsReport>;
@@ -2,7 +2,7 @@
 // Project: https://webrtc.org/
 // Definitions by: Toshiya Nakakura <https://github.com/nakakura>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 3.0

 /// <reference path="RTCPeerConnection.d.ts" />
 /// <reference path="MediaStream.d.ts" />