Is there any way add extra type for external npm packages in react type script?

Question

I have imported react-microsoft-login package from npm and added one button in property children. But I got a typescript error " property 'children' does not exist on type 'intrinsicattributes & microsoftloginprops'"

<MicrosoftLogin
                                        clientId={office_clientId}
                                        graphScopes={graphScopes}
                                        prompt={'select_account'}
                                        useLocalStorageCache={true}
                                        authCallback={authHandler}
                                        buttonTheme={'dark'}
                                        children={
                                             <Tooltip title={'One Drive'}>
                                                 <IconButton
                                                    onClick={(e:any) => {
                                                        folderClicked = true;
                                                    }}
                                                    color='inherit'
                                                 >
                                                <Office style={{ height: '20px', width: '20px' }} />
                                            </IconButton>
                                         </Tooltip>
                                    }
                                />

In order to solve this I have added extra type for children(children:any) in node module react-microsoft-login types file. It's resolved that issue.

But is there any way to add extra type for external packages from current working folder/file?

Answer 1

You can use Declaration Merging . TS will merge all declaration for the same type, so you don't need to add your new field in node_modules, you can create your own ts file and declare a type with the same name and just add your new field there.

Note: that if the type is defined inside a namespace you need to use the same namespace name.