feat: generate Typescript definitions (#7954)

package.json

@@ -5,6 +5,7 @@
   "main": "./dist/video.cjs.js",
   "module": "./dist/video.es.js",
   "style": "./dist/video-js.css",
+  "types": "./dist/types/video.d.ts",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [
@@ -25,7 +26,7 @@
     "postclean": "shx mkdir -p ./dist/lang ./test/dist",
     "changelog": "conventional-changelog -p videojs -i CHANGELOG.md -s",
     "build": "npm-run-all build-dev minify copy zip",
-    "build-dev": "npm-run-all clean lint-errors build:js build:css build:lang build:test",
+    "build-dev": "npm-run-all clean lint-errors build:js build:css build:lang build:test build:types",
     "build:test": "npm-run-all build:test:*",
     "build:test:a11y": "shx cp sandbox/descriptions.html.example sandbox/descriptions.test-a11y.html",
     "build:test:browserify": "browserify test/require/browserify.js -o test/dist/browserify.js",
@@ -36,6 +37,7 @@
     "build:js": "rollup -c",
     "build:css": "npm-run-all build:css:*",
     "build:css:cdn": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css",
+    "build:types": "tsc",
     "postbuild:css:cdn": "postcss --verbose --config postcss.config.js -d dist/alt dist/alt/video-js-cdn.css",
     "build:css:default": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs.scss dist/video-js.css",
     "postbuild:css:default": "postcss --verbose --config postcss.config.js -d dist/ dist/video-js.css",
@@ -52,6 +54,7 @@
     "watch": "npm-run-all -p watch:*",
     "watch:lang": "chokidar --initial 'lang/**/!(zh-Hans|zh-Hant)*.json' -c 'npm run build:lang'",
     "watch:rollup": "rollup -c -w --no-progress",
+    "watch:types": "tsc -w",
     "watch:css": "npm-run-all -p build:css:default build:css:cdn watch:css:*",
     "watch:css:default": "npm run build:css:default -- --watch",
     "watch:css:cdn": "npm run build:css:cdn -- --watch",
@@ -103,6 +106,7 @@
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@rollup/plugin-replace": "^2.4.1",
+    "@types/node": "^18.8.3",
     "access-sniff": "^3.2.0",
     "autoprefixer": "^10.2.5",
     "bestzip": "^2.2.0",
@@ -156,6 +160,7 @@
     "shx": "^0.3.2",
     "sinon": "^11.1.1",
     "tui-jsdoc-template": "^1.2.2",
+    "typescript": "^4.8.4",
     "uglify-js": "^3.6.0",
     "unified": "^7.0.2",
     "videojs-generate-karma-config": "^8.0.1",

src/js/component.js

@@ -25,7 +25,7 @@ class Component {
 
   /**
    * A callback that is called when a component is ready. Does not have any
-   * paramters and any callback value will be ignored.
+   * parameters and any callback value will be ignored.
    *
    * @callback Component~ReadyCallback
    * @this Component
@@ -700,6 +700,9 @@ class Component {
    * Different from event listeners in that if the ready event has already happened
    * it will trigger the function immediately.
    *
+   * @param {Component~ReadyCallback} fn
+   *        Function that gets called when the `Component` is ready.
+   *
    * @return {Component}
    *         Returns itself; method can be chained.
    */