[英]How to use/import TypeScript declaration files in JavaScript?
[英]How to use TypeScript declaration files alongside JavaScript
我想将我的 JavaScript function 文档分成 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
文件的 .d.ts 文件。
在我的设置中,我有以下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.json
中删除"src/**/*"
添加"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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.