Typescript не улавливает реквизит неправильного типа
У меня есть компонент React из моего приложения Gatsby, который отображает еще один такой:
import Header from './components/Header.tsx';
<Header siteTitle = {"My site title"} />
И я хочу проверить, что siteTitle входит в виде строки. Я делаю это в ТС:
type Props = {
siteTitle: string;
}
export const Header = ({ siteTitle }: Props) => (
<h1>
{ siteTitle }
</h1>
);
Однако попытка рендеринга <Header siteTitle = {1} /> не перехватывается tsc, что скорее противоречит цели.
Это работает, как и ожидалось в этом примере Playground, поэтому я предполагаю, что это может быть проблема с моей конфигурацией.
Я проверил tsconfig.json несколько раз и не нашел там ничего подозрительного. Однако вот:
{
"compilerOptions": {
"target": "ES2017",
"module": "ESNext",
"jsx": "react",
"rootDir": "src",
"strict": true,
"noImplicitAny": false,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"exclude": ["node_modules", "build", "scripts"]
}
Спасибо за вашу помощь
@captain-yossarian Я отредактировал свой исходный пост, чтобы включить его :)
Попробуйте изменить modulreResolution на AMD или UMD, но не на node
@captain-yossarian, к сожалению, это не так. Изменение moduleResolution только испортит импорт Гэтсби и не поможет с этой props проблемой :(
вы не получаете ошибку lint? или вы не получаете ошибку сборки?
@arminyahya npx tsc не выдает никаких ошибок по поводу вышеизложенного, что, я считаю, должно быть :(
вы пробовали - Заголовок: React.FC<Props>
Можете ли вы воспроизвести проблему, не задействуя реакцию, а только машинопись? то есть создайте файл header.ts с type Props = { siteTitle: string; }; export const Header = ({ siteTitle }: Props) => ({ siteTitle }); и другой файл useHeader.ts с import {Header} from './header'; Header({siteTitle:1});. В моей среде ошибка отображается правильно.
Ответы 2
Попробуйте так.
type Props = {
siteTitle: string;
}
const Header: React.FC<Props> = ({ siteTitle }) => (
<h1>
{ siteTitle }
</h1>
);
export default Header;
Спасибо, Тодд. Я попробовал, как вы посоветовали, но tsc пока молчит про этот реквизит не того типа :(
Черт, хорошо, что-то не так с вашей конфигурацией. Это то, как вы должны это делать.
Благодаря наводкам от @DevLoverUmar и @OfirD я нашел решение своей проблемы. Я публикую это здесь на случай, если кто-то окажется так же озадачен, как и я, и у него нет вариантов.
В моем исходном посте я не упомянул, что именно Container.js отрендерил <Header />, export из Header.tsx.
После переименования в Container.tsx компилятор без проблем подбирает типы пропсов. Все приведенные выше решения были действительными — проблема была в другом.
Спасибо вам обоим за предложение создать новый проект TypeScript!
Хорошо, спасибо, но я не знаю, почему кто-то проголосовал за мой вопрос как отрицательный.
Пожалуйста, поделитесь своим tsconfig.json