如何与JavaScript一起使用TypeScript声明文件 [英] How to use TypeScript declaration files alongside JavaScript

问题描述

我想将我的JavaScript函数文档分成TypeScript .d.ts文件.

例如:

  components/按钮/Button.jsx#JavaScript组件Button.d.ts#具有prop类型的TypeScript文档 

类似地，Material UI如何做到这一点.

---

如何设置我的项目(可能是tsconfig.json文件)以接受使用相应的.d.ts文件?

我当前的tsconfig.json配置:

  {"compilerOptions":{声明":是，"rootDir":"./src"，"allowJs":是的，"allowSyntheticDefaultImports":是的，"isolatedModules":是的，"noEmit":是的，"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 文件中使用它，例如，如果 components 在 src <下，则在 ./src/usage.ts /code>:

 从'./components/Button/Button'导入Button；const b1 = Button({文字:"123"，onClick:()=>{console.log('这里');}，});const b2 = Button({text:123，//失败-不是字符串.onClick:()=>{console.log('这里');}，}); 

如果您希望将其用作图书馆

在您的 package.json 中，您需要添加

  {...，"typings":"index.d.ts"，...，} 

，然后在 index.d.ts

 ///< amd-module name ="package-name"/>从'./other-files-with-declarations'中导出*； 

I want to separate my JavaScript function documentation into TypeScript .d.ts files.

For example:

components/
  Button/
    Button.jsx   # JavaScript component
    Button.d.ts  # TypeScript documentation with prop types

Similarly how Material UI does this. https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button

My issue is that TypeScript & VSCode does not recognize the .d.ts file for the current JavaScript file.

In my setup, I have the following Button.d.ts file:

interface Props {
  text: string
  onClick: () => void
}

declare const Button: (props: Props) => Element

export default Button

and the following Button.jsx file:

import React from 'react'

const Button = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>
}

export default Button

But VSCode is not recognising the prop types in the component:

---

How can I set up my project (maybe tsconfig.json file) to accept the use of corresponding .d.ts file?

My current tsconfig.json config:

{
  "compilerOptions": {
    "declaration": true,
    "rootDir": "./src",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "noEmit": true,
    "maxNodeModuleJsDepth": 2
  },
  "include": ["src/**/*"]
}

解决方案

if you want to use it in your local project

in tsconfig.json remove "src/**/*" add "src/**/*.d.ts" instead, then js files won't be parsed as any type and their definition will be included:

{
  ...,
  "include": ["src/**/*.d.ts"],
  ...,
}

put .jsx and .d.ts in the same dir under the same name as Button.jsx and Button.d.ts for example.

Use it in any .ts file, for example ./src/usage.ts if components are under src too:

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');
    },
});

If you want to serve it as a library

In your package.json you need to add

{
  ...,
  "typings": "index.d.ts",
  ...,
}

and then in index.d.ts

/// <amd-module name="package-name" />
export * from './other-files-with-declarations';

这篇关于如何与JavaScript一起使用TypeScript声明文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！