I have a React-App initialized with 'create react-app my-app --template typescript' and i want to use code splitting for a big package. So i am using:
import('very-big-package').then(
coolStuff => {
...do some crazy stuff with 'coolStuff'
}
)
Now i want to pass the imported 'coolStuff' to another class constructor:
import('very-big-package').then(
coolStuff => {
return new OtherClass(coolStuff);
}
)
So how do i define the typings in the 'OtherClass' constructor without using a regular import like:
import coolStuff from 'very-big-package' //which will overrides the dynamic import
class OtherClass{
constructor(arg:typeof coolStuff){
...working with arg
}
}
Related
I have a Typescript file in a Svelte project and would like use jStat https://github.com/jstat/jstat like the following:
export namespace Statistics
{
export function cdfNormal (x:number, mean:number = 0, standard_deviation:number = 1)
{
return jStat.normal.cdf(x,mean,standard_deviation);
}
};
I installed it via npm install --save jstat
I tried
import _ from "jstat";
and
var { jStat } = require('jstat')
But both didn't work.
The package says:
Currently jStat is exposed as j$ and jStat inside an object, rather than exported directly. This may confuse some module loaders, however should be easily remedied with the correct configuration.
But just calling jStat doesn't work either. What am I doing wrong?
The package should be imported as:
import jStat from 'jstat';
All the functions (e.g. mean) will be on the this default export object. The import has to be in the file using it.
The package supplies no types and no third party types (#types/jstat) seem to exist. You can type the module manually to any degree you like. E.g. add a file jstat.d.ts like this:
declare module 'jstat' {
const jStat: {
mean: (arr: number[]) => number;
// ...
};
export default jStat;
}
Or just declare it any if you do not mind the lack of type safety.
I need to add a react custom control in a grid column. Can I do it without make a custom grid from scratch?
What I'm thinking about is something like this ReactPeoplePicker, but added to an existing grid.
Three weeks later I can answer myself: yes, I can. This is what I did:
Create a PCF with Powerapps CLI (I choose dataset template) and installs dependencies:
npm install
npm install react #types/react react-dom #types/react-dom #fluentui/react
Create a peoplepicker.tsx and copy-paste react component code from https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker.
In index.ts file I import react, react-dom and component:
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { picker } from './components/peoplepicker'
Define and initialize context and container variables:
export class PeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private context:ComponentFramework.Context<IInputs>;
private container:HTMLDivElement;
/**
* Empty constructor.
*/
constructor() { }
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement)
{
// Add control initialization code
this.context = context;
this.container = container;
Render the react component and append to container:
public updateView(context: ComponentFramework.Context<IInputs>): void
{
ReactDOM.render(
React.createElement(PeoplePicker),
this.container);
Build solution and import to Power Apps portal:
npm run build
pac pcf push --publisher-prefix myPrefix
Finally, in Power Apps Portal, navigate to grid (or subgrid) properties and add a custom control. Keep in mind may be classic mode will be required.
I'm using CRA with typescript (create-react-app myapp --typescript)
I have some typescript stuff in my App.tsx that I would like to store externally, and I've tried creating App.d.ts, index.d.ts, module.d.ts and none of it works.
Here's the interface I'm using:
declare interface IArgs {
home: string,
away: string
}
What do I need to do to be able to declare all my Typescript stuff in a file that my source files can share?
Put in external file eg. interfaces/interfaces.ts:
export interface IArgs {
home: string,
away: string
}
Then in App.tsx where you want to use it you import it by: import { IArgs } from 'interfaces/interfaces'; and use it for your needs.
I have an existing app and I'm trying to import a Typescript file, I use Yarn and React-scripts.
Module not found: Can't resolve './DiamondNodeModel'
import {DiamondNodeModel} from './DiamondNodeModel'
In DiamondNodeModel.ts
export class DiamondNodeModel extends NodeModel {
constructor() {
super("diamond");
this.addPort(new DiamondPortModel("top"));
this.addPort(new DiamondPortModel("left"));
this.addPort(new DiamondPortModel("bottom"));
this.addPort(new DiamondPortModel("right"));
}
}
I'm assuming I'm missing something that allows importing TypeScript files.. but I'm not sure where to set that with React-scripts..
EDIT
Changing the extension finds it, but it still can't compile
WEBPACK_IMPORTED_MODULE_3__DiamondNodeModel_ts.DiamondNodeModel is not a constructor
We managed to solve this problem by adding:
export { DiamondNodeModel }
at the end of the DiamondNodeModel.ts file.
I had a project which used youtube-api-search in it. it works there fine.
I have created a sharepoint framework template with yeoman "yo #microsoft/sharepoint" and installed youtube api package as I did in previous project. but when I run this project I encounter an error like below;
Cannot find module 'youtube-api-search'
as I said its working in other react project do i need something specially to make it work here ?
I installed api via "npm i youtube-api-search --save-dev" command
here main component content;
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Announcements.module.scss';
import { IAnnouncementsProps } from './IAnnouncementsProps';
//I have added only these 2 lines to default code
import YTSearch from 'youtube-api-search';
const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyv...";
export default class Announcements extends React.Component<IAnnouncementsProps, void> {
public render(): React.ReactElement<IAnnouncementsProps> {
return (
...
);
}
}
we can import modules in three methods
FIRST::Using Config-->config.json and change
"externals": {
"jquery": "https://code.jquery.com/jquery-3.1.0.min.js",
"OwlCarousel":{
"path":"./node_modules/react-owl-carousel/lib/OwlCarousel.min.js",
"globalName":"OwlCarousel"
},
"Slider":{"path":"./node_modules/react-slick/lib/slider.js",
"globalName":"Sliders"}
},
SECOND:: npm install #types/youtube-api-search --save
THIRD ::
`npm install typings`
`typings install dt~youtube-api-search -global --save`
sometimes dt~ is neccessary sometimes it is not necessaary