<hr>
<h2 id="總結">總結</h2>在一些情況下可能會選擇透過透過 CSS 變數 <code>var()</code> 來指定樣式，而 MaterialUI 的 <code>CssVarsProvider</code> 元件可讓開發者取得 CSS 變數版本的 MaterialUI 樣式設定（<a href="https://mui.com/material-ui/customization/default-theme/" target="_blank" class="underline">theme object</a>），且可搭配 <code>useColorScheme</code> 來指定取得 light 或 dark 模式的樣式。<h2 id="版本與環境">版本與環境</h2><pre><code class="language-plaintext">@mui/material: 5.11.7
</code></pre>
<h2 id="筆記">筆記</h2><h3 id="情境範例">情境範例</h3>比如我想直接借用 MaterialUI 預設的 dark mode 色票，且想透過 CSS Module 集中管理樣式資訊，此時即可直接透過 <code>var()</code> 將 MaterialUI 設定好的顏色變數傳入 <code>index.module.css</code> 中：<iframe src="https://codesandbox.io/embed/mui-cssvarsprovider-xkr9h8?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.module.css&theme=dark"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="mui-CssVarsProvider"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>

<h3 id="CssVarsProvider">CssVarsProvider</h3>透過 <code>import { Experimental_CssVarsProvider as CssVarsProvider } from &#39;@mui/material/styles&#39;;</code> 來匯入 <code>CssVarsProvider</code> 元件，使用方式基本如下：<pre><code class="language-tsx">import * as React from &#x27;react&#x27;;
import { render } from &#x27;react-dom&#x27;;
import { Experimental_CssVarsProvider as CssVarsProvider } from &#x27;@mui/material/styles&#x27;;
import CssBaseline from &#x27;@mui/material/CssBaseline&#x27;;
import ToggleButton from &#x27;./ToggleButton&#x27;;
import scopedStyle from &#x27;./index.module.css&#x27;;
import &#x27;./styles.css&#x27;;

function App() {
 /* Main */
 return (
 &lt;CssVarsProvider&gt;
 &lt;CssBaseline /&gt;
 &lt;div className=&quot;App&quot;&gt;
 &lt;ToggleButton /&gt;
 &lt;ul&gt;
 &lt;li className={scopedStyle.muiPrimaryMain}&gt;
 --mui-palette-primary-main
 &lt;/li&gt;
 &lt;li className={scopedStyle.muiSecondaryMain}&gt;
 --mui-palette-secondary-main
 &lt;/li&gt;
 &lt;li className={scopedStyle.muiErrorMain}&gt;--mui-palette-error-main&lt;/li&gt;
 &lt;li className={scopedStyle.muiWarningMain}&gt;
 --mui-palette-warning-main
 &lt;/li&gt;
 &lt;li className={scopedStyle.muiInfoMain}&gt;--mui-palette-info-main&lt;/li&gt;
 &lt;li className={scopedStyle.muiSuccessMain}&gt;
 --mui-palette-success-main
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/CssVarsProvider&gt;
 );
}

const rootElement = document.getElementById(&#x27;root&#x27;);
render(&lt;App /&gt;, rootElement);
</code></pre>
<code>CssVarsProvider</code> 會把 MaterialUI 的樣式設定透過 css 變數的形式注入到 React app 中，預設的樣式選取器是 <code>:root</code>，可以透過 <code>props.colorSchemeSelector</code> 來執行客製。下方範例即是將 CSS 變數群注入到 <code>#root</code> 選取器之下：<pre><code class="language-tsx">&lt;CssVarsProvider colorSchemeSelector=&quot;#root&quot;&gt;{/* 略 */}&lt;/CssVarsProvider&gt;
</code></pre>
如果想要預設載入 dark mode 的 MaterialUI 樣式，可透過 <code>props.defaultMode</code> 來設定：<pre><code class="language-tsx">&lt;CssVarsProvider defaultMode=&quot;dark&quot;&gt;{/* 略 */}&lt;/CssVarsProvider&gt;
</code></pre>
其他可使用的元件 <code>props</code> 可參考 <code>/material-ui/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts</code>。注意事項：使用 <code>CssVarsProvider</code> 的話，就不需要再為 app 加上 <code>import { ThemeProvider } from &#39;@mui/material/styles&#39;;</code> 了。從原始碼的最終回傳結果可看到 <code>ThemeProvider</code> 是一起被打包丟出來的，不需要再手動引用。<pre><code class="language-tsx">// 套件檔案路徑: /material-ui/packages/mui-system/src/cssVars/createCssVarsProvider.js
// 部分內容略，僅貼出回傳相關段落
const element = (
 &lt;React.Fragment&gt;
 {shouldGenerateStyleSheet &amp;&amp; (
 &lt;React.Fragment&gt;
 &lt;GlobalStyles styles={{ [colorSchemeSelector]: rootCss }} /&gt;
 &lt;GlobalStyles styles={defaultColorSchemeStyleSheet} /&gt;
 &lt;GlobalStyles styles={otherColorSchemesStyleSheet} /&gt;
 &lt;/React.Fragment&gt;
 )}
 &lt;ThemeProvider theme={resolveTheme ? resolveTheme(theme) : theme}&gt;
 {children}
 &lt;/ThemeProvider&gt;
 &lt;/React.Fragment&gt;
);

if (nested) {
 return element;
}

return (
 &lt;ColorSchemeContext.Provider value={contextValue}&gt;
 {element}
 &lt;/ColorSchemeContext.Provider&gt;
);
</code></pre>
<h3 id="useColorScheme">useColorScheme</h3>搭配 <code>import { useColorScheme } from &#39;@mui/material/styles&#39;;</code> 即可取得當下的 MaterialUI mode 資訊。也可透過 <code>setMode</code> 直接更新 mode 設定：<pre><code class="language-tsx">import React from &#x27;react&#x27;;
import { useColorScheme } from &#x27;@mui/material/styles&#x27;;
import Button from &#x27;@mui/material/Button&#x27;;

function ToggleButton() {
 const { mode, setMode } = useColorScheme();

 const updateMuiMode = () =&gt; {
 if (mode === &#x27;light&#x27;) {
 setMode(&#x27;dark&#x27;);
 } else {
 setMode(&#x27;light&#x27;);
 }
 };

 return (
 &lt;Button onClick={updateMuiMode} variant=&quot;contained&quot; disableElevation&gt;
 current mode: {mode}
 &lt;/Button&gt;
 );
}

export default ToggleButton;
</code></pre>
而所有的 MaterialUI CSS 變數內容都可以透過瀏覽器的開發者工具來查詢：<img src="/2023/mui-CssVarsProvider/mui-cssVarsProvider-var-list.png" alt="view mui var in dev tool"><h2 id="參考文件">參考文件</h2><ul><li><a href="https://mui.com/material-ui/experimental-api/css-variables/" target="_blank" class="underline">MaterialUI: Experimental API - css variables</a></li>
</ul>

使用 CssVarsProvider 來取得 MaterialUI 樣式的 CSS 變數

<hr>
<h2 id="總結">總結</h2>想做出「滑鼠滑到超連結元件時，文字底線逐漸顯現」的效果，發現 <code>transition: text-decoration</code> 不管用，但可透過 <code>transition: text-decoration-color</code> 來實現。<h2 id="筆記">筆記</h2>下面的寫法很直覺但無效：滑鼠滑過去時底線會直接浮現，不會有漸變效果。<pre><code class="language-css">a {
 text-decoration: none;
 transition: text-decoration 0.2s ease;
}

a:hover {
 text-decoration: underline;
}
</code></pre>
理由：參考 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" target="_blank" class="underline">MDN: text-decoration</a> 中關於 Animation type 的說明，會發現 <code>text-decoration-style</code> 與 <code>text-decoration-line</code> 皆被標註為 <code>discrete</code>，亦即這兩組 CSS 樣式在樣式變化時，不會有補幀效果：<blockquote>
<a href="https://stackoverflow.com/questions/44510663/what-are-discrete-animations" target="_blank" class="underline">stackOverFlow</a>: Discrete animations proceed from one keyframe to the next without any interpolation.</blockquote>
w3c 對 <code>discrete</code> 的定義如下：<blockquote>
<a href="https://www.w3.org/TR/web-animations-1/#discrete" target="_blank" class="underline">w3c</a>: The property’s values cannot be meaningfully combined, thus it is not additive and interpolation swaps from Va to Vb at 50% (p=0.5)</blockquote>
但 <code>text-decoration-color</code> 是能表現出動畫效果的，所以如果只是要「滑鼠滑過，底線慢慢浮現」的效果，可透過以下方式達成：<pre><code class="language-css">a {
 text-decoration: underline;
 text-decoration-color: transparent;
 transition: text-decoration-color 0.2s ease;
}

a:hover {
 text-decoration-color: black;
}
</code></pre>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="OJwrypv" data-user="Charlie7779" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
 See the Pen <a href="https://codepen.io/Charlie7779/pen/OJwrypv">
 transition: text-decoration-color</a> by Charlie (<a href="https://codepen.io/Charlie7779">@Charlie7779</a>)
 on <a href="https://codepen.io">CodePen</a>.

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

搞定。<h2 id="參考文件">參考文件</h2><ul><li><a href="https://www.w3.org/TR/web-animations-1/#discrete" target="_blank" class="underline">w3c: 5.2. Animating properties - discrete</a></li>
<li><a href="https://stackoverflow.com/questions/30352431/css-transition-not-working-with-underline" target="_blank" class="underline">stackOverFlow: CSS transition not working with underline</a></li>
<li><a href="https://stackoverflow.com/questions/44510663/what-are-discrete-animations" target="_blank" class="underline">stackOverFlow: What are discrete animations?</a></li>
</ul>

對 CSS text-decoration underline 加上動畫效果

<hr>
<h2 id="總結">總結</h2>準備將 vite React App 部署到 GitHub Pages 時發現腳本略長，塞到 <code>package.json</code> 的 <code>scripts</code> 欄位中不易閱讀，故選擇試用 make 來管理腳本。<h2 id="版本與環境">版本與環境</h2><pre><code class="language-text">os: macOS Ventura Version 13.0
</code></pre>
<h2 id="筆記">筆記</h2><h3 id="關於 make">關於 make</h3>首次出現在 1976 年的軟體，會讀取特定檔案 <code>Makefile</code> 中的內容來建置程式。<blockquote>
Wikipedia: In software development, Make is a build automation tool that automatically builds executable programs and libraries from source code by reading files called <code>Makefile</code> which specify how to derive the target program. Though integrated development environments and language-specific compiler features can also be used to manage a build process, Make remains widely used, especially in Unix and Unix-like operating systems.</blockquote>
在前端專案的其中一種應用：可以讓 <code>package.json</code> 中的 <code>scripts</code> 部分變得簡潔。參考以下內容：<pre><code class="language-json">{
 &quot;scripts&quot;: {
 &quot;dev&quot;: &quot;make dev&quot;,
 &quot;build&quot;: &quot;make build&quot;,
 &quot;preview&quot;: &quot;make preview&quot;,
 &quot;deploy&quot;: &quot;make deploy&quot;
 }
}
</code></pre>
在終端輸入 <code>npm run dev</code> 或是 <code>make dev</code> 都能觸發 <code>dev</code> 的效果。原本就簡短的指令（比如 vite template ts-react 中的 <code>dev</code> 與 <code>build</code> 分別只是 <code>vite</code> 與 <code>tsc &amp;&amp; vite build</code> 這種短組合）換成 <code>make</code> 可能沒有什麼顯著優化。但以本次的使用情境（將 vite React App 部署為 GitHub Pages）來說，使用 <code>Makefile</code> 來管理腳本的話，就能夠分行撰寫指令，也能從 <code>.env</code> 引入變數，提升程式碼的可讀性與維護性。程式碼與相關說明可參考本文下一段。<h3 id="搭配 vite 部署 GitHub Pages">搭配 vite 部署 GitHub Pages</h3><code>Makefile</code> 放在專案根目錄，部署相關的腳本參考 <a href="https://vitejs.dev/guide/static-deploy.html#github-pages" target="_blank" class="underline">vite: Deploying a Static Site</a> 進行改編：<pre><code class="language-Makefile">include .env

# open vite dev server
.PHONY: dev
dev:
 npx vite

# build vite app with production setting
.PHONY: build
build:
 npx tsc &amp;&amp; npx vite build

# preview build result locally
.PHONY: preview
preview:
 npx vite preview

# remove build folder and its content
.PHONY: clean
clean:
 rm -rf $(VITE_BUILD_OUTDIR)

# deploy build result to gitHub repo as branch &quot;gh-pages&quot;
.PHONY: deploy
deploy: build
 cd $(VITE_BUILD_OUTDIR) &amp;&amp; \
 git init &amp;&amp; \
 git remote -v | grep -w origin || git remote add origin git@github.com:&lt;GitHub Account&gt;/&lt;GitHub Repository Name&gt;.git &amp;&amp; \
 git branch -m gh-pages &amp;&amp; \
 git add -A &amp;&amp; \
 git commit -m &quot;[feat] deploy as gh-pages `date +&#x27;%Y-%m-%d %H:%M:%S&#x27;`&quot; &amp;&amp; \
 git push -u origin gh-pages -f
</code></pre>
<code>Makefile</code> 相關解說：<ul><li><code>include .env</code>：引入 <code>.env</code> 中的環境變數設定，上述程式碼中的 <code>VITE_BUILD_OUTDIR</code> 都是在借用環境變數中的內容。<ul><li><a href="https://stackoverflow.com/questions/28890634/how-to-get-a-shell-environment-variable-in-a-makefile" target="_blank" class="underline">stackOverFlow: How to get a shell environment variable in a makefile?</a></li>
<li><a href="https://stackoverflow.com/questions/44628206/how-to-load-and-export-variables-from-an-env-file-in-makefile" target="_blank" class="underline">stackOverFlow: How to load and export variables from an .env file in Makefile?</a></li>
</ul></li>
<li><code>.PHONY</code>：關鍵字，可避免在執行 <code>make</code> 指令時撞名。比如執行 <code>make dev</code> 時，預計要執行的是 <code>dev</code> 指令，但如果資料夾中有個檔案也叫 <code>dev</code> 的話，執行的就會是該 <code>dev</code> 檔案。而 <code>.PHONY</code> 可確保在跑 <code>make</code> 時做的事情是執行指令（而不是執行同名檔案）。</li>
</ul><blockquote>
<a href="https://www.gnu.org/software/make/manual/html_node/Phony-Targets.html" target="_blank" class="underline">gnu.org</a>: A phony target is one that is not really the name of a file; rather it is just a name for a recipe to be executed when you make an explicit request. There are two reasons to use a phony target: to avoid a conflict with a file of the same name, and to improve performance.</blockquote>
<ul><li><code>deploy: build</code>：當一個 make target 後面使用冒號串接其他 target 時，則代表「先執行冒號後的 target，再執行冒號前的 target」。在這裡代表執行 <code>build</code> 前要先跑完 <code>build</code>。</li>
</ul><blockquote>
<a href="https://bytes.usc.edu/cs104/wiki/makefile/" target="_blank" class="underline">Makefile Cheat Sheet</a>: Dependencies can either be other targets or file names; if a target depends on another target, it guarantees that target will be run prior, and if a target depends on a file, it will check to see if that file has changed to avoid executing redundantly. Finally, commands can be anything you could run on your command line.</blockquote>
其他補充：<ul><li>指令分行（比如 <code>deploy</code>）：透過 <code>\</code> 符號換行，再加上 <code>&amp;&amp;</code> 來確保指令會相繼執行，可參考 <a href="https://stackoverflow.com/questions/1789594/how-do-i-write-the-cd-command-in-a-makefile" target="_blank" class="underline">stackOverFlow: How do I write the &#39;cd&#39; command in a makefile?</a></li>
<li><code>git remote -v | grep -w origin || git remote add origin git@github.com:&lt;GitHub Account&gt;/&lt;GitHub Repository Name&gt;.git</code> 的意思是：如果 git remote 清單中沒有名為 <code>origin</code> 的 remote，則追加此 git remote 且命名為 <code>origin</code>，參考 <a href="https://stackoverflow.com/questions/57935486/add-git-remote-only-if-it-doesnt-exist" target="_blank" class="underline">Add git remote only if it doesn&#39;t exist</a></li>
<li>在 git message 中插入當下時間（<code>date +&#39;%Y-%m-%d %H:%M:%S&#39;</code>）的完整說明可參考 <a href="https://stackoverflow.com/questions/4654437/how-to-set-current-date-as-git-commit-message" target="_blank" class="underline">stackOverFlow: How to set current date as git commit message</a></li>
</ul><h2 id="參考文件">參考文件</h2><ul><li><a href="https://www.gnu.org/software/make/" target="_blank" class="underline">GNU Make</a></li>
<li><a href="https://en.wikipedia.org/wiki/Make_(software)" target="_blank" class="underline">Wikipedia: Make (software)</a></li>
<li><a href="https://www.freecodecamp.org/news/want-to-know-the-easiest-way-to-save-time-use-make-eec453adf7fe/" target="_blank" class="underline">freeCodeCamp: Want to know the easiest way to save time? Use <code>make</code>!</a></li>
<li><a href="https://medium.com/finn-no/makefiles-for-frontend-1779be46461b" target="_blank" class="underline">medium: Makefiles for Frontend</a></li>
<li><a href="https://marmelab.com/blog/2016/02/29/auto-documented-makefile.html" target="_blank" class="underline">marmelab: Self-Documented Makefile</a></li>
</ul>

使用 Makefile 搭配 vite 處理 GitHub Pages 部署

<hr>
<h2 id="總結">總結</h2>簡單來說就是透過元件 <code>StyledEngineProvider</code> 搭配 <code>injectFirst</code> 來讓 MUI 的樣式先被注入，接著才是引入使用者自定義的 CSS 內容。如此一來可以不用把所有需要追加到 MUI 元件的樣式都放到 <code>styleOverrides</code> 中來處理、也可避免在自訂樣式中透過 <code>!important</code> 來覆蓋掉 MUI 的設定。<h2 id="版本與環境">版本與環境</h2><pre><code class="language-plaintext">@mui/material: ^5.0.0
</code></pre>
<h2 id="筆記">筆記</h2><h3 id="使用實例">使用實例</h3>使用方式如下：<iframe src="https://codesandbox.io/embed/mui-styledengineprovider-injectfirst-lq5091?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="mui-StyledEngineProvider-injectFirst"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>

打開 DevTool 可看到 MUI 的樣式被提前到 head 第一順位，下方才接著是使用者自訂的 CSS 內容：<img src="/2023/mui-StyledEngineProvider-injectFirst/injectFirst.png" alt="injectFirst">而以下是沒有使用 <code>injectFirst</code> 的情況，可以看到使用者自定義的 h1 樣式被 MUI 的設定覆蓋掉：<iframe src="https://codesandbox.io/embed/mui-styledengineprovider-injectfirst-forked-ro4zt9?fontsize=14&hidenavigation=1&module=%2Fdemo.tsx&theme=dark"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="mui-StyledEngineProvider-injectFirst (forked)"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>

沒有搭配 <code>injectFirst</code> 時會讓 MUI 的設定壓軸引入，樣式權重會比使用者定義的 CSS 來得高：<img src="/2023/mui-StyledEngineProvider-injectFirst/no-injectFirst.png" alt="no-injectFirst"><h3 id="原始碼部分">原始碼部分</h3>追蹤 <code>import { StyledEngineProvider } from &quot;@mui/material/styles&quot;;</code> 會發現 <code>StyledEngineProvider</code> 的本體位在 <code>material-ui/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js</code> 中（<a href="https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js" target="_blank" class="underline">repo 連結在此</a>），而檔案中的註解也有說明：當使用者傳入 <code>props.injectFirst = true</code> 時，會讓樣式被移動到 <code>&lt;head&gt;</code> 的最上方。<pre><code class="language-ts">import * as React from &#x27;react&#x27;;
import PropTypes from &#x27;prop-types&#x27;;
import { CacheProvider } from &#x27;@emotion/react&#x27;;
import createCache from &#x27;@emotion/cache&#x27;;

// prepend: true moves MUI styles to the top of the &lt;head&gt; so they&#x27;re loaded first.
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
const cache = createCache({ key: &#x27;css&#x27;, prepend: true });

export default function StyledEngineProvider(props) {
 const { injectFirst, children } = props;
 return injectFirst ? (
 &lt;CacheProvider value={cache}&gt;{children}&lt;/CacheProvider&gt;
 ) : (
 children
 );
}

StyledEngineProvider.propTypes = {
 /**
 * Your component tree.
 */
 children: PropTypes.node,
 /**
 * By default, the styles are injected last in the &lt;head&gt; element of the page.
 * As a result, they gain more specificity than any other style sheet.
 * If you want to override MUI&#x27;s styles, set this prop.
 */
 injectFirst: PropTypes.bool,
};
</code></pre>
查詢 <code>@emotion/cache</code> <code>createCache</code> 的<a href="https://emotion.sh/docs/@emotion/cache" target="_blank" class="underline">官方文件</a>也可看到 <code>prepend</code> 的功能：<blockquote>
prepend: A <code>boolean</code> representing whether to prepend rather than append style tags into the specified container DOM node.</blockquote>
結論：使用 <code>StyledEngineProvider</code> 搭配 <code>injectFirst</code> 可確保使用者自訂的樣式獲得較高的權重。<h2 id="參考文件">參考文件</h2><ul><li><a href="https://mui.com/material-ui/guides/interoperability/#css-injection-order" target="_blank" class="underline">MUI: CSS injection order</a></li>
<li><a href="https://stackoverflow.com/questions/69217739/material-ui-new-v5-0-0-injectfirst-fails-to-set-specificity" target="_blank" class="underline">stackOverFlow: material ui &#39;new&#39; v5.0.0 injectFirst fails to set specificity</a></li>
</ul>

在 MUI 5 中讓自定義的 CSS 樣式擁有較高的權重

<hr>
<h2 id="總結">總結</h2>記錄一下在 Frontend Masters 課程 TypeScript Fundamentals 中接觸到的新概念。<h2 id="筆記">筆記</h2><h3 id="Function Overloads">Function Overloads</h3>解決的問題：一個 function 可能有多種參數組合，此時可以透過 function overloads 來定義出各種組合的可能性，並確保 TS 編譯器依舊能檢查傳入 function 的參數組合是否正確。
使用方式：如下範例，同一個 function signatures 搭配不同的參數組合以及最下方的實作內容。<pre><code class="language-ts">function handleArrayUnshift(elem: number, arr: number[]): number[];
function handleArrayUnshift(elem: string, arr: string[]): string[];
function handleArrayUnshift(
 elem: number | string,
 arr: Array&lt;number | string&gt;
): Array&lt;number | string&gt; {
 return [elem, ...arr];
}

console.log(handleArrayUnshift(1, [2, 3, 4]));
console.log(handleArrayUnshift(&#x27;hello&#x27;, [&#x27;world&#x27;]));

/*
下面這行會報錯
No overload matches this call.
 Overload 1 of 2, &#x27;(elem: number, arr: number[]): number[]&#x27;, gave the following error.
 Argument of type &#x27;string&#x27; is not assignable to parameter of type &#x27;number&#x27;.(2769)
*/
console.log(handleArrayUnshift(&#x27;no way&#x27;, [1, 2, 3]));
</code></pre>
<h3 id="Parameter Properties">Parameter Properties</h3>解決的問題：在 class constructor 中的參數與 class properties 名稱一致時，TS 提供偷懶寫法；並且能搭配各種 prefix 關鍵字。<blockquote>
TypeScript offers special syntax for turning a constructor parameter into a class property with the same name and value. These are called parameter properties and are created by prefixing a constructor argument with one of the visibility modifiers <code>public</code>, <code>private</code>, <code>protected</code>, or <code>readonly</code>.</blockquote>
<pre><code class="language-ts">/* 原本要一個一個賦值 */
class Car {
 make: string;
 model: string;
 year: number;
 constructor(make: string, model: string, year: number) {
 this.make = make;
 this.model = model;
 this.year = year;
 }
}
</code></pre>
<pre><code class="language-ts">/* 在 TS 中可以透過 constructor 偷懶 */
class Car {
 constructor(public make: string, public model: string, public year: number) {}
}

const aHonda = new Car(&#x27;Honda&#x27;, &#x27;Accord&#x27;, 2017);
console.info(aHonda.year); // 2017
</code></pre>
<h3 id="Non-null assertion operator">Non-null assertion operator</h3>解決的問題：當開發者十分肯定某一變數有值（非 <code>nullish</code>）時，可使用 <code>!.</code> 的語法來讓 TS 編譯器不再報錯。<blockquote>
A new <code>!</code> post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact.</blockquote>
<pre><code class="language-ts">// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
 // Throw exception if e is null or invalid entity
}
function processEntity(e?: Entity) {
 validateEntity(e);
 let s = e!.name; // Assert that e is non-null and access name
}
</code></pre>
<h2 id="參考文件">參考文件</h2><ul><li><a href="https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads" target="_blank" class="underline">TypeScript Official Docs: Function Overloads</a></li>
<li><a href="https://www.typescriptlang.org/docs/handbook/2/classes.html#parameter-properties" target="_blank" class="underline">TypeScript Official Docs: Parameter Properties</a></li>
<li><a href="https://www.typescript-training.com/course/fundamentals-v3" target="_blank" class="underline">TypeScript Fundamentals v3</a></li>
<li><a href="https://stackoverflow.com/questions/42273853/in-typescript-what-is-the-exclamation-mark-bang-operator-when-dereferenci" target="_blank" class="underline">StackOverFlow: In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member?</a></li>
</ul>

Frontend Masters TypeScript Fundamentals

Frontend Masters Intermediate TypeScript

<hr>
<h2 id="總結">總結</h2>最近在嘗試 MaterialUI 的元件 props 客製內容，發現原來 TypeScript <code>interface</code> 支援同名合併的功能，記錄一下相關內容。<h2 id="版本與環境">版本與環境</h2><pre><code class="language-plaintext">typescript: 4.9.4
</code></pre>
<h2 id="筆記">筆記</h2><blockquote>
For the purposes of this article, “declaration merging” means that the compiler merges two separate declarations declared with the same name into a single definition. This merged definition has the features of both of the original declarations. Any number of declarations can be merged; it’s not limited to just two declarations.</blockquote>
重點：<ul><li>合併之後，便會包含所有的型別定義</li>
<li>合併的數量沒有限制，並不限於兩個</li>
</ul>參考以下範例：<pre><code class="language-ts">interface User {
 name: string;
}

interface User {
 age: number;
}

interface User {
 job: string;
}

const u1: User = {
 name: &#x27;user1&#x27;,
};

const u2: User = {
 name: &#x27;user2&#x27;,
 age: 42,
 job: &#x27;engineer&#x27;,
};
</code></pre>
變數 <code>u1</code> 會讓 ts 編譯器報錯，錯誤內容為缺少必要的鍵值 <code>age</code> 與 <code>job</code>：<code>Type &#39;{ name: string; }&#39; is missing the following properties from type &#39;User&#39;: age, job</code>。變數 <code>u2</code> 因具備三個型別 <code>User</code> 指定的鍵值故不會有問題。注意不能使用關鍵字 <code>type</code> 進行 declaration merging，ts 編譯器會報錯 <code>Duplicate identifier &#39;xxx&#39;.</code><pre><code class="language-ts">/* 用 type 來宣告型別會導致合併失敗 */

type UserT = {
 name: string;
};

type UserT = {
 age: number;
};
</code></pre>
<h2 id="參考文件">參考文件</h2><ul><li><a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html" target="_blank" class="underline">TypeScript: Declaration Merging</a></li>
</ul>

關於我

最近更新的技術筆記