由於目前 HourlyForecast 和 DailyForecast 當中的 icon 設定部分都是重複的，看起來可以共用，因此我們可以將這部分抽出來，變成一個獨立的 config，這樣就可以避免重複的程式碼。

建立共用的 config

首先我們先建立一個 config 資料夾，並在裡面建立一個 weatherIconsConfig.ts 檔案：

$ mkdir src/config
$ touch src/config/weatherIconsConfig.ts

接下來我們把這兩個 component 中的 icon 設定部分抽出來，並且放到 weatherIconsConfig.ts 中：

import { ComponentType } from 'react'
import { AntDesign, Feather } from '@expo/vector-icons'

export type AntDesignNames = keyof typeof AntDesign.glyphMap
export type FeatherNames = keyof typeof Feather.glyphMap

export interface WeatherIconConfig {
  component: ComponentType<any>
  name: AntDesignNames | FeatherNames
  color: string
}

export const weatherIcons: Record<string, WeatherIconConfig> = {
  sunny: { component: Feather, name: 'sun', color: '#FFD700' },
  cloudy: { component: AntDesign, name: 'cloudo', color: '#cfd8e2' },
  rainy: { component: Feather, name: 'cloud-rain', color: '#a9b2bc' },
}

這個有關於 icon 的型別定義，以及判斷如何使用 icon 的部分，通通在這個檔案做一個管理，除了避免重複的程式碼之外，也可以讓我們在未來要新增 icon 的時候，可以更方便地管理。

使用 config

接下來我們就可以在 HourlyForecast 和 DailyForecast 當中使用這個 config 了：

import { weatherIcons } from '../config/weatherIconsConfig'

interface HourlyForecastProps {
  time: string
  icon: keyof typeof weatherIcons
  temp: string
}

const HourlyForecast: FC<HourlyForecastProps> = ({ time, icon, temp }) => {
  const IconComponent = weatherIcons[icon]?.component || AntDesign || Feather
  const iconName = weatherIcons[icon]?.name || 'question'
  const iconColor = weatherIcons[icon]?.color || '#ffffff'

  // 省略
}

export default HourlyForecast

import { weatherIcons } from '../config/weatherIconsConfig'

interface DailyForecastProps {
  day: string
  icon: keyof typeof weatherIcons
  tempHigh: string
  tempLow: string
}

const DailyForecast: FC<DailyForecastProps> = ({
  day,
  icon,
  tempHigh,
  tempLow
}) => {
  const IconComponent = weatherIcons[icon]?.component || AntDesign || Feather
  const iconName = weatherIcons[icon]?.name || 'question'
  const iconColor = weatherIcons[icon]?.color || '#ffffff'

  // 省略
  )
}

export default DailyForecast

這樣我們的專案就更加乾淨了，而且未來如果要新增 icon 的話，也可以直接在 weatherIconsConfig.ts 中新增，不用再去修改其他的程式碼。

在開始串接天氣 API 之前，我們需要先定位目前的所在地，明天見👋！