TS 樂趣無窮

額外的心智負擔

// 如果帕斯卡命名法對你來說合理...
interface IUser { name: string }
 
// 那何不也這麼做？
const SName = 'Sean'       // "S" for String
const NAge = 18            // "N" for Number
const AFriends = [/*...*/] // "A" for Array

🌰
分別以不同的方式宣告型別 User

// A.
interface IUser { name: string }
interface IUser { age: number }

// B.
type TUser = { 
  name: string, 
  age: number
}

// C.
type RUser = 
  Record<'name', string> & 
  Record<'age', number>

此例中，IUser、TUser、RUser 三者完全等價

用 interface 宣告的那個並沒比較特別

這三個甚至都可被 implements
（https://pse.is/不騙你）

TypeScript 是🦆鴨子型別
（Duck Typing）

當看到一隻鳥走起來像🦆、
游泳起來像🦆、
叫起來也像🦆，
那麼這隻鳥就可以被稱為🦆

🌰

import Dialog from '@material-ui/core/Dialog'
 
interface Dialog { 
//        ^^^^^^  🥲 'Dialog' is already defined
  'delete': DialogContent,
  'deleteForbidden': DialogContent,
  'deactivate': DialogContent,
}

↓

interface DialogContents { /*...*/ } // 👍

🌰
MUI 的 Pagination 組件（節錄）

// @material-ui/lab/Pagination/Pagination.d.ts
 
interface PaginationProps {
  color?: 'primary' | 'secondary' | 'standard'
}
 
function Pagination(
  props: PaginationProps
): JSX.Element;

💡 可根據上下文
自行決定是否省略修飾語

🌰（節錄）

const handleClose = (
  event?: React.SyntheticEvent, // 🤔
  reason?: string               // 😑
) => {
  /* ... */
}

<Snackbar onClose={handleClose} />

怎麼找？

運氣好的話
你會看到這個已匯出的型別定義

匯入

import Snackbar, { SnackbarProps } 
  from '@material-ui/core/Snackbar'

指定 handler 的型別

const handleClose: SnackbarProps['onClose'] = (
  event,  // React.SyntheticEvent<any, Event>
  reason, // SnackbarCloseReason
) => {
  /* ... */
}

🎉 得到符合組件要求的參數型別

<Snackbar onClose={handleClose} />