reactjs


TypeScript custom declaration files for untyped npm modules


I am consuming a React component called shiitake from npm into my project where I use TypeScript. That library does not have TypeScript declarations so I thought I would write one. The declaration file looks like below (it may not be complete but don't worry about it too much):
import * as React from 'react';
declare module 'shiitake' {
export interface ShiitakeProps {
lines: number;
}
export default class Shiitake extends React.Component<ShiitakeProps, any> {
}
}
I have put this inside ./typings/shiitake.d.ts file and on VS Code, I am seeing the below error:
[ts] Invalid module name in augmentation. Module 'shiitake' resolves to an untyped module at 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js', which cannot be augmented.
On the consumption side, I am still getting the same error even if with the above declaration (since I have noImplicitAny compiler switch turned on):
/// <reference path="../../../../typings/shiitake.d.ts" />
import * as React from 'react';
import Shiitake from 'shiitake';
[ts] Could not find a declaration file for module 'shiitake'. 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' implicitly has an 'any' type.
The standard why of acquiring declaration files for this type of modules is through #types/ way and it works well. However, I cannot get the custom typings work. Any thoughts?
the declaration declare module 'shiitake'; should be in a global scope. i.e. a top level declaration in a non module (where a module is a file with at least one top level import or export).
A declaration of the form declare module '...' { } in a module is an augmentation, see https://github.com/Microsoft/TypeScript-Handbook/blob/fa9e2be1024014fe923d44b1b69d315e8347e444/pages/Declaration%20Merging.md#module-augmentation for more details.
So you want this file to look like:
declare module 'shiitake' {
import * as React from 'react';
export interface ShiitakeProps {
lines: number;
}
export default class Shiitake extends React.Component<ShiitakeProps, any> {
}
}

Related Links

html tags does not work inside jsx made tags
How to use gulp with browserify for React project
Material-ui React components not working
React Router no input file specified
Why React event handler is not called on dispatchEvent?
InputText bottom border disappears automatically all of sudden
What is the recommended threshold for duplication in redux/react apps in code climate?
How to pass object to hashHistory.push() in react
Karma chrome launcher starts, but crashes immediately
React router get current route outside component
How should I write my action creator to pass value from my component?
How to pass AJAX data to child through props
ReactJS + Redux + Reduc-thunk Can't dispatch promise
How to get react-router and react-redux to play nicely?
How does a container component update its child component through react redux?
Connecting actions and states to props in React Container

Categories

HOME
oauth-2.0
gulp
indexing
botframework
cxf
android-ndk
conceptual
boxplot
django-middleware
assign
aggregate-functions
osx-yosemite
osrm
guidewire
cakephp-2.0
web-worker
passbook
fibonacci
concatenation
arp
directions
sdl-2
gstreamer-1.0
extern
stdin
file-conversion
office-interop
aura-framework
aspnetboilerplate
paperclip
inner-join
ocpjp
ack
ocamlbuild
spring-data-commons
hierarchical-clustering
perldoc
acceleo
cardview
qudpsocket
mac-app-store
visual-web-developer
x12
networkstream
android-xmlpullparser
queuing
jsoncpp
firewire
wingdb
attiny
nsq
crystal-reports-7
unityvs
redmine-plugins
twitter-finagle
object-oriented-database
html5-filesystem
cab
infinity.js
uikit-dynamics
wordbreaker
nsautoreleasepool
ntdll
linear-interpolation
xcode4.6.3
systrace
towerjs
umfpack
peoplepicker
gmagick
method-call
cpack
code-golf
newspeak
rpxnow
retrospectiva
high-load

Resources

Encrypt Message