Develop Reference

Connects a collection viewer firebase

I want to create a table with table material i was watching a tutorial about connecting material table to firebase but i got a error that i didn't understand
The error message upon connect:
Property 'connect' in type 'chauffeurDataSource' is not assignable to the same property in base type 'DataSource<any>'.
Type '() => void' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<any[] | readonly any[]>'.
Type 'void' is not assignable to type 'Observable<any[] | readonly any[]>'.
This is my code, in landing.componnet.ts:
import { Component, OnInit } from "#angular/core";
import { CollectionViewer, DataSource } from '#angular/cdk/collections'
import {AngularFirestore} from "#angular/fire/firestore";
import {chauffeurs} from '../../shared/models/chauffeur'
import { chauffeurService } from "src/app/shared/service/ChaufffeurService";
import { Observable } from "rxjs-compat";
#Component({
selector: "app-landing",
templateUrl: "./landing.component.html",
})
export class LandingComponent implements OnInit {
displayedColumns = ['nometprenom', 'Active', 'Nombre de lot', 'Montant total du lot', 'Nombre de colies livrée','Sommes livrées','Sommes livrée','Somme dues'];
dataSource =new chauffeurDataSource(this.chauffeur.getchauffeur())
constructor(private chauffeur:chauffeurService) {}
ngOnInit(): void {}
}
export class chauffeurDataSource extends DataSource<any> {
connect() {
return this.chauffeur.getchauffeur();
}
disconnect(collectionViewer: CollectionViewer): void {
throw new Error("Method not implemented.");
}
constructor(private chauffeur: chauffeurService){
super()
}
}

Typescript: es6 import type definition (.d.ts) from node_modules subfolder

I have a npm package that has the following type definitions (simplified):
./node_modules/ag-grid-react/main.d.ts
export declare class AgGridReact extends Component<AgGridReactProps, {}> {}
./node_modules/ag-grid-react/lib/agGridReact.d.ts
export declare class AgGridReact extends Component<AgGridReactProps, {}> {
gridOptions: GridOptions;
api: GridApi | null;
columnApi: ColumnApi;
}
I am using the component in my react component like this:
import { AgGridReact } from 'ag-grid-react'
const HelpRequests= () => {
const grid = useRef<AgGridReact>(null)
if (grid.current) console.log(grid.current.columnApi)
return (<AgGridReact ref={grid}/>)
}
The Problem:
Typescript does complain that there is no columnApi. It seems it sadly picks the wrong type from the main.d.ts
I found that I can import the type from the agGridReact.d.ts directly and use it like this:
import {AgGridReact as AgGridReactType} from 'ag-grid-react/lib/agGridReact'
...
const grid = useRef<AgGridReactType>(null)
Question:
Is this the correct way to address this issue? Will typescript be smart enough not to import the ./node_modules/ag-grid-react/lib/agGridReact.ts file which could cause my bundle size to go up?
I've searched a lot but could not find anything about importing types only from node_modules subfolders.

I will try to answer this:
Let's assume there is an xyz library and it has these files:
xyz/lib/main.ts:
export const test = 1000
and
xyz/main.ts:
export * from './lib/main.ts'
export const test = 'foo bar'
And I would like to use xyz in my app.ts, and I am aware of only its main.ts file as I think it is the main file which exports everything from library. So I am most likely to do:
app.ts:
import { test } from './xyz/main'
console.debug(test) // it will print 'foo bar'
Now, somebody goes and comment this line in the library:
xyz/main.ts:
export * from './lib/main.ts'
// export const test = 'foo bar'
Now, what will be printed by my app.ts? It will print 1000.
The same thing is happening there with ag-grid-react. It (ag-grid-react/main.d.ts) is overriding the apparently correct (better) class declaration present in ag-grid-react/lib/agGridReact.d.ts. And it is perfectly fine to import from inner path.
main.d.ts:
export * from './lib/agGridReact'; // it is exporting from innner path too
export declare class AgGridColumn extends Component<AgGridColumnProps | AgGridColumnGroupProps, {}> { // and overriding here at the same time
}
agGridReact.d.ts:
export declare class AgGridReact extends Component<AgGridReactProps, {}> {
props: any;
state: any;
static propTypes: any;
gridOptions: GridOptions;
changeDetectionService: ChangeDetectionService;
api: GridApi | null;
columnApi: ColumnApi;
portals: ReactPortal[];
hasPendingPortalUpdate: boolean;
destroyed: boolean;
protected eGridDiv: HTMLElement;
private static MAX_COMPONENT_CREATION_TIME;
constructor(props: any, state: any);
render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
createStyleForDiv(): any;
componentDidMount(): void;
waitForInstance(reactComponent: ReactComponent, resolve: (value: any) => void, runningTime?: number): void;
mountReactPortal(portal: ReactPortal, reactComponent: ReactComponent, resolve: (value: any) => void): void;
batchUpdate(callback?: any): any;
destroyPortal(portal: ReactPortal): void;
private getStrategyTypeForProp;
shouldComponentUpdate(nextProps: any): boolean;
componentDidUpdate(prevProps: any): void;
processPropsChanges(prevProps: any, nextProps: any): void;
private extractDeclarativeColDefChanges;
private extractGridPropertyChanges;
componentWillUnmount(): void;
isDisableStaticMarkup(): boolean;
}
I can't exactly say why ag-grid did this. I found this looking at the typing files. I may be incorrect too.

