I am using #microsoft/mgt-react": "^2.1.0" and I see "fallbackDetails" in the documentation but no exammple how to use it.
I tried:
return (<td title={uName} >
<Person personQuery={email} showPresence={true} view={PersonViewType.oneline}
**fallbackDetails={fallback } //Here Tslint Error**
personCardInteraction={PersonCardInteraction.hover} />
</td>
);
The complin is:
fallbackDetails: IDynamicPerson; personCardInteraction: PersonCardInteraction.hover; }' is not assignable to type 'IntrinsicAttributes & PersonProps & { children?: ReactNode; }'.
Property 'fallbackDetails' does not exist on type 'IntrinsicAttributes & PersonProps & { children?: ReactNode; }'.ts(2322)
Can anyone provide an example that TypeScript will accept?
Or maybe there is a Types.d.ts that I need to get
Thanks in advance
I got a message from mgt.
the format should be:
fallbackDetails={{"displayName":"test displayName" , mail:"someone#contoso.com"}}
The complain was because I had the second prperty as email:"someone#contoso.com"
All is good now.
Thank you all
I'd recheck any other mgt-* packages to make sure they're upgraded as well, and the fallback object you are feeding it.
The most basic react sample would look like the following:
<Person
personQuery={'me'}
fallbackDetails={{"displayName":"test displayName"}}
line2clicked={() => console.log('line1 clicked')}
line1Property="displayName"
line2Property="mail"
view={PersonViewType.twolines}
/>
Related
I am trying to use the up-to-date method to get a value from a Select element via React but I seem to be getting all kinds of errors. I originally used string refs, but it seems like that is now considered legacy.
class Base extends React.Component<any, any> {
constructor(props){
super(props);
this.candInput = React.createRef();
this.state = {name: '', ns:'', svc: '', base:'', cand:[]};
}
handleAddCand = (e) => {
if(!this.state.cand.includes(this.candInput.current.value) &&
this.state.base !== (this.candInput.current.value)){
this.setState((prevState) => ({
cand: [...prevState.cand, this.candInput.current.value],
}));
}
}
And the returned components that use the ref is placed like:
<Select
id="ns-select"
labelText="Namespace"
helperText="..."
ref={this.candInput}
/>
<Button
onClick={this.handleAddCand}
>
Add
</Button>
For some reason I keep getting errors that claim that candInput doesn't exist? The compiler err msg is:
Property 'candInput' does not exist on type 'Base'.
And the error that ref is not a property available for this particular element. The element is a imported Carbon Component, but I can't tell if that's the core issue. The error message is:
Property 'ref' does not exist on type 'IntrinsicAttributes & SelectProps & { children?: ReactNode; }'.
My react version is 16.12 and the carbon component version is 7.10, so I definitely have updated modules. Any pointers or help would be greatly appreciated!
I'm trying webpack 2 code splitting.
According to this doc: https://webpack.js.org/guides/code-splitting-require/
the following code should include some.css into a new chunk named 'something'
require.ensure([], function(require) {
require('some.css');
}, 'something');
but when I run it, I get this error:
ERROR in ./src/index.ts
(4,9): error TS2339: Property 'ensure' does not exist on type 'NodeRequire'.
Any idea about how to fix it?
Thanks
The way I solved this was by creating my own interface - WebpackRequire - which extends NodeRequire with ensure1.
interface WebpackRequire extends NodeRequire {
ensure(
dependencies: string[],
callback: (require: WebpackRequire) => void,
errorCallback?: (error: Error) => void,
chunkName?: string
): void;
};
If you've only got a single instance of require.ensure, you can then type cast it to a WebpackRequire using (require as WebpackRequire).ensure, but since I used it multiple times in a module, I created local require at the top scope of the module, type cast as WebpackRequire, like this:
const require: WebpackRequire = (window as any).require;
1I got the types of ensure from the Webpack docs
I required a javascript document which then did the require. Not exactly the nicest solution, but it did work
I'm trying to create a method for Readable Stream, but after trying just a little bit, I ran out of ideas to how.
import * as stream from 'stream'
//yields Property 'asdasas' does not exists on type 'Readable'
stream.Readable.prototype.asdasas
//yields asdas does not exists on type 'typeof Readable'
stream.Readable.asdas
Can someone give me a solution and explain why the errors happened? Thanks
explain why the errors happened
The first rule of migrating from JavaScript to TypeScript:
Declare what you use.
https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html
Here Readable doesn't have the member you are looking for. If you want to add it, you need to declare it. Something like :
interface Readable {
asdfasdfasdf: any;
}
I managed to extend them. The behaviour wasn't as unusual as I thought (I still would appreciate an explanation on the difference of "type 'Readable'" and "type 'typeof Readable'". The code:
import * as stream from 'stream'
class mod_Readable extends stream.Readable {
pipe<T extends NodeJS.WritableStream>(destination: T, options?: { end?: boolean; }): T {
//whatever
return super.pipe(destination, options)
}
}
I’m trying to reference a d.ts file in typescript. I am not getting any warning along the lines of "Cannot find file". If i modify the path to point to a file I know not exists, I do. So I am fairly sure that my syntax is right. But I still get "Could not find symbol" error.
Here is the reference(file CLHistory.js)
/// <reference path="../../HistoryJS/HistoryJS.d.ts" />
Here is the HistoryJS.d.ts file
interface HistoryAdapter {
bind(element, event, callback);
trigger(element, event);
onDomLoad(callback);
}
interface HistoryJS {
enabled: boolean;
pushState(data, title, url);
replaceState(data, title, url);
getState();
getHash();
Adapter: HistoryAdapter;
back();
forward();
go(X);
log(...messages: any[]);
debug(...messages: any[]);
}
Im getting "error TS2095: Could not find symbol 'HistoryJS’." where I use HistorJS(CLHistory.ts)
Thanks in advance.
You need to do a manual assignment. See : https://github.com/borisyankov/DefinitelyTyped/blob/master/history/history-tests.ts#L7
Yeah, I have the unfortunate situation of having to go into a project that makes use of ext.net.
There is a GridPanel with several columns, a couple of these are bound to datetime properties like this:
<ext:DateColumn Header="Started time" DataIndex="DateStarted" Format="yyyy-MM-dd HH:mm:ss" />
Now, I ned to run an extension method, ToUniversalTime(), on the property DateStarted.
It seems I can not change DataIndex="DateStarted" to DataIndex="DateStarted.ToUniversalTime()"
Forgot about this one.
I got an answer from Vladimir Ext.NET - Dev Team, support for this is to be added in version 2.3.
You can use the Renderer tag on your column
<ext:DateColumn Header="Started time" DataIndex="DateStarted" Format="yyyy-MM-dd HH:mm:ss" >
<Renderer Fn="myRenderer" />
</ext:DateColumn >
Call a Direct Method or implement your extension method in JavaScript
var myRenderer = function (value, metadata, record, rowIndex, colIndex, store) {
return stuff here;
};