我正在关注 TypeScript JSX guide在副项目中设置和使用 JSX sans React。
有一件事让我非常恼火:我找不到任何关于如何将 JSX 工厂函数全局公开给整个项目的提及。此外(虽然不那么重要),我的 JSX.IntrinsicElements
结构也没有全局公开。
这是我的 tsconfig:
{
"compileOnSave": true,
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"es2015"
],
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "generateElement",
"sourceMap": true,
"noImplicitAny": true,
"pretty": true,
"importHelpers": true,
"outDir": "dist"
},
"include": ["./src/**/*.ts", "./src/**/*.tsx"]
}
我在其中声明 generateElement
的文件:
export function generateElement(tag: string, attrs: string[]) {
return document.createElement(tag)
}
declare namespace JSX {
interface IntrinsicElements {
image: any
}
}
我在其中声明我的 image
元素的文件:
export function image(prop: {src: string}) {
return (
<img />
)
}
以及项目的主要入口点,我尝试在其中导入我的元素:
import {image} from "./image";
image({src: "google.com"})
错误:
src/image.tsx:13:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
13 <img />
~~~~~~~
src/image.tsx:13:10 - error TS2304: Cannot find name 'generateElement'.
13 <img />
~~~~~~~
最佳答案
如果你想让这个函数成为全局函数,不要使用export
关键字,这将使当前文件成为一个模块,因此需要显式导入函数。同样,JSX
命名空间需要是全局的,所以如果在模块中定义,需要在全局命名空间中显式声明:
declare global {
namespace JSX {
interface IntrinsicElements {
image: any
}
}
}
如果你想走全局路线,这会奏效:
// jsxinfrastructure.ts
function generateElement(tag: string, attrs: string[]) {
return document.createElement(tag)
}
declare namespace JSX {
interface IntrinsicElements {
image: any
}
}
// usage.ts
export function image(prop: {src: string}) {
return (
<image />
)
}
如果您希望 jsx 工厂函数位于模块中,则需要导入该函数:
// jsxinfrastructure.ts
export function generateElement(tag: string, attrs: string[]) {
return document.createElement(tag)
}
declare global {
namespace JSX {
interface IntrinsicElements {
image: any
}
}
}
// usage.ts
import { generateElement } from './jsxinfrastructure'
export function image(prop: {src: string}) {
return (
<image />
)
}
基本思想是工厂函数需要在您使用 JSX 标签的上下文中可用(如果您可以调用 generateElement
jsx 也可以)。
关于typescript - 如何使 JSX 工厂函数成为 typescript 项目的全局函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50806690/