Fix TS errors

src/code_manager/model/CssGenerator.ts

@@ -63,7 +63,7 @@ export default class CssGenerator extends Model {
     const em = this.em;
     const avoidInline = em && em.getConfig().avoidInlineStyle;
     const style = model.styleToString();
-    const classes = model.get('classes');
+    const classes = model.classes;
     this.ids.push(`#${model.getId()}`);
 
     // Let's know what classes I've found
@@ -197,7 +197,7 @@ export default class CssGenerator extends Model {
           rule
             .selectorsToString()
             .split(',')
-            .some(selector => el.matches(this.__cleanSelector(selector)))
+            .some(selector => el?.matches(this.__cleanSelector(selector)))
         ) {
           result.push(rule);
         }

src/commands/view/MoveComponent.ts

@@ -95,7 +95,7 @@ export default extend({}, SelectPosition, SelectComponent, {
     this.cacheEl = null;
     const lastModel = models[models.length - 1];
     const frame = (this.em.get('currentFrame') || {}).model;
-    const el = lastModel.getEl(frame);
+    const el = lastModel.getEl(frame)!;
     const doc = el.ownerDocument;
     this.startSelectPosition(el, doc, { onStart: this.onStart });
     this.sorter.draggable = lastModel.get('draggable');

src/dom_components/index.ts

@@ -342,7 +342,7 @@ export default class ComponentManager extends ItemManagerModule {
    */
   getComponents(): Components {
     const wrp = this.getWrapper();
-    return wrp && wrp.get('components');
+    return wrp?.get('components')!;
   }
 
   /**
@@ -617,7 +617,7 @@ export default class ComponentManager extends ItemManagerModule {
 
     if (!srcModel) {
       const wrapper = this.getShallowWrapper();
-      srcModel = wrapper?.append(source)[0];
+      srcModel = wrapper?.append(source)[0] || null;
     }
 
     //@ts-ignore

src/dom_components/model/Components.ts

@@ -323,6 +323,7 @@ export default class Components extends Collection<Component> {
     const avoidInline = em && em.getConfig().avoidInlineStyle;
     domc && domc.Component.ensureInList(model);
 
+    // @ts-ignore
     if (!isEmpty(style) && !avoidInline && em && em.get && em.getConfig().forceClass && !opts.temporary) {
       const name = model.cid;
       const rule = em.get('CssComposer').setClassRule(name, style);

src/dom_components/model/types.ts

@@ -3,6 +3,7 @@ import EditorModel from '../../editor/model/Editor';
 import Selectors from '../../selector_manager/model/Selectors';
 import { TraitProperties } from '../../trait_manager/model/Trait';
 import Traits from '../../trait_manager/model/Traits';
+import { ResizerOptions } from '../../utils/Resizer';
 import { DomComponentsConfig } from '../config/config';
 import Component from './Component';
 import Components from './Components';
@@ -84,7 +85,7 @@ export interface ComponentProperties {
   /**
    * Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js). Default: `false`
    */
-  resizable?: boolean;
+  resizable?: boolean | ResizerOptions;
   /**
    * Allow to edit the content of the component (used on Text components). Default: `false`
    */

src/navigator/index.ts

@@ -367,7 +367,7 @@ export default class LayerManager extends Module<LayerManagerConfig> {
     const hideText = this.config.hideTextnode;
     const isValid = !hideText || (!cmp.is('textnode') && tag !== 'br');
 
-    return isValid && cmp.get('layerable');
+    return isValid && cmp.get('layerable')!;
   }
 
   __trgCustom(opts?: any) {

src/navigator/view/ItemView.ts

@@ -274,7 +274,7 @@ export default class ItemView extends View {
     const { model, module } = this;
     ev?.stopImmediatePropagation();
 
-    if (!model.get('components').length) return;
+    if (!model.get('components')!.length) return;
 
     module.setOpen(model, !module.isOpen(model));
   }

src/trait_manager/model/Trait.ts

@@ -242,7 +242,7 @@ export default class Trait extends Model<TraitProperties> {
     let value;
 
     if (target) {
-      const attrs = target.get('attributes');
+      const attrs = target.get('attributes')!;
       value = this.get('changeProp') ? target.get(name) : attrs[name];
     }
 

src/trait_manager/view/TraitView.ts

@@ -223,7 +223,7 @@ export default class TraitView extends View<Trait> {
     if (model.get('changeProp')) {
       value = target.get(name);
     } else {
-      const attrs = target.get('attributes');
+      const attrs = target.get('attributes')!;
       value = model.get('value') || attrs[name];
     }
 

src/trait_manager/view/TraitsView.ts

@@ -31,7 +31,8 @@ export default class TraitsView extends DomainViews {
     const { ppfx, className, em } = this;
     const comp = em.getSelected();
     this.el.className = `${className} ${ppfx}one-bg ${ppfx}two-color`;
-    this.collection = comp ? comp.get('traits') : [];
+    // @ts-ignore
+    this.collection = comp ? comp.traits : [];
     this.render();
   }
 }

src/utils/Droppable.ts

@@ -30,7 +30,7 @@ export default class Droppable {
   constructor(em: EditorModel, rootEl?: HTMLElement) {
     this.em = em;
     this.canvas = em.get('Canvas');
-    const el = rootEl || this.canvas.getFrames().map(frame => frame.getComponent().getEl());
+    const el = rootEl || this.canvas.getFrames().map(frame => frame.getComponent().getEl()!);
     const els = Array.isArray(el) ? el : [el];
     this.el = els[0];
     this.counter = 0;

src/utils/Resizer.ts

@@ -27,7 +27,7 @@ type CallbackOptions = {
   resizer: Resizer;
 };
 
-interface ResizerOptions {
+export interface ResizerOptions {
   /**
    * Function which returns custom X and Y coordinates of the mouse.
    */