如何与JavaScript一起使用TypeScript声明文件
酸性9
我想将我的JavaScript函数文档分成TypeScript .d.ts文件。
例如：
components/
Button/
Button.jsx # JavaScript component
Button.d.ts # TypeScript documentation with prop types
同样，Material UI如何做到这一点。https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button
我的问题是TypeScript和VSCode无法识别.d.ts当前JavaScript文件的文件。
在我的设置中，我有以下Button.d.ts文件：
interface Props {
text: string
onClick: () => void
}
declare const Button: (props: Props) => Element
export default Button
和以下Button.jsx文件：
import React from 'react'
const Button = ({ text, onClick }) => {
return <button onClick={onClick}>{text}</button>
}
export default Button
但是VSCode无法识别组件中的prop类型：
如何设置我的项目（可能是tsconfig.json文件）以接受使用相应的.d.ts文件？
我当前的tsconfig.json配置：
{
"compilerOptions": {
"declaration": true,
"rootDir": "./src",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
"noEmit": true,
"maxNodeModuleJsDepth": 2
},
"include": ["src/**/*"]
}
萨坦时间
如果您想在本地项目中使用它
在tsconfig.jsonremove "src/**/*"add中"src/**/*.d.ts"，js文件将不被解析为any类型，并且其定义将包括在内：
{
...,
"include": ["src/**/*.d.ts"],
...,
}
例如，将.jsx和.d.ts放在同一个目录下，名称与Button.jsx和相同Button.d.ts。
在任何.ts文件中使用它，例如，./src/usage.ts如果components在以下文件中src：
import Button from './components/Button/Button';
const b1 = Button({
text: '123',
onClick: () => {
console.log('here');
},
});
const b2 = Button({
text: 123, // fails - it's not a string.
onClick: () => {
console.log('here');
},
});
如果您想将其用作图书馆
在你package.json需要添加
{
...,
"typings": "index.d.ts",
...,
}
然后在 index.d.ts
/// <amd-module name="package-name" />
export * from './other-files-with-declarations';
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将JavaScript类Mixins与TypeScript声明文件一起使用
- 2
如何在Mocha测试中使用TypeScript声明文件？
- 3
如何使用 TypeScript 声明文件中定义的类？
- 4
如何在 Angular 中使用自定义 Typescript 声明文件 (.d.ts)？
- 5
如何使用我自己的声明文件解决“找不到模块的声明文件”错误？
- 6
Typescript声明文件中的建模（长期使用）API
- 7
cURL如何与文件一起使用
- 8
如何声明与此功能一起使用的对象
- 9
TypeScript声明文件（函数构造函数）
- 10
问题：TypeScript找不到声明文件
- 11
TypeScript包创建声明文件
- 12
功能模块（TypeScript）的声明文件
- 13
TypeScript - 如何使用单个全局函数为第三方包编写声明文件？
- 14
与案例声明一起使用的订单
- 15
如何将requestAnimationFrame与TypeScript对象一起使用？
- 16
如何将Sinon与Typescript一起使用？
- 17
如何使Typescript与SystemJS和Angular一起使用？
- 18
如何将pouchdb与Typescript一起使用？
- 19
如何使data（）键函数与TypeScript一起使用？
- 20
如何在React中将PropTypes与Typescript一起使用
- 21
从javascript生成打字稿声明文件
- 22
将构造函数与多个文件一起使用Javascript
- 23
JavaScript文件无法与servlet一起正常使用
- 24
更新如何与从.deb文件安装的程序一起使用
- 25
更新如何与从.deb文件安装的程序一起使用
- 26
如何将电子文件从“需要”转换为“导入”以与 TypeScript 一起使用？角2+
- 27
iMacros：如何将提示与javascript一起使用
- 28
return如何与JavaScript中的多个变量一起使用？
- 29
如何使HTML命令框与JavaScript一起使用？
我来说两句