set ts strict mode (#271)

src/index.tsx

@@ -137,6 +137,7 @@ function App() {
         }
         controller={true}
         layers={layers}
+        // @ts-expect-error
         getTooltip={showTooltip && getTooltip}
         pickingRadius={pickingRadius}
       >

src/model/base.ts

@@ -29,13 +29,13 @@ export abstract class BaseModel {
    * @param   {string}  jsName      Name of attribute in deck.gl (usually camel-cased)
    */
   protected initRegularAttribute(pythonName: string, jsName: string) {
-    this[jsName] = this.model.get(pythonName);
+    this[jsName as keyof this] = this.model.get(pythonName);
 
     // Remove all existing change callbacks for this attribute
     this.model.off(`change:${pythonName}`);
 
     const callback = () => {
-      this[jsName] = this.model.get(pythonName);
+      this[jsName as keyof this] = this.model.get(pythonName);
     };
     this.model.on(`change:${pythonName}`, callback);
 
@@ -53,13 +53,13 @@ export abstract class BaseModel {
    * @param   {string}  jsName      Name of attribute in deck.gl (usually camel-cased)
    */
   protected initVectorizedAccessor(pythonName: string, jsName: string) {
-    this[jsName] = parseAccessor(this.model.get(pythonName));
+    this[jsName as keyof this] = parseAccessor(this.model.get(pythonName));
 
     // Remove all existing change callbacks for this attribute
     this.model.off(`change:${pythonName}`);
 
     const callback = () => {
-      this[jsName] = parseAccessor(this.model.get(pythonName));
+      this[jsName as keyof this] = parseAccessor(this.model.get(pythonName));
     };
     this.model.on(`change:${pythonName}`, callback);
 

src/model/extension.ts

@@ -11,7 +11,7 @@ import { BaseModel } from "./base.js";
 export abstract class BaseExtensionModel extends BaseModel {
   static extensionType: string;
 
-  extensionInstance: LayerExtension;
+  abstract extensionInstance: LayerExtension;
 
   constructor(model: WidgetModel, updateStateCallback: () => void) {
     super(model, updateStateCallback);
@@ -80,6 +80,7 @@ export class CollisionFilterExtension extends BaseExtensionModel {
 
   extensionProps(): CollisionFilterExtensionProps {
     // TODO: vectorized accessor array doesn't get set yet on data.attributes
+    // @ts-expect-error
     return {
       ...(this.collisionEnabled && { collisionEnabled: this.collisionEnabled }),
       ...(this.collisionGroup && { collisionGroup: this.collisionGroup }),

src/model/layer.ts

@@ -1,4 +1,4 @@
-import type { Layer, LayerExtension, LayerProps } from "@deck.gl/core/typed";
+import type { Layer, LayerExtension, LayerProps, PickingInfo } from "@deck.gl/core/typed";
 import {
   GeoArrowArcLayer,
   GeoArrowArcLayerProps,
@@ -24,7 +24,7 @@ import { BaseModel } from "./base.js";
 import { BaseExtensionModel, initializeExtension } from "./extension.js";
 
 export abstract class BaseLayerModel extends BaseModel {
-  protected table: arrow.Table;
+  protected table!: arrow.Table;
 
   protected pickable: LayerProps["pickable"];
   protected visible: LayerProps["visible"];
@@ -36,12 +36,14 @@ export abstract class BaseLayerModel extends BaseModel {
   constructor(model: WidgetModel, updateStateCallback: () => void) {
     super(model, updateStateCallback);
 
-    this.initTable("table", "table");
+    this.initTable("table");
 
     this.initRegularAttribute("pickable", "pickable");
     this.initRegularAttribute("visible", "visible");
     this.initRegularAttribute("opacity", "opacity");
     this.initRegularAttribute("auto_highlight", "autoHighlight");
+
+    this.extensions = [];
   }
 
   async loadSubModels() {
@@ -60,7 +62,7 @@ export abstract class BaseLayerModel extends BaseModel {
     return props;
   }
 
-  onClick(pickingInfo: GeoArrowPickingInfo) {
+  onClick(pickingInfo: PickingInfo) {
     if (!pickingInfo.index) return;
 
     this.model.set("selected_index", pickingInfo.index);
@@ -99,16 +101,15 @@ export abstract class BaseLayerModel extends BaseModel {
    * changes to this class' internal state.
    *
    * @param   {string}  pythonName  Name of attribute on Python model (usually snake-cased)
-   * @param   {string}  jsName      Name of attribute in deck.gl (usually camel-cased)
    */
-  initTable(pythonName: string, jsName: string) {
-    this[jsName] = parseParquetBuffers(this.model.get(pythonName));
+  initTable(pythonName: string) {
+    this.table = parseParquetBuffers(this.model.get(pythonName));
 
     // Remove all existing change callbacks for this attribute
     this.model.off(`change:${pythonName}`);
 
     const callback = () => {
-      this[jsName] = parseParquetBuffers(this.model.get(pythonName));
+      this.table = parseParquetBuffers(this.model.get(pythonName));
     };
     this.model.on(`change:${pythonName}`, callback);
 
@@ -164,12 +165,8 @@ export class ArcModel extends BaseLayerModel {
   protected widthScale: GeoArrowArcLayerProps["widthScale"] | null;
   protected widthMinPixels: GeoArrowArcLayerProps["widthMinPixels"] | null;
   protected widthMaxPixels: GeoArrowArcLayerProps["widthMaxPixels"] | null;
-  protected getSourcePosition:
-    | GeoArrowArcLayerProps["getSourcePosition"]
-    | null;
-  protected getTargetPosition:
-    | GeoArrowArcLayerProps["getTargetPosition"]
-    | null;
+  protected getSourcePosition!: GeoArrowArcLayerProps["getSourcePosition"]
+  protected getTargetPosition!: GeoArrowArcLayerProps["getTargetPosition"]
   protected getSourceColor: GeoArrowArcLayerProps["getSourceColor"] | null;
   protected getTargetColor: GeoArrowArcLayerProps["getTargetColor"] | null;
   protected getWidth: GeoArrowArcLayerProps["getWidth"] | null;
@@ -232,7 +229,7 @@ export class ColumnModel extends BaseLayerModel {
   protected diskResolution: GeoArrowColumnLayerProps["diskResolution"] | null;
   protected radius: GeoArrowColumnLayerProps["radius"] | null;
   protected angle: GeoArrowColumnLayerProps["angle"] | null;
-  protected vertices: GeoArrowColumnLayerProps["vertices"] | null;
+  protected vertices!: GeoArrowColumnLayerProps["vertices"];
   protected offset: GeoArrowColumnLayerProps["offset"] | null;
   protected coverage: GeoArrowColumnLayerProps["coverage"] | null;
   protected elevationScale: GeoArrowColumnLayerProps["elevationScale"] | null;
@@ -292,7 +289,7 @@ export class ColumnModel extends BaseLayerModel {
       ...(this.diskResolution && { diskResolution: this.diskResolution }),
       ...(this.radius && { radius: this.radius }),
       ...(this.angle && { angle: this.angle }),
-      ...(this.vertices && { vertices: this.vertices }),
+      ...(this.vertices! && { vertices: this.vertices }),
       ...(this.offset && { offset: this.offset }),
       ...(this.coverage && { coverage: this.coverage }),
       ...(this.elevationScale && { elevationScale: this.elevationScale }),
@@ -601,7 +598,7 @@ export class TextModel extends BaseLayerModel {
   protected fontSettings: GeoArrowTextLayerProps["fontSettings"] | null;
   protected wordBreak: GeoArrowTextLayerProps["wordBreak"] | null;
   protected maxWidth: GeoArrowTextLayerProps["maxWidth"] | null;
-  protected getText: GeoArrowTextLayerProps["getText"] | null;
+  protected getText!: GeoArrowTextLayerProps["getText"];
   protected getPosition: GeoArrowTextLayerProps["getPosition"] | null;
   protected getColor: GeoArrowTextLayerProps["getColor"] | null;
   protected getSize: GeoArrowTextLayerProps["getSize"] | null;

tsconfig.json

@@ -15,8 +15,8 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "skipLibCheck": true,
-    // "strict": true,
-    // "strictNullChecks": true,
+    "strict": true,
+    "strictNullChecks": true,
     // "lib": [
     //   "es2019.array", "es6", "dom"
     // ],