TypeScript error with Symbol.species example from MDN

With this code (which is equivalent to a sample at MDN):
class MyArray<T> extends Array<T> {
static get [Symbol.species]() { return MyArray }
}
I get this error (with TypeScript 3.8.3):
Class static side 'typeof MyArray' incorrectly extends base class static side '{ isArray(arg: any): arg is any[]; readonly prototype: any[]; from<T>(arrayLike: ArrayLike<T>): T[]; from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[]; from<T>(iterable: Iterable<...> | ArrayLike<...>): T[]; from<T, U>(iterable: Iterable<...> | ArrayLike<...>, mapfn: (v: T, k: nu...'.
Types of property '[Symbol.species]' are incompatible.
Type 'typeof MyArray' is not assignable to type 'ArrayConstructor'.
Type 'typeof MyArray' provides no match for the signature '(arrayLength?: number | undefined): any[]'.
What could be wrong?

Getting error can not compile module unless --module flag is provided. so not able to create instance of this class in another ts file

export module FilterBar {
export class Filter {
objData: any;
distinctAreas: string[];
distinctRegions: string[];
distinctSubRegions: string[];
distinctAreasApplied: string[];
distinctRegionsApplied: string[];
distinctSubRegionsApplied: string[];
call = 0;
static selectedFilterData: any;
}
I want to create an object of this class in another typescript file. For that I am using export to module but I am getting the mentioned error.

Typescript definition file for javascript class throws runtime error

I am using Visual Studio 2015 IDE.
I have a file Messaging.d.ts. It defines a couple of classes written in javascript. The definition in the TS file is written as follows:
declare module 'Messaging' {
export default class DisplayMessageManager {
AddMainMessage(message: string, alertCssClass: string): void;
DontShowTipAgain(alertID: string): void;
CloseTip(alertID: string, showAlertTime: number): void;
TogglePanelDirty(panelID: string, isDirty: boolean, originalState: string): void;
}
}
declare module 'MessagingConstants' {
export default class Constants {
//Bootstrap Alert Classes
bsSuccess: string;
bsWarning: string;
bsDanger: string;
bsInfo: string;
bsDefault: string;
bsPrimary: string;
}
}
When I import this in my app.ts file (in the same folder) I use:
import DisplayMessageManager from 'Messaging';
import Constants from 'MessagingConstants';
and then:
messageManager: DisplayMessageManager = new DisplayMessageManager();
messageConstants: Constants = new Constants();
later I use:
this.messageManager.AddMainMessage('test', this.messageConstants.bsSuccess);
This all compiles correctly. However, when I run the code the error in the console tells me that it cannot find the file 'Messaging.js'. I did not think that a typescript definition file needed to compile into a javascript file. What am I doing wrong to get these external javascript classes to work?

Since you're using non-relative paths (i.e. "Messaging" instead of "./Messaging"), if you're using CommonJS, this means you should have a node_modules/Messaging/ and node_modules/MessagingConstants/.
I'm not sure if that's actually what you want. What you may've meant to do is create the following two declaration files to reflect the exact shape of your local .js files
Messaging.d.ts:
export default class DisplayMessageManager {
AddMainMessage(message: string, alertCssClass: string): void;
DontShowTipAgain(alertID: string): void;
CloseTip(alertID: string, showAlertTime: number): void;
TogglePanelDirty(panelID: string, isDirty: boolean, originalState: string): void;
}
MessagingConstants.d.ts:
export default class Constants {
//Bootstrap Alert Classes
bsSuccess: string;
bsWarning: string;
bsDanger: string;
bsInfo: string;
bsDefault: string;
bsPrimary: string;
}
And then include them like so:
import DisplayMessageManager from './Messaging';
import Constants from './MessagingConstants';