{"id":372653,"date":"2024-05-21T05:17:34","date_gmt":"2024-05-21T05:17:34","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=372653"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=372653","title":{"rendered":"Typescript Generics<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

Javascript — \u043a\u0440\u0443\u0442\u043e\u0439 \u044f\u0437\u044b\u043a \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c\u0438. \u0418 \u043e\u0434\u043d\u043e \u0438\u0437 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 — \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c, \u0442\u0430\u043a \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c. \u041e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0445\u043e\u043b\u0438\u0432\u0430\u0440\u043d\u044b\u0445 \u0442\u0440\u0435\u0434\u043e\u0432 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0441\u0447\u0435\u0442, \u043d\u043e \u043f\u043e \u043c\u043d\u0435 \u0442\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f — \u044d\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0439 \u043f\u043b\u044e\u0441, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438. \u0412\u0435\u0434\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0433\u043b\u0430\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043d\u043e \u0438 \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0443\u0441\u043a\u043e\u0440\u044f\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n

\u041a\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e? \u0412\u0435\u0434\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0438\u043c\u043f\u043e\u0440\u0442 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0435, \u0445\u043e\u0442\u044f \u043c\u043d\u043e\u0433\u0438\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0432\u0430\u0436\u0435\u043d. \u041b\u043e\u0433\u0438\u043a\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0443\u043c\u0435, \u0430 \u0432\u043e\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0432\u0440\u044f\u0434 \u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0422\u0443\u0442 \u043d\u0430\u043c \u0442\u0438\u043f\u044b \u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442, \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0443\u0442, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043a \u043d\u0435\u043c\u0443, \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u044f\u0442 \u043e\u0448\u0438\u0431\u043a\u0443, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0442.\u0434.<\/p>\n

\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 \u0431\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u043d\u043e Typescript \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0438 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0434\u0443\u0442 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438.<\/p>\n

\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c, \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>, \u0433\u0434\u0435 \u0441\u043e\u0431\u0440\u0430\u043d \u043b\u0430\u0439\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u043c\u044b \u0438 \u0438\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n

Generic \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u00ab\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439\u00bb, \u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438 \u0434\u0430\u044e\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b. \u041a \u0441\u043b\u043e\u0432\u0443 \u0432 Typescript \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 (Utility Types<\/a>), \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u0432.<\/p>\n

\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0443 \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 Utility Type — Pick<\/code>. \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a \u0433\u043e\u0442\u043e\u0432\u043e\u043c\u0443 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 (Layout). \u0412\u043e\u0442 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n

import { QuestionCircleOutlined } from \"@ant-design\/icons\"; import { Button, Flex, Typography, Input, Space, ButtonProps } from \"antd\"; import { SearchProps } from \"antd\/es\/input\";  interface ILayout {   buttonProps: Pick<ButtonProps, \"disabled\" | \"onClick\">;   inputProps: Pick<SearchProps, \"loading\" | \"onChange\" | \"onSearch\" | \"value\">;   result: string | undefined; }  export const Layout: React.FC<ILayout> = (props) => {   const { buttonProps, inputProps, result } = props;   return (     <Flex       style={{ height: \"100%\" }}       align=\"center\"       justify=\"center\"       vertical={true}     >       <Space direction=\"vertical\">         <Typography.Title level={2}>           Estimate your age based on your first name         <\/Typography.Title>         <Input.Search {...inputProps} placeholder=\"Enter the name\" \/>         <Flex align=\"center\" gap=\"small\" justify=\"center\" vertical={true}>           <Typography.Title level={3}>             Your age: &nbsp;             {result ? result : <QuestionCircleOutlined \/>}           <\/Typography.Title>           <Button {...buttonProps}>Reset<\/Button>         <\/Flex>       <\/Space>     <\/Flex>   ); }; <\/code><\/pre>\n
\u0412\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 buttonProps: Pick<ButtonProps, \"disabled\" | \"onClick\">;<\/code> \u0438 inputProps: Pick<SearchProps, \"loading\" | \"onChange\" | \"onSearch\" | \"value\">;<\/code>, \u0433\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0442\u0438\u043f buttonProps<\/code> \u0438 inputProps<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0438\u043f\u0430\u043c ButtonProps<\/code> \u0438 SearchProps<\/code>, \u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0418\u0437 \u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Pick<\/code> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n
\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u044f\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0437\u0430\u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u0449\u0435:<\/p>\n
\u0417\u0430\u043f\u0438\u0441\u044c buttonProps: Pick<ButtonProps, \"disabled\" | \"onClick\">;<\/code>  \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n
buttonProps: {   disabled?: boolean;   onClick?: React.MouseEventHandler<HTMLElement> | undefined; }<\/code><\/pre>\n
\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u043d\u0430\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043a\u0430\u043c\u0438 \u0432\u0441\u0435 \u0442\u0438\u043f\u044b, \u043d\u043e \u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u0437\u0430\u043f\u0438\u0441\u0438, \u0435\u0441\u043b\u0438 \u0442\u0438\u043f\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435.<\/p>\n
\u0415\u0441\u043b\u0438 \u0441 Utility Types \u0432\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e — \u0431\u0435\u0440\u0435\u0448\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c, \u0442\u043e \u043a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439 Pick<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c.<\/p>\n
type CustomPick<T extends object, K extends keyof T> = {   [Key in K]: T[Key]; };<\/code><\/pre>\n
\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0438\u043f\u044b, \u043a\u0430\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u044f\u0434\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f CustomPick<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 T<\/code> \u0438 K<\/code>. \u0422\u0438\u043f T<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0442\u0438\u043f\u0443 object<\/code>, \u0430 \u0442\u0438\u043f K<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u043a\u043b\u044e\u0447\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0442\u0438\u043f\u0430 T<\/code>. \u0417\u0430\u0442\u0435\u043c \u0438\u0434\u0435\u0442 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f\u0430 CustomPick<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b. CustomPick<\/code> — \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u043b\u044e\u0447\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u044e\u0447, \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0449\u0438\u0439 Union-\u0442\u0438\u043f\u0443 \u043a\u043b\u044e\u0447\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 T<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c Key in K<\/code> \u0440\u0430\u0432\u043d\u043e Key in keyof T<\/code>, \u0430 \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043f\u0440\u044f\u043c\u043e \u043f\u043e \u0442\u0438\u043f\u0443 ButtonProps<\/code> , \u0442\u043e \u0440\u0430\u0432\u043d\u043e Key in \u2018disabled\u2019 | \u2018onClick\u2019 | \u2026\u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 \u0442\u0438\u043f\u0430 ButtonProps<\/code>. \u0410 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u043f\u0438\u0441\u0438 T[Key]<\/code>.<\/p>\n
\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430, \u043a\u0430\u043a extends<\/code>, in<\/code>, keyof<\/code>. \u0418\u0445 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0432\u0441\u044e \u0441\u0438\u043b\u0443 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u0432, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0435\u0449\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e — infer<\/code>.<\/p>\n
\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e infer<\/code> \u043e\u0442 inference, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u0432\u044b\u0432\u043e\u0434\u00bb — \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0442\u0435\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442 \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 Typescript \u0432 \u0446\u0435\u043b\u043e\u043c. \u042d\u0442\u043e, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c, advanced \u0443\u0440\u043e\u0432\u0435\u043d\u044c.<\/p>\n
\u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e? \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0437\u044c\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API \u043e\u0431\u044b\u0447\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0438\u0448\u0443\u0442 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f — \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0445\u0435\u043b\u043f\u0435\u0440\u044b \u0438\u043b\u0438 \u0445\u0443\u043a\u0438 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c run time \u0442\u0438\u043f\u044b. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0445\u0443\u043a\u0430, \u0433\u0434\u0435 \u0432\u043e \u0432\u0441\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043b\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 infer<\/code> \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430  ReturnType<\/code> \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043f\u0443\u0433\u0430\u0439\u0442\u0435\u0441\u044c, \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f:<\/p>\n
import * as React from \"react\";  import { ApiConfig, HttpResponse, RequestParams } from \"..\/api\/http-client\";  type ExtractHttpResponse<Type> =   Type extends Promise<infer X>     ? X extends HttpResponse<infer XX>       ? XX       : never     : never;  type Action<Data> = {   type: \"FETCH_INIT\" | \"FETCH_SUCCESS\" | \"FETCH_FAILURE\" | \"RESET\";   payload?: { data?: Data; error?: Error }; };  type State<Data> = {   isLoading: boolean;   isError: boolean;   data: Data | void;   error: Error | void; };  const getDataFetchReducer =   <Data>() =>   (state: State<Data>, action: Action<Data>): State<Data> => {     switch (action.type) {       case \"FETCH_INIT\":         return {           ...state,           isLoading: true,           isError: false,         };       case \"FETCH_SUCCESS\":         return {           isLoading: false,           isError: false,           data: action.payload?.data,           error: void 0,         };       case \"FETCH_FAILURE\":         return {           ...state,           isLoading: false,           isError: true,           error: action.payload?.error,         };       case \"RESET\":         return {           data: void 0,           isLoading: false,           isError: false,           error: void 0,         };       default:         return {           ...state,         };     }   };  export function useApi<   ApiGetter extends (     config: ApiConfig,     params: RequestParams,   ) => Record<     keyof ReturnType<ApiGetter>,     ReturnType<ApiGetter>[keyof ReturnType<ApiGetter>]   >,   Method extends keyof ReturnType<ApiGetter>, >(   api: ApiGetter,   method: Method,   initialData?: ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,   onSuccess?: (     response: ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,   ) => void,   onError?: (error: Error) => void,   config?: ApiConfig,   params?: RequestParams, ): [   callApi: ($args: Parameters<ReturnType<ApiGetter>[Method]>) => void,   state: State<ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>>,   reset: () => void,   responseHeaders:     | HttpResponse<         ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,         Error       >[\"headers\"]     | null, ] {   const [args, setArgs] = React.useState<Parameters<     ReturnType<ApiGetter>[Method]   > | null>(null);   const [state, dispatch] = React.useReducer(     getDataFetchReducer<       ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>     >(),     {       isLoading: false,       isError: false,       data: initialData,       error: void 0,     },   );   const [responseHeaders, setResponseHeaders] = React.useState<     | HttpResponse<         ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,         Error       >[\"headers\"]     | null   >(null);    const callApi = React.useCallback(     ($args: Parameters<ReturnType<ApiGetter>[Method]>) => {       setArgs($args);     },     [],   );    const reset = React.useCallback(() => {     dispatch({ type: \"RESET\" });     setResponseHeaders(null);   }, []);    React.useEffect(() => {     let didCancel = false;     const fetchData = async () => {       if (args) {         dispatch({ type: \"FETCH_INIT\" });         try {           const result = await api(config ?? {}, params ?? {})[method](             ...(args as Array<unknown>),           );            if (!didCancel) {             dispatch({ type: \"FETCH_SUCCESS\", payload: { data: result.data } });             onSuccess && onSuccess(result.data);             const headersKey = \"headers\";             setResponseHeaders(result[headersKey]);           }         } catch (error) {           if (!didCancel) {             dispatch({               type: \"FETCH_FAILURE\",               payload: { error: error as Error },             });             onError && onError(error as Error);           }         }       }     };      fetchData();      return () => {       didCancel = true;     };   }, [args]); \/\/ eslint-disable-line react-hooks\/exhaustive-deps    return [callApi, state, reset, responseHeaders]; }<\/code><\/pre>\n
\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u043e \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443<\/a>. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0443\u0441\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c.<\/p>\n
\u042d\u0442\u043e\u0442 \u0445\u0443\u043a \u0441\u043e\u0437\u0434\u0430\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 API, \u043f\u0440\u0438 \u0447\u0435\u043c \u043d\u0435\u0432\u0430\u0436\u043d\u043e \u0441 \u043a\u0430\u043a\u0438\u043c\u0438, \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u043b\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n
    \n
  1. \n
    \u041f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u0430 API \u0441 \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u043e\u0439:<\/p>\n<\/li>\n<\/ol>\n
    (config: ApiConfig, params: RequestParams) => Record<   keyof ReturnType<ApiGetter>,   ReturnType<ApiGetter>[keyof ReturnType<ApiGetter>] ><\/code><\/pre>\n
    \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n
    export const getAgifyApiMethods = (   config: ApiConfig = {},   params: RequestParams = {}, ) => {   const baseUrl = \"https:\/\/api.agify.io\";   return {     getAge: (query: IAgeQuery) =>       new ApiClass({ ...config, baseUrl }).getAge(query, params),   }; };<\/code><\/pre>\n
    \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e http client\u2019\u0430 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 query-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 instance \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430, query-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0430\u043c\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n
      \n
    1. \n
      \u0412\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0438\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434:<\/p>\n<\/li>\n<\/ol>\n
      Method extends keyof ReturnType<ApiGetter><\/code><\/pre>\n
      \u0417\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043d\u0430\u043c \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 extends keyof<\/code>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043b\u044e\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 ReturnType<\/code>. \u042d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n
      \u0423\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0439 \u0442\u0438\u043f ReturnType<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0438\u043f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e:<\/p>\n
      type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;<\/code><\/pre>\n
      \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e infer<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u0430\u0445 — \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0432\u0430\u0436\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c Typescript, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u0430\u043a\u0436\u0435 \u0431\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u0432. \u041f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u043e. \u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0442\u0438\u043f\u044b (Conditional Types<\/a>) \u043f\u043e \u0441\u0443\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0442\u0435\u0440\u043d\u0430\u0440\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432 Javascript, \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 \u0441 \u0442\u0438\u043f\u0430\u043c\u0438. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0437\u0434\u0435\u0441\u044c \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u044c \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0442\u0438\u043f\u0443, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 ReturnType \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0442\u0438\u043f T<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n
      T extends (...args: any[]) => infer R<\/code><\/pre>\n
      \u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 infer R<\/code> \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0432 ReturnType<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
      const concat = (a: string, b: string) => a + b:  type Concated = ReturnType<typeof concat>; \/\/ => string<\/code><\/pre>\n
      \u0410 \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u0442 \u0442\u0438\u043f \u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0442\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0438 \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f any<\/code>:<\/p>\n
      type Concated = ReturnType<string>; \/\/ => any<\/code><\/pre>\n
      \u0427\u0442\u043e\u0431\u044b \u043e\u0449\u0443\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u043e \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0445\u0443\u043a useApi<\/code>:<\/p>\n
        const [getAge, { data, isLoading }, reset] = useApi(     getAgifyApiMethods,     \"getAge\",   );<\/code><\/pre>\n
      \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043d\u0430\u043c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430\u043c \u0435\u0449\u0435 \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0443 API \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435, \u0438 \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f. \u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043d\u043e\u0432, \u0442\u0430\u043a\u0436\u0435 \u0432\u044b \u0432\u0441\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>:<\/p>\n
      \"\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430<\/p>\n
      \u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 getAge<\/figcaption><\/div>\n<\/figure>\n
      \"\u041e\u0448\u0438\u0431\u043a\u0430<\/p>\n
      \u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 API<\/figcaption><\/div>\n<\/figure>\n
      \"\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430<\/p>\n
      \u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u043e\u0442\u0432\u0435\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n
      \u0422\u0430\u043c \u0436\u0435 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a> \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0430 infer<\/code> \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e.<\/p>\n
      \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u043e, \u043a\u0430\u043a \u044f \u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043c\u043e\u0439 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b<\/a>, \u0433\u0434\u0435 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u044b\u0431\u043e\u0440\u0435 \u0442\u0435\u043c.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
      <\/div>\n

       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438        https:\/\/habr.com\/ru\/articles\/805127\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      <\/div>\n
      \n
      \n
      \n
      \n
      Javascript — \u043a\u0440\u0443\u0442\u043e\u0439 \u044f\u0437\u044b\u043a \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c\u0438. \u0418 \u043e\u0434\u043d\u043e \u0438\u0437 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 — \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c, \u0442\u0430\u043a \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c. \u041e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0445\u043e\u043b\u0438\u0432\u0430\u0440\u043d\u044b\u0445 \u0442\u0440\u0435\u0434\u043e\u0432 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0441\u0447\u0435\u0442, \u043d\u043e \u043f\u043e \u043c\u043d\u0435 \u0442\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f — \u044d\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0439 \u043f\u043b\u044e\u0441, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438. \u0412\u0435\u0434\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0433\u043b\u0430\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043d\u043e \u0438 \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0443\u0441\u043a\u043e\u0440\u044f\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n
      \u041a\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e? \u0412\u0435\u0434\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0438\u043c\u043f\u043e\u0440\u0442 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0435, \u0445\u043e\u0442\u044f \u043c\u043d\u043e\u0433\u0438\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0432\u0430\u0436\u0435\u043d. \u041b\u043e\u0433\u0438\u043a\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0443\u043c\u0435, \u0430 \u0432\u043e\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0432\u0440\u044f\u0434 \u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0422\u0443\u0442 \u043d\u0430\u043c \u0442\u0438\u043f\u044b \u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442, \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0443\u0442, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043a \u043d\u0435\u043c\u0443, \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u044f\u0442 \u043e\u0448\u0438\u0431\u043a\u0443, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0442.\u0434.<\/p>\n
      \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 \u0431\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u043d\u043e Typescript \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0438 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0434\u0443\u0442 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438.<\/p>\n
      \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c, \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>, \u0433\u0434\u0435 \u0441\u043e\u0431\u0440\u0430\u043d \u043b\u0430\u0439\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u043c\u044b \u0438 \u0438\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n
      Generic \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u00ab\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439\u00bb, \u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438 \u0434\u0430\u044e\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b. \u041a \u0441\u043b\u043e\u0432\u0443 \u0432 Typescript \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 (Utility Types<\/a>), \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u0432.<\/p>\n
      \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0443 \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 Utility Type — Pick<\/code>. \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a \u0433\u043e\u0442\u043e\u0432\u043e\u043c\u0443 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 (Layout). \u0412\u043e\u0442 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
      import { QuestionCircleOutlined } from \"@ant-design\/icons\"; import { Button, Flex, Typography, Input, Space, ButtonProps } from \"antd\"; import { SearchProps } from \"antd\/es\/input\";  interface ILayout {   buttonProps: Pick<ButtonProps, \"disabled\" | \"onClick\">;   inputProps: Pick<SearchProps, \"loading\" | \"onChange\" | \"onSearch\" | \"value\">;   result: string | undefined; }  export const Layout: React.FC<ILayout> = (props) => {   const { buttonProps, inputProps, result } = props;   return (     <Flex       style={{ height: \"100%\" }}       align=\"center\"       justify=\"center\"       vertical={true}     >       <Space direction=\"vertical\">         <Typography.Title level={2}>           Estimate your age based on your first name         <\/Typography.Title>         <Input.Search {...inputProps} placeholder=\"Enter the name\" \/>         <Flex align=\"center\" gap=\"small\" justify=\"center\" vertical={true}>           <Typography.Title level={3}>             Your age: &nbsp;             {result ? result : <QuestionCircleOutlined \/>}           <\/Typography.Title>           <Button {...buttonProps}>Reset<\/Button>         <\/Flex>       <\/Space>     <\/Flex>   ); }; <\/code><\/pre>\n
      \u0412\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 buttonProps: Pick<ButtonProps, \"disabled\" | \"onClick\">;<\/code> \u0438 inputProps: Pick<SearchProps, \"loading\" | \"onChange\" | \"onSearch\" | \"value\">;<\/code>, \u0433\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0442\u0438\u043f buttonProps<\/code> \u0438 inputProps<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0438\u043f\u0430\u043c ButtonProps<\/code> \u0438 SearchProps<\/code>, \u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0418\u0437 \u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Pick<\/code> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n
      \u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u044f\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0437\u0430\u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u0449\u0435:<\/p>\n
      \u0417\u0430\u043f\u0438\u0441\u044c buttonProps: Pick<ButtonProps, \"disabled\" | \"onClick\">;<\/code>  \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n
      buttonProps: {   disabled?: boolean;   onClick?: React.MouseEventHandler<HTMLElement> | undefined; }<\/code><\/pre>\n
      \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u043d\u0430\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043a\u0430\u043c\u0438 \u0432\u0441\u0435 \u0442\u0438\u043f\u044b, \u043d\u043e \u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u0437\u0430\u043f\u0438\u0441\u0438, \u0435\u0441\u043b\u0438 \u0442\u0438\u043f\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435.<\/p>\n
      \u0415\u0441\u043b\u0438 \u0441 Utility Types \u0432\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e — \u0431\u0435\u0440\u0435\u0448\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c, \u0442\u043e \u043a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439 Pick<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c.<\/p>\n
      type CustomPick<T extends object, K extends keyof T> = {   [Key in K]: T[Key]; };<\/code><\/pre>\n
      \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0438\u043f\u044b, \u043a\u0430\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u044f\u0434\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f CustomPick<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 T<\/code> \u0438 K<\/code>. \u0422\u0438\u043f T<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0442\u0438\u043f\u0443 object<\/code>, \u0430 \u0442\u0438\u043f K<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u043a\u043b\u044e\u0447\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0442\u0438\u043f\u0430 T<\/code>. \u0417\u0430\u0442\u0435\u043c \u0438\u0434\u0435\u0442 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a-\u0442\u0438\u043f\u0430 CustomPick<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b. CustomPick<\/code> — \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u043b\u044e\u0447\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u044e\u0447, \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0449\u0438\u0439 Union-\u0442\u0438\u043f\u0443 \u043a\u043b\u044e\u0447\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 T<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c Key in K<\/code> \u0440\u0430\u0432\u043d\u043e Key in keyof T<\/code>, \u0430 \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043f\u0440\u044f\u043c\u043e \u043f\u043e \u0442\u0438\u043f\u0443 ButtonProps<\/code> , \u0442\u043e \u0440\u0430\u0432\u043d\u043e Key in \u2018disabled\u2019 | \u2018onClick\u2019 | \u2026\u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 \u0442\u0438\u043f\u0430 ButtonProps<\/code>. \u0410 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u043f\u0438\u0441\u0438 T[Key]<\/code>.<\/p>\n
      \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430, \u043a\u0430\u043a extends<\/code>, in<\/code>, keyof<\/code>. \u0418\u0445 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0432\u0441\u044e \u0441\u0438\u043b\u0443 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u0432, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0435\u0449\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e — infer<\/code>.<\/p>\n
      \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e infer<\/code> \u043e\u0442 inference, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u0432\u044b\u0432\u043e\u0434\u00bb — \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0442\u0435\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442 \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 Typescript \u0432 \u0446\u0435\u043b\u043e\u043c. \u042d\u0442\u043e, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c, advanced \u0443\u0440\u043e\u0432\u0435\u043d\u044c.<\/p>\n
      \u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e? \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0437\u044c\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API \u043e\u0431\u044b\u0447\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0438\u0448\u0443\u0442 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f — \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0445\u0435\u043b\u043f\u0435\u0440\u044b \u0438\u043b\u0438 \u0445\u0443\u043a\u0438 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c run time \u0442\u0438\u043f\u044b. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0445\u0443\u043a\u0430, \u0433\u0434\u0435 \u0432\u043e \u0432\u0441\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043b\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 infer<\/code> \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430  ReturnType<\/code> \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043f\u0443\u0433\u0430\u0439\u0442\u0435\u0441\u044c, \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f:<\/p>\n
      import * as React from \"react\";  import { ApiConfig, HttpResponse, RequestParams } from \"..\/api\/http-client\";  type ExtractHttpResponse<Type> =   Type extends Promise<infer X>     ? X extends HttpResponse<infer XX>       ? XX       : never     : never;  type Action<Data> = {   type: \"FETCH_INIT\" | \"FETCH_SUCCESS\" | \"FETCH_FAILURE\" | \"RESET\";   payload?: { data?: Data; error?: Error }; };  type State<Data> = {   isLoading: boolean;   isError: boolean;   data: Data | void;   error: Error | void; };  const getDataFetchReducer =   <Data>() =>   (state: State<Data>, action: Action<Data>): State<Data> => {     switch (action.type) {       case \"FETCH_INIT\":         return {           ...state,           isLoading: true,           isError: false,         };       case \"FETCH_SUCCESS\":         return {           isLoading: false,           isError: false,           data: action.payload?.data,           error: void 0,         };       case \"FETCH_FAILURE\":         return {           ...state,           isLoading: false,           isError: true,           error: action.payload?.error,         };       case \"RESET\":         return {           data: void 0,           isLoading: false,           isError: false,           error: void 0,         };       default:         return {           ...state,         };     }   };  export function useApi<   ApiGetter extends (     config: ApiConfig,     params: RequestParams,   ) => Record<     keyof ReturnType<ApiGetter>,     ReturnType<ApiGetter>[keyof ReturnType<ApiGetter>]   >,   Method extends keyof ReturnType<ApiGetter>, >(   api: ApiGetter,   method: Method,   initialData?: ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,   onSuccess?: (     response: ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,   ) => void,   onError?: (error: Error) => void,   config?: ApiConfig,   params?: RequestParams, ): [   callApi: ($args: Parameters<ReturnType<ApiGetter>[Method]>) => void,   state: State<ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>>,   reset: () => void,   responseHeaders:     | HttpResponse<         ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,         Error       >[\"headers\"]     | null, ] {   const [args, setArgs] = React.useState<Parameters<     ReturnType<ApiGetter>[Method]   > | null>(null);   const [state, dispatch] = React.useReducer(     getDataFetchReducer<       ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>     >(),     {       isLoading: false,       isError: false,       data: initialData,       error: void 0,     },   );   const [responseHeaders, setResponseHeaders] = React.useState<     | HttpResponse<         ExtractHttpResponse<ReturnType<ReturnType<ApiGetter>[Method]>>,         Error       >[\"headers\"]     | null   >(null);    const callApi = React.useCallback(     ($args: Parameters<ReturnType<ApiGetter>[Method]>) => {       setArgs($args);     },     [],   );    const reset = React.useCallback(() => {     dispatch({ type: \"RESET\" });     setResponseHeaders(null);   }, []);    React.useEffect(() => {     let didCancel = false;     const fetchData = async () => {       if (args) {         dispatch({ type: \"FETCH_INIT\" });         try {           const result = await api(config ?? {}, params ?? {})[method](             ...(args as Array<unknown>),           );            if (!didCancel) {             dispatch({ type: \"FETCH_SUCCESS\", payload: { data: result.data } });             onSuccess && onSuccess(result.data);             const headersKey = \"headers\";             setResponseHeaders(result[headersKey]);           }         } catch (error) {           if (!didCancel) {             dispatch({               type: \"FETCH_FAILURE\",               payload: { error: error as Error },             });             onError && onError(error as Error);           }         }       }     };      fetchData();      return () => {       didCancel = true;     };   }, [args]); \/\/ eslint-disable-line react-hooks\/exhaustive-deps    return [callApi, state, reset, responseHeaders]; }<\/code><\/pre>\n
      \u042f \u043d\u0435 \u0431\u0443\u0434\u0443<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-372653","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/372653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=372653"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/372653\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=372653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=372653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=372653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}