{"id":72817,"date":"2024-08-09T16:03:31","date_gmt":"2024-08-09T12:33:31","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/ts-function-overloading-real-world-example-36c8\/"},"modified":"2024-08-09T16:03:31","modified_gmt":"2024-08-09T12:33:31","slug":"ts-function-overloading-real-world-example-36c8","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/ts-function-overloading-real-world-example-36c8\/","title":{"rendered":"\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u062a\u0627\u0628\u0639 TS &#8211; \u0645\u062b\u0627\u0644 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc Typescript \u06a9\u0645\u200c\u062a\u06a9\u0631\u0627\u0631 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 &#8211; \u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0648\u0627\u0642\u0639 \u0628\u06cc\u0646\u0627\u0646\u0647<\/p>\n<p>  \u0645\u0642\u062f\u0645\u0647<\/p>\n<p>\u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/p>\n<p>export function useUrlState&lt;T extends JSONCompatible&gt;(<br \/>\n  defaultState: T,<br \/>\n  searchParams?: object,<br \/>\n)<\/p>\n<p>\u062f\u0631 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u0628\u0627\u06cc\u062f \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0628\u06cc\u0634\u062a\u0631. \u0628\u0647 \u062e\u0627\u0637\u0631 \u0633\u067e\u0631\u062f\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 N \u0627\u0645 \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0627\u0628\u0639\u06cc \u0645\u0627\u0646\u0646\u062f \u0622\u0646 \u0633\u062e\u062a \u0627\u0633\u062a useUrlState(firstArg, null, null, fourthArg) \u0645\u0636\u062d\u06a9 \u0627\u0633\u062a \u0627\u0631\u0633\u0627\u0644 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0634\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u062a\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<p>export function useUrlState&lt;T extends JSONCompatible&gt;({<br \/>\n  defaultState,<br \/>\n  searchParams,<br \/>\n  replace<br \/>\n}: { defaultState: T, searchParams?: object, replace?: boolean })<\/p>\n<p>\u0645\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0641\u0631\u0645\u062a \u062c\u062f\u06cc\u062f \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0648\u062c\u0648\u062f \u0633\u0627\u0632\u06af\u0627\u0631 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u0645.<\/p>\n<p>  \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0627\u0645\u0636\u0627\u0647\u0627 \u062f\u0631\u0633\u062a \u0628\u0627\u0644\u0627\u06cc \u062a\u0627\u0628\u0639 \u0627\u062c\u0631\u0627. \u0627\u0645\u0636\u0627\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0647\u0645\u0647 \u0631\u0627\u0647 \u0647\u0627\u06cc \u0645\u0645\u06a9\u0646\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0627 \u0646\u0648\u0639 \u0648 \u06a9\u0645\u06cc\u062a \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0631\u062f.<\/p>\n<p>\/**<br \/>\n * @deprecated Pass arguments in a object `useUrlState({ defaultState: form, searchParams })`<br \/>\n *<br \/>\n *  * Github {@link https:\/\/github.com\/asmyshlyaev177\/state-in-url\/tree\/main\/packages\/urlstate\/next\/useUrlState#api}<br \/>\n *\/<br \/>\nexport function useUrlState&lt;T extends JSONCompatible&gt;(defaultState: T, searchParams?: object): {<br \/>\n  state: DeepReadonly&lt;T&gt;,<br \/>\n  updateState: (value: Partial&lt;DeepReadonly&lt;T&gt;&gt;,<br \/>\n  updateUrl: (value?: Partial&lt;DeepReadonly&lt;T&gt;&gt;) =&gt; void,<br \/>\n  getState: () =&gt; DeepReadonly&lt;T&gt;<br \/>\n}<br \/>\n\/**<br \/>\n * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions<br \/>\n *<br \/>\n * @param {JSONCompatible&lt;T&gt;} [defaultState] Fallback (default) values for state<br \/>\n * @param {?SearchParams&lt;T&gt;} [searchParams] searchParams from Next server component<br \/>\n *\/<br \/>\nexport function useUrlState&lt;T extends JSONCompatible&gt;({ defaultState, searchParams }: {<br \/>\n  defaultState: T, searchParams?: object, replace?: boolean<br \/>\n}): {<br \/>\n  state: DeepReadonly&lt;T&gt;,<br \/>\n  updateState: (value: Partial&lt;DeepReadonly&lt;T&gt;&gt;) =&gt; void,<br \/>\n  updateUrl: (value?: Partial&lt;DeepReadonly&lt;T&gt;&gt;) =&gt; void,<br \/>\n  getState: () =&gt; DeepReadonly&lt;T&gt;<br \/>\n} \/\/ &lt;- notice that should implicitly define returned value<br \/>\n\/\/ implementation<br \/>\nexport function useUrlState&lt;T extends JSONCompatible&gt;(<br \/>\n  defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean },<br \/>\n  searchParams?: object,<br \/>\n) {<\/p>\n<p>\u0628\u062e\u0634 \u0645\u0634\u06a9\u0644 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0645\u0636\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627\u0634\u062f \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 \u0627\u062c\u0631\u0627\u060c \u067e\u0633 \u0627\u06cc\u0646 \u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean }<\/p>\n<p>\u0645\u0646 \u0641\u0631\u0636 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0627\u06af\u0631 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0627\u0648\u0644 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u062e\u0627\u0635 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0634\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<p>  const _defaultState = (&#8216;defaultState&#8217; in defaultState ? defaultState.defaultState : defaultState) as T<br \/>\n  const _searchParams = (&#8216;defaultState&#8217; in defaultState ? defaultState.searchParams : searchParams) as object | undefined<br \/>\n  const _replace = (&#8216;defaultState&#8217; in defaultState ? defaultState.replace ?? true : false) as boolean<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u062f \u06a9\u0647 replace \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0627\u0631\u0627\u06cc \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0633\u062a true \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628 \u062c\u062f\u06cc\u062f\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628 \u0642\u062f\u06cc\u0645\u06cc \u0627\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a false.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u0646\u0638\u0631\u0627\u062a JSDoc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u0631\u0627\u06cc \u0647\u0631 \u0627\u0645\u0636\u0627 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0628\u0627 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a @deprecated \u0628\u0631\u0686\u0633\u0628 \u0632\u062f\u0646<\/p>\n<p>\u0627\u0633\u0646\u0627\u062f \u0631\u0633\u0645\u06cc https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/functions.html#function-overloads<\/p>\n<p>Tnx \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \ud83d\ude42<\/p>\n<p>\u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u062c\u0631\u0628\u0647 \u062e\u0648\u062f \u0646\u0638\u0631 \u0628\u062f\u0647\u06cc\u062f \u06cc\u0627 \u0627\u06af\u0631 \u0627\u06cc\u062f\u0647 \u0627\u06cc \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0622\u0646 \u0631\u0627 \u0632\u06cc\u0628\u0627\u062a\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc Typescript \u06a9\u0645\u200c\u062a\u06a9\u0631\u0627\u0631 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 &#8211; <strong>\u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f<\/strong> \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0648\u0627\u0642\u0639 \u0628\u06cc\u0646\u0627\u0646\u0647<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/ts-function-overloading-real-world-example-36c8\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/ts-function-overloading-real-world-example-36c8\/#%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C\" >\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">useUrlState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">JSONCompatible<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">defaultState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">T<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">searchParams<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">object<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">)<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u062f\u0631 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u0628\u0627\u06cc\u062f \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0628\u06cc\u0634\u062a\u0631. \u0628\u0647 \u062e\u0627\u0637\u0631 \u0633\u067e\u0631\u062f\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 N \u0627\u0645 \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0627\u0628\u0639\u06cc \u0645\u0627\u0646\u0646\u062f \u0622\u0646 \u0633\u062e\u062a \u0627\u0633\u062a <code>useUrlState(firstArg, null, null, fourthArg)<\/code> \u0645\u0636\u062d\u06a9 \u0627\u0633\u062a \u0627\u0631\u0633\u0627\u0644 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0634\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u062a\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">useUrlState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">JSONCompatible<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n  <span class=\"nx\">defaultState<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">searchParams<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">replace<\/span>\n<span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">defaultState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">T<\/span><span class=\"p\">,<\/span> <span class=\"nx\">searchParams<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">object<\/span><span class=\"p\">,<\/span> <span class=\"nx\">replace<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"p\">})<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0645\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0641\u0631\u0645\u062a \u062c\u062f\u06cc\u062f \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0648\u062c\u0648\u062f \u0633\u0627\u0632\u06af\u0627\u0631 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C\"><\/span>\n<p>  \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f <strong>\u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0627\u0645\u0636\u0627\u0647\u0627<\/strong> \u062f\u0631\u0633\u062a \u0628\u0627\u0644\u0627\u06cc \u062a\u0627\u0628\u0639 <strong>\u0627\u062c\u0631\u0627<\/strong>. \u0627\u0645\u0636\u0627\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0647\u0645\u0647 \u0631\u0627\u0647 \u0647\u0627\u06cc \u0645\u0645\u06a9\u0646\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0627 \u0646\u0648\u0639 \u0648 \u06a9\u0645\u06cc\u062a \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0631\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>\n<span class=\"cm\">\/**\n * @deprecated Pass arguments in a object `useUrlState({ defaultState: form, searchParams })`\n *\n *  * Github {@link https:\/\/github.com\/asmyshlyaev177\/state-in-url\/tree\/main\/packages\/urlstate\/next\/useUrlState#api}\n *\/<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">useUrlState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">JSONCompatible<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">defaultState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">T<\/span><span class=\"p\">,<\/span> <span class=\"nx\">searchParams<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">object<\/span><span class=\"p\">):<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">state<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">updateState<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;&gt;<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">updateUrl<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">?:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;&gt;<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">getState<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"cm\">\/**\n * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions\n *\n * @param {JSONCompatible&lt;T&gt;} [defaultState] Fallback (default) values for state\n * @param {?SearchParams&lt;T&gt;} [searchParams] searchParams from Next server component\n *\/<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">useUrlState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">JSONCompatible<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span> <span class=\"nx\">defaultState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">searchParams<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">defaultState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">T<\/span><span class=\"p\">,<\/span> <span class=\"nx\">searchParams<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">object<\/span><span class=\"p\">,<\/span> <span class=\"nx\">replace<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">boolean<\/span>\n<span class=\"p\">}):<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">state<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">updateState<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;&gt;<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">updateUrl<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">?:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;&gt;<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">getState<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">DeepReadonly<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span> <span class=\"c1\">\/\/ &lt;- notice that should implicitly define returned value<\/span>\n<span class=\"c1\">\/\/ implementation<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">useUrlState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">JSONCompatible<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">defaultState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">T<\/span> <span class=\"o\">|<\/span> <span class=\"p\">{<\/span> <span class=\"na\">defaultState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">T<\/span><span class=\"p\">,<\/span> <span class=\"nx\">searchParams<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">object<\/span><span class=\"p\">,<\/span> <span class=\"nx\">replace<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"p\">},<\/span>\n  <span class=\"nx\">searchParams<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">object<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0628\u062e\u0634 \u0645\u0634\u06a9\u0644 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0645\u0636\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627\u0634\u062f <strong>\u0633\u0627\u0632\u06af\u0627\u0631<\/strong> \u0628\u0627 \u0627\u062c\u0631\u0627\u060c \u067e\u0633 \u0627\u06cc\u0646 \u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f <code>defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean }<\/code><\/p>\n<p>\u0645\u0646 \u0641\u0631\u0636 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0627\u06af\u0631 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0627\u0648\u0644 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u062e\u0627\u0635 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0634\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"kd\">const<\/span> <span class=\"nx\">_defaultState<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">defaultState<\/span><span class=\"dl\">'<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">defaultState<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">defaultState<\/span><span class=\"p\">.<\/span><span class=\"nx\">defaultState<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">defaultState<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">T<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">_searchParams<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">defaultState<\/span><span class=\"dl\">'<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">defaultState<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">defaultState<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchParams<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">searchParams<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">object<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">_replace<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">defaultState<\/span><span class=\"dl\">'<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">defaultState<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">defaultState<\/span><span class=\"p\">.<\/span><span class=\"nx\">replace<\/span> <span class=\"o\">??<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">boolean<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u062f \u06a9\u0647 <code>replace<\/code> \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0627\u0631\u0627\u06cc \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0633\u062a <code>true<\/code> \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628 \u062c\u062f\u06cc\u062f\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628 \u0642\u062f\u06cc\u0645\u06cc \u0627\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a <code>false<\/code>.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><\/p>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u0646\u0638\u0631\u0627\u062a JSDoc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u0631\u0627\u06cc \u0647\u0631 \u0627\u0645\u0636\u0627 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0628\u0627 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a <code>@deprecated<\/code> \u0628\u0631\u0686\u0633\u0628 \u0632\u062f\u0646<\/p>\n<p>\u0627\u0633\u0646\u0627\u062f \u0631\u0633\u0645\u06cc https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/functions.html#function-overloads<\/p>\n<p>Tnx \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \ud83d\ude42<\/p>\n<p>\u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u062c\u0631\u0628\u0647 \u062e\u0648\u062f \u0646\u0638\u0631 \u0628\u062f\u0647\u06cc\u062f \u06cc\u0627 \u0627\u06af\u0631 \u0627\u06cc\u062f\u0647 \u0627\u06cc \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0622\u0646 \u0631\u0627 \u0632\u06cc\u0628\u0627\u062a\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc Typescript \u06a9\u0645\u200c\u062a\u06a9\u0631\u0627\u0631 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 &#8211; \u0627\u0636\u0627\u0641\u0647 \u0628\u0627\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0648\u0627\u0642\u0639 \u0628\u06cc\u0646\u0627\u0646\u0647 \u0645\u0642\u062f\u0645\u0647 \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f export function useUrlState&lt;T extends JSONCompatible&gt;( defaultState: T, searchParams?: object, ) \u062f\u0631 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u0628\u0627\u06cc\u062f \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0628\u06cc\u0634\u062a\u0631. &hellip;<\/p>\n","protected":false},"author":2,"featured_media":72818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-72817","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/72817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=72817"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/72817\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/72818"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=72817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=72817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=72817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}