유형 스크립트 - React 구성 요소의 "이름 찾을 수 없음" 오류

유형 스크립트 - React 구성 요소의 "이름 찾을 수 없음" 오류

기존 리액트 코드를 TypeScript로 이행하고 있는데, 그 중 하나가 이름을 찾을 수 없는 오류입니다..js파일.ts파일을 표시합니다.

문제의 코드는 다음과 같습니다.

import React from 'react';

const Footer = ({ children, inModal }) => (
    <footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

에서 5행<footer>로.</footer>는 빨간색으로 밑줄이 그어져 있으며 마우스를 어디에 두느냐에 따라 다음과 같은 다양한 오류가 나타납니다.

• 'footer' 이름을 찾을 수 없습니다.
• '>'가 필요합니다.
• 이름 'div'를 찾을 수 없습니다.
• 종료되지 않은 정규 표현식 리터럴
• 연산자 '<'는 'boolan' 및 'RegExp' 유형에 적용할 수 없습니다.

여기 제 것이 있습니다.tsconfig.json파일:

{
    "compilerOptions": {
        "outDir": "./dist/", // path to output directory
        "sourceMap": true, // allow sourcemap support
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es6",
            "dom"
        ],
        "types": [
            "node"
        ]
    },
    "include": [
        "./src/"
    ]
}

매우 혼란스러우니 도와주시면 감사하겠습니다!

Typescript가 Typescript 파일에서 JSX를 볼 것으로 예상되지 않습니다.이 문제를 해결하는 가장 쉬운 방법은 파일 이름을.ts로..tsx.

타이프스크립트 문서의 JSX

저도 같은 문제에 봉착했습니다.이것은, 다음의 내선 번호에 의한 것일 가능성이 있습니다..ts파일에서 JSX 코드를 허용하지 않습니다.대신,.tsx내선 번호

확장자가 없는 파일에서 이 오류가 발생했습니다.그것은 단순했다.filename따라서 VSCode는 TS로 가정합니다.파일 이름을 로 변경했을 때filename.js오류가 사라졌습니다.

다만, 파일을 타이프 스크립트로 해, 에러를 표시하지 않는 경우는, 승낙한 회답(filename.tsx)가 올바른 접근법입니다.

혹시나 다른 사람들이 이걸 보게 될까봐.리액트 형식의 tsx 파일을 사용하는 StencilJs를 리액트 없이 사용하고 있습니다.문제는 SRC 디렉토리를 vscode에 로드하는 것이었습니다.수정은 적절한 config.ts, tsconfig.json 등을 가진 SRC 디렉토리의 부모를 로드하는 것입니다.이를 통해 tsx 파일을 올바르게 인식할 수 있습니다.

언급URL : https://stackoverflow.com/questions/51158080/typescript-cannot-find-name-errors-in-react-components