IT技术 - 如何与 JavaScript 一起使用 TypeScript 声明文件 - 吾爱随笔录

如何与 JavaScript 一起使用 TypeScript 声明文件

IT技术 javascript reactjs typescript declaration

2021-04-27 13:21:29

我想将我的 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/**/*"]
}

1个回答

如果你想在你的本地项目中使用它

在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';

其它你可能感兴趣的问题

上一篇填充粗糙-如何增强？下一篇当值相等时，React 钩子 useState setValue 仍然重新渲染一次