如何通过示例找出 TypeScript 的 JavaScript 库的类型？
How to figure out the types of JavaScript libraries for TypeScript with example?
我尝试将以下代码移植到 TypeScript：
import { styled } from '@mui/material/styles';
export const Logo = styled((props) => {
const { variant, ...other } = props;
我收到错误：
TS2339: Property 'variant' does not exist on type '{}'.
我先查看样式化函数以尝试找出类型，发现它采用的是 Component 泛型。
在 WebStorm 中，转到 styled() 函数的声明将我带到这里，这看起来很奇怪，因为我在这里没有看到该函数名称...
<C extends React.JSXElementConstructor<React.ComponentProps<C>>>(
component: C,
options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
从导入中转到关于样式的声明将我带到这里：
declare const styled: CreateMUIStyled<Theme>;
我尝试将我的代码修改为
import {CreateMUIStyled, styled, Theme} from '@mui/material/styles';
import PropTypes from 'prop-types';
export const Logo = styled((props: CreateMUIStyled<Theme>) => {
const { variant, ...other } = props;
导致错误：
TS2339: Property 'variant' does not exist on type 'CreateMUIStyled '
如何根据具体情况自行调试？。部分原因可能是我艰难地克服并习惯了每个错误。
那么在这个具体问题上，道具的类型是什么，所以有一个变种可以中断？
完整的 JavaScript 文件（不确定底部的 Logo.defaultProps 是否有帮助，因为它也不会编译）->
import {styled} from '@mui/material/styles';
import PropTypes from 'prop-types';
export const Logo = styled((props) => {
const { variant, ...other } = props;
const color = variant === 'light' ? '#C1C4D6' : '#5048E5';
return (
<svg
width="42"
height="42"
viewBox="0 0 42 42"
xmlns="http://www.w3.org/2000/svg"
{...other}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6744 4.50247L31.9038 9.66459C32.117 9.78381 32.2944 9.95738 32.4178 10.1674C32.5413 10.3775 32.6064 10.6164 32.6064 10.8597C32.6064 11.1031 32.5413 11.342 32.4178 11.5521C32.2944 11.7621 32.117 11.9357 31.9038 12.0549L22.6745 17.2172C22.0854 17.5467 21.4212 17.7198 20.7456 17.7198C20.0698 17.7198 19.4056 17.5467 18.8166 17.2172L9.5873 12.0549C9.37415 11.9357 9.1967 11.7621 9.0732 11.5521C8.94971 11.342 8.8846 11.1031 8.8846 10.8597C8.8846 10.6164 8.94971 10.3775 9.0732 10.1674C9.1967 9.95738 9.37415 9.78381 9.5873 9.66459L18.8166 4.50247C19.4056 4.17301 20.0698 4 20.7456 4C21.4212 4 22.0854 4.17301 22.6744 4.50247Z"
fill={color}
/>
<path
opacity="0.7"
d="M22.6244 9.34853L35.8422 16.7415C36.0554 16.8607 36.2328 17.0343 36.3563 17.2443C36.4798 17.4544 36.5449 17.6933 36.5449 17.9366C36.5449 18.18 36.4798 18.419 36.3563 18.629C36.2328 18.8391 36.0554 19.0126 35.8422 19.1319L22.6244 26.5248C22.0355 26.8541 21.3712 27.0272 20.6956 27.0272C20.0199 27.0272 19.3557 26.8541 18.7667 26.5248L5.54893 19.1319C5.33578 19.0126 5.15833 18.8391 5.03483 18.629C4.91133 18.419 4.84623 18.18 4.84623 17.9366C4.84623 17.6933 4.91133 17.4544 5.03483 17.2443C5.15833 17.0343 5.33578 16.8607 5.54893 16.7415L18.7667 9.34853C19.3557 9.01916 20.0199 8.84615 20.6956 8.84615C21.3712 8.84615 22.0355 9.01916 22.6244 9.34853Z"
fill={color}
/>
<path
opacity="0.4"
d="M22.9257 14.1939L41.2984 24.4703C41.5113 24.5894 41.6884 24.7626 41.8117 24.9724C41.935 25.182 42 25.4206 42 25.6636C42 25.9065 41.935 26.1451 41.8117 26.3548C41.6884 26.5645 41.5113 26.7378 41.2984 26.8568L22.9257 37.1329C22.3377 37.4618 21.6745 37.6346 21 37.6346C20.3254 37.6346 19.6623 37.4618 19.0743 37.1329L0.701542 26.8568C0.488743 26.7378 0.311581 26.5645 0.188286 26.3548C0.0649948 26.1451 0 25.9065 0 25.6636C0 25.4206 0.0649948 25.182 0.188286 24.9724C0.311581 24.7626 0.488743 24.5894 0.701542 24.4703L19.0743 14.1939C19.6623 13.8651 20.3254 13.6923 21 13.6923C21.6745 13.6923 22.3377 13.8651 22.9257 14.1939Z"
fill={color}
/>
</svg>
);
})``;
Logo.defaultProps = {
variant: 'primary'
};
Logo.propTypes = {
variant: PropTypes.oneOf(['light', 'primary'])
};
我的全部 package.json 在这里：
{
"name": "reactpatterns-react",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=16.14.0 <= 16.14.0",
"npm": ">=8.3.1 <= 8.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "1.19.4",
"@emotion/cache": "11.7.1",
"@emotion/react": "11.7.1",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.6.0",
"@fullcalendar/common": "5.10.1",
"@fullcalendar/core": "5.10.1",
"@fullcalendar/daygrid": "5.10.1",
"@fullcalendar/interaction": "5.10.1",
"@fullcalendar/list": "5.10.1",
"@fullcalendar/react": "5.10.1",
"@fullcalendar/timegrid": "5.10.1",
"@fullcalendar/timeline": "5.10.1",
"@mui/icons-material": "5.3.1",
"@mui/lab": "5.0.0-alpha.67",
"@mui/material": "5.4.0",
"@mui/system": "5.4.0",
"@react-pdf/renderer": "2.1.1",
"@reduxjs/toolkit": "1.7.1",
"apexcharts": "3.33.0",
"aws-amplify": "4.3.14",
"date-fns": "2.28.0",
"draft-js": "0.11.7",
"firebase": "9.6.6",
"formik": "2.2.9",
"gray-matter": "4.0.3",
"i18next": "21.6.10",
"iconv-lite": "0.6.3",
"lodash.debounce": "4.0.8",
"next": "12.0.10",
"nprogress": "0.2.0",
"numeral": "2.0.6",
"prop-types": "15.8.1",
"react-apexcharts": "1.3.9",
"react-beautiful-dnd": "13.1.0",
"react-draft-wysiwyg": "1.14.7",
"react-dropzone": "11.2.4",
"react-hot-toast": "2.2.0",
"react-i18next": "11.15.3",
"react-markdown": "8.0.0",
"react-quill": "2.0.0-beta.4",
"react-redux": "7.2.6",
"react-syntax-highlighter": "15.4.5",
"redux": "4.1.2",
"redux-devtools-extension": "2.13.9",
"redux-thunk": "2.4.1",
"simplebar": "5.3.6",
"simplebar-react": "2.3.6",
"stylis": "4.0.13",
"stylis-plugin-rtl": "2.1.1",
"yup": "0.32.11",
"@emotion/react": "11.8.1",
"@emotion/styled": "11.8.1",
"@mui/material": "5.4.4",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.3",
"@testing-library/user-event": "13.5.0",
"@types/jest": "27.4.0",
"@types/node": "16.11.25",
"@types/react": "17.0.39",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "6.2.1",
"react-scripts": "5.0.0",
"ts-generic-collections-linq": "1.0.7",
"typescript": "4.5.5",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build:old": "react-scripts build",
"build:prod": "BUILD_PATH='../reactpatterns/src/dist/react' dotenv -e .env.production react-scripts build",
"build:dev": "BUILD_PATH='../reactpatterns/src/dist/react' dotenv -e .env.development react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "webpack --watch --progress"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@svgr/webpack": "6.2.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"next-transpile-modules": "9.0.0",
"@babel/core": "7.17.5",
"@babel/preset-env": "7.16.11",
"@babel/preset-react": "7.16.7",
"@types/react-dom": "17.0.11",
"babel-loader": "8.2.3",
"css-loader": "6.6.0",
"dotenv-cli": "5.0.0",
"html-webpack-plugin": "5.5.0",
"ts-loader": "9.2.6",
"typescript": "4.5.5",
"webpack": "5.69.1",
"webpack-cli": "4.9.2",
"webpack-dev-server": "4.7.4"
}
}
我看了docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here。这就是您收到错误的原因。
所以您只需要像这样提供道具的类型：
export const Logo = styled((props: PropTypeOfYourFunctionalComponent) => {
// code of your functional component
});
其中 PropTypeOfYourFunctionalComponent 是功能组件的 React 道具的类型。
我尝试将以下代码移植到 TypeScript：
import { styled } from '@mui/material/styles';
export const Logo = styled((props) => {
const { variant, ...other } = props;
我收到错误：
TS2339: Property 'variant' does not exist on type '{}'.
我先查看样式化函数以尝试找出类型，发现它采用的是 Component 泛型。
在 WebStorm 中，转到 styled() 函数的声明将我带到这里，这看起来很奇怪，因为我在这里没有看到该函数名称...
<C extends React.JSXElementConstructor<React.ComponentProps<C>>>(
component: C,
options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
从导入中转到关于样式的声明将我带到这里：
declare const styled: CreateMUIStyled<Theme>;
我尝试将我的代码修改为
import {CreateMUIStyled, styled, Theme} from '@mui/material/styles';
import PropTypes from 'prop-types';
export const Logo = styled((props: CreateMUIStyled<Theme>) => {
const { variant, ...other } = props;
导致错误：
TS2339: Property 'variant' does not exist on type 'CreateMUIStyled '
如何根据具体情况自行调试？。部分原因可能是我艰难地克服并习惯了每个错误。
那么在这个具体问题上，道具的类型是什么，所以有一个变种可以中断？
完整的 JavaScript 文件（不确定底部的 Logo.defaultProps 是否有帮助，因为它也不会编译）->
import {styled} from '@mui/material/styles';
import PropTypes from 'prop-types';
export const Logo = styled((props) => {
const { variant, ...other } = props;
const color = variant === 'light' ? '#C1C4D6' : '#5048E5';
return (
<svg
width="42"
height="42"
viewBox="0 0 42 42"
xmlns="http://www.w3.org/2000/svg"
{...other}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6744 4.50247L31.9038 9.66459C32.117 9.78381 32.2944 9.95738 32.4178 10.1674C32.5413 10.3775 32.6064 10.6164 32.6064 10.8597C32.6064 11.1031 32.5413 11.342 32.4178 11.5521C32.2944 11.7621 32.117 11.9357 31.9038 12.0549L22.6745 17.2172C22.0854 17.5467 21.4212 17.7198 20.7456 17.7198C20.0698 17.7198 19.4056 17.5467 18.8166 17.2172L9.5873 12.0549C9.37415 11.9357 9.1967 11.7621 9.0732 11.5521C8.94971 11.342 8.8846 11.1031 8.8846 10.8597C8.8846 10.6164 8.94971 10.3775 9.0732 10.1674C9.1967 9.95738 9.37415 9.78381 9.5873 9.66459L18.8166 4.50247C19.4056 4.17301 20.0698 4 20.7456 4C21.4212 4 22.0854 4.17301 22.6744 4.50247Z"
fill={color}
/>
<path
opacity="0.7"
d="M22.6244 9.34853L35.8422 16.7415C36.0554 16.8607 36.2328 17.0343 36.3563 17.2443C36.4798 17.4544 36.5449 17.6933 36.5449 17.9366C36.5449 18.18 36.4798 18.419 36.3563 18.629C36.2328 18.8391 36.0554 19.0126 35.8422 19.1319L22.6244 26.5248C22.0355 26.8541 21.3712 27.0272 20.6956 27.0272C20.0199 27.0272 19.3557 26.8541 18.7667 26.5248L5.54893 19.1319C5.33578 19.0126 5.15833 18.8391 5.03483 18.629C4.91133 18.419 4.84623 18.18 4.84623 17.9366C4.84623 17.6933 4.91133 17.4544 5.03483 17.2443C5.15833 17.0343 5.33578 16.8607 5.54893 16.7415L18.7667 9.34853C19.3557 9.01916 20.0199 8.84615 20.6956 8.84615C21.3712 8.84615 22.0355 9.01916 22.6244 9.34853Z"
fill={color}
/>
<path
opacity="0.4"
d="M22.9257 14.1939L41.2984 24.4703C41.5113 24.5894 41.6884 24.7626 41.8117 24.9724C41.935 25.182 42 25.4206 42 25.6636C42 25.9065 41.935 26.1451 41.8117 26.3548C41.6884 26.5645 41.5113 26.7378 41.2984 26.8568L22.9257 37.1329C22.3377 37.4618 21.6745 37.6346 21 37.6346C20.3254 37.6346 19.6623 37.4618 19.0743 37.1329L0.701542 26.8568C0.488743 26.7378 0.311581 26.5645 0.188286 26.3548C0.0649948 26.1451 0 25.9065 0 25.6636C0 25.4206 0.0649948 25.182 0.188286 24.9724C0.311581 24.7626 0.488743 24.5894 0.701542 24.4703L19.0743 14.1939C19.6623 13.8651 20.3254 13.6923 21 13.6923C21.6745 13.6923 22.3377 13.8651 22.9257 14.1939Z"
fill={color}
/>
</svg>
);
})``;
Logo.defaultProps = {
variant: 'primary'
};
Logo.propTypes = {
variant: PropTypes.oneOf(['light', 'primary'])
};
我的全部 package.json 在这里：
{
"name": "reactpatterns-react",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=16.14.0 <= 16.14.0",
"npm": ">=8.3.1 <= 8.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "1.19.4",
"@emotion/cache": "11.7.1",
"@emotion/react": "11.7.1",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.6.0",
"@fullcalendar/common": "5.10.1",
"@fullcalendar/core": "5.10.1",
"@fullcalendar/daygrid": "5.10.1",
"@fullcalendar/interaction": "5.10.1",
"@fullcalendar/list": "5.10.1",
"@fullcalendar/react": "5.10.1",
"@fullcalendar/timegrid": "5.10.1",
"@fullcalendar/timeline": "5.10.1",
"@mui/icons-material": "5.3.1",
"@mui/lab": "5.0.0-alpha.67",
"@mui/material": "5.4.0",
"@mui/system": "5.4.0",
"@react-pdf/renderer": "2.1.1",
"@reduxjs/toolkit": "1.7.1",
"apexcharts": "3.33.0",
"aws-amplify": "4.3.14",
"date-fns": "2.28.0",
"draft-js": "0.11.7",
"firebase": "9.6.6",
"formik": "2.2.9",
"gray-matter": "4.0.3",
"i18next": "21.6.10",
"iconv-lite": "0.6.3",
"lodash.debounce": "4.0.8",
"next": "12.0.10",
"nprogress": "0.2.0",
"numeral": "2.0.6",
"prop-types": "15.8.1",
"react-apexcharts": "1.3.9",
"react-beautiful-dnd": "13.1.0",
"react-draft-wysiwyg": "1.14.7",
"react-dropzone": "11.2.4",
"react-hot-toast": "2.2.0",
"react-i18next": "11.15.3",
"react-markdown": "8.0.0",
"react-quill": "2.0.0-beta.4",
"react-redux": "7.2.6",
"react-syntax-highlighter": "15.4.5",
"redux": "4.1.2",
"redux-devtools-extension": "2.13.9",
"redux-thunk": "2.4.1",
"simplebar": "5.3.6",
"simplebar-react": "2.3.6",
"stylis": "4.0.13",
"stylis-plugin-rtl": "2.1.1",
"yup": "0.32.11",
"@emotion/react": "11.8.1",
"@emotion/styled": "11.8.1",
"@mui/material": "5.4.4",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.3",
"@testing-library/user-event": "13.5.0",
"@types/jest": "27.4.0",
"@types/node": "16.11.25",
"@types/react": "17.0.39",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "6.2.1",
"react-scripts": "5.0.0",
"ts-generic-collections-linq": "1.0.7",
"typescript": "4.5.5",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build:old": "react-scripts build",
"build:prod": "BUILD_PATH='../reactpatterns/src/dist/react' dotenv -e .env.production react-scripts build",
"build:dev": "BUILD_PATH='../reactpatterns/src/dist/react' dotenv -e .env.development react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "webpack --watch --progress"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@svgr/webpack": "6.2.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"next-transpile-modules": "9.0.0",
"@babel/core": "7.17.5",
"@babel/preset-env": "7.16.11",
"@babel/preset-react": "7.16.7",
"@types/react-dom": "17.0.11",
"babel-loader": "8.2.3",
"css-loader": "6.6.0",
"dotenv-cli": "5.0.0",
"html-webpack-plugin": "5.5.0",
"ts-loader": "9.2.6",
"typescript": "4.5.5",
"webpack": "5.69.1",
"webpack-cli": "4.9.2",
"webpack-dev-server": "4.7.4"
}
}
我看了docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here。这就是您收到错误的原因。
所以您只需要像这样提供道具的类型：
export const Logo = styled((props: PropTypeOfYourFunctionalComponent) => {
// code of your functional component
});
其中 PropTypeOfYourFunctionalComponent 是功能组件的 React 道具的类型。