{"id":346625,"date":"2023-03-12T21:01:19","date_gmt":"2023-03-12T21:01:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=346625"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2023-03-12T21:01:19","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=346625","title":{"rendered":"React \u0438 Typescript: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043d\u043e\u043f\u043a\u0438<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

React \u0438 Typescript \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c React \u0438 Typescript.<\/p>\n

\u0427\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435?<\/h3>\n

\u041a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043c\u043e\u0436\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u043f\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 \u0438\u043c\u044f \u0442\u0435\u0433\u0430 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0432\u0441\u0435 \u0432 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435
\u041f\u0440\u0438\u043c\u0435\u0440 3 \u043a\u043d\u043e\u043f\u043e\u043a:<\/p>\n

\/\/\u0421\u0430\u043c\u0430\u044f \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 <Button onClick={showAlert}>Hello! It's button!<\/Button>  \/\/\u0421\u0441\u044b\u043b\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0449\u0430\u044f \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430 <Button   component={'a'}   target=\"_blank\"   href=\"https:\/\/www.google.ru\/\" >   It's Google link! <\/Button>  \/\/\u0421\u0441\u044b\u043b\u043a\u0430 \u0438\u0437 react-router-dom \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043d\u0430\u0448\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \/\/import { Link } from 'react-router-dom' <Button component={Link} to=\"\/link-route\">   It's router link! <\/Button><\/code><\/pre>\n
\u0412\u0441\u0435 \u044d\u0442\u0438 \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/strong>, \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f disabled<\/code> \u0438 loading<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432\u043e \u0432\u0441\u0435\u0445 3 \u0441\u043b\u0443\u0447\u0430\u044f\u0445<\/p>\n
\u0422\u0430\u043a \u0436\u0435 typescript \u043d\u0430\u043c \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441 \u043f\u0440\u043e\u043f\u0430\u043c\u0438, \u0442.e. \u043e\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b \u0438 \u0438\u0445 \u0442\u0438\u043f\u044b<\/p>\n
\u0427\u0442\u043e \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h3>\n
    \n
  1. \n
    React<\/p>\n<\/li>\n
  2. \n
    Typescript<\/p>\n<\/li>\n
  3. \n
    SCSS — \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/p>\n<\/li>\n
  4. \n
    clsx — \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a className<\/p>\n<\/li>\n<\/ol>\n
    \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h3>\n
      \n
    1. \n
      \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 «BaseButton», \u0430 \u0432 \u043d\u0435\u0439 \u0444\u0430\u0439\u043b BaseButton.tsx<\/code>. BaseButton<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<\/li>\n
    2. \n
      \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 «Button», \u0430 \u0432 \u043d\u0435\u0439 \u0444\u0430\u0439\u043b Button.tsx<\/code>. Button<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n
    3. \n
      \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 «Button» scss \u0444\u0430\u0439\u043b Button.module.scss<\/code>, \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0434\u0443\u043b\u044c, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<\/ol>\n
      \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f BaseButton<\/h3>\n
      \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0444\u0430\u0439\u043b «BaseButton.tsx» \u043a\u043e\u0434 \u043d\u0438\u0436\u0435 \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0435\u0433\u043e \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c:<\/p>\n
      import {   Attributes,   createElement,   CSSProperties,   ComponentType,   ComponentPropsWithRef, } from 'react'  export type BaseButtonComponent =   | keyof JSX.IntrinsicElements   | ComponentType<any>  type BaseProps<C extends BaseButtonComponent = 'button'> = {   component?: C   className?: string   style?: CSSProperties } & Attributes  export type BaseButtonProps<C extends BaseButtonComponent = 'button'> =   C extends keyof JSX.IntrinsicElements     ? Omit<ComponentPropsWithRef<C>, keyof BaseProps<C>> & BaseProps<C>     : C extends ComponentType<infer P>     ? P extends ComponentPropsWithRef<any>       ? Omit<P, keyof BaseProps<C>> & BaseProps<C>       : never     : never  export default function BaseButton<C extends BaseButtonComponent = 'button'>({   component = 'button',   children,   ...props }: BaseButtonProps<C>) {   return createElement(component, props, children) }<\/code><\/pre>\n
      \u0422\u0438\u043f\u044b BaseButton<\/h4>\n
      \u0422\u0438\u043f BaseProps<\/code> — \u043e\u043d \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: component<\/code>, className<\/code>, style<\/code>
      \u041f\u0440\u043e\u043f component<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430 \u0442\u043e, \u043a\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u043e\u043d \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u0438\u043f\u0430 BaseButtonComponent<\/code> \u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 button<\/code> \u044d\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c <C extends BaseButtonComponent = 'button'><\/code> <\/p>\n
      \u0422\u0438\u043f BaseButtonComponent<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n