Merge pull request #291 from opentok/fix-typescript-definitions

Fix TypeScript definitions

Author: jeffswartz

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "opentok-network-test-js",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "Precall network test for applications using the OpenTok platform.",
   "main": "dist/NetworkTest/index.js",
   "types": "dist/NetworkTest/index.d.ts",
@@ -84,6 +84,9 @@
     },
     "find-versions": {
       "semver-regex": "^4.0.5"
+    },
+    "bin-check": {
+      "execa": "1.0.0"
     }
   }
 }

package.json

@@ -13,6 +13,8 @@
   "license": "MIT",
   "homepage": "https://github.com/opentok/opentok-network-connectivity",
   "devDependencies": {
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
     "webpack": "^5.88.1"
   },
   "dependencies": {

sample/package-lock.json

@@ -2,8 +2,9 @@ import NetworkTest from 'opentok-network-test-js';
 import createChart from './chart.js';
 import * as ConnectivityUI from './connectivity-ui.js';
 import config from './config.js';
+declare const OT: any;
 let sessionInfo = config;
-let otNetworkTest;
+let otNetworkTest : NetworkTest;
 let audioOnly;
 
 const precallDiv = document.getElementById('precall');
@@ -14,12 +15,12 @@ precallDiv.querySelector('#precall button').addEventListener('click', function (
 });
 
 function startTest() {
-    const audioOnly = precallDiv.querySelector('#audioOnlyCheckbox').checked;
-    const scalableVideo = precallDiv.querySelector('#scalableCheckbox').checked;
-    const fullHd = precallDiv.querySelector('#fullHdCheckbox').checked;
+    const audioOnly = (precallDiv.querySelector('#audioOnlyCheckbox') as HTMLInputElement).checked;
+    const scalableVideo = (precallDiv.querySelector('#scalableCheckbox') as HTMLInputElement).checked;
+    const fullHd = (precallDiv.querySelector('#fullHdCheckbox') as HTMLInputElement).checked;
 
     const timeoutSelect = precallDiv.querySelector('select');
-    const timeout = timeoutSelect.options[timeoutSelect.selectedIndex].text * 1000;
+    const timeout = Number(timeoutSelect.options[timeoutSelect.selectedIndex].text) * 1000;
 
     const options = {
         audioOnly: audioOnly,
@@ -48,4 +49,4 @@ function testQuality() {
         ConnectivityUI.graphIntermediateStats('video', stats);
     }).then(results => ConnectivityUI.displayTestQualityResults(null, results))
         .catch(error => ConnectivityUI.displayTestQualityResults(error));
-}
+}

sample/package.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  }
+}

sample/src/js/index.js renamed to sample/src/js/index.ts

@@ -1,6 +1,18 @@
 module.exports = {
-    entry: ['./src/js/index.js'],
+    entry: ['./src/js/index.ts'],
     mode: "none",
+    module: {
+    rules: [
+        {
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/,
+        },
+    ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
     output: {
         path: __dirname,
         filename: "bundle.js"

sample/tsconfig.json

@@ -6,6 +6,8 @@
     "lib": ["es2018", "es2017.object", "dom"],                 /* Specify library files to be included in the compilation:  */
     "allowJs": false,                       /* Allow javascript files to be compiled. */
     "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    "declarationMap": true,
+    "declarationDir": "dist",
     "sourceMap": true,                        /* Generates corresponding '.map' file. */
     "outDir": "../",                       /* Redirect output structure to the directory. */
     "rootDir": "src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */

sample/webpack.config.js

@@ -10,7 +10,12 @@ module.exports = {
     rules: [{
       test: /\.tsx?$/,
       use: [
-        { loader: 'ts-loader' },
+        {
+          loader: 'ts-loader',
+                options: {
+                  transpileOnly: false
+                }
+        },
       ],
     }],
   },