Vue3 + TS

Vue3全面可以無縫搭配TS寫法，不用再安裝其他有的沒有的套件！
(超棒！)

在Vue裡面使用TS就是在這邊宣告： <sciprt lang="ts">
以下全部是Composition API + setup 寫法： <sciprt lang="ts" setup>

引用修改自官方文件

基本變數宣告

在template的鬍子裡面使用as
或是在script裡面使用Union Type

//也可以用在template
<template>
  {{ (x as number).toString() }}
</template>

<script setup lang="ts">

let x: string | number = 1

</script>

Props

有run-time declaration & type declartion 兩種。
就算是type declartion，Vue 也會在runtime時就幫你編譯。
目前看不出誰好誰壞，但我比較喜歡type declartion。

可參考官方說法。

<script setup lang="ts">
//Props
// run-time Declaration
const props = defineProps({
  africaCountry: { type: String, required: true, default: 'Egypt' },
  population: Number
})

//type declaration
//目前覺得這個比較好用，提示的錯誤比較少
const props = defineProps<{
  africaCountry: string
  population?: number
}>()

//with default
interface Props {
  africaCountry: string
  population?: number
}

// 也可以用解構的寫法先賦值
const { africaCountry = "Egypt", population} = defineProps<Props>()

</script>

Emits

一樣有runtime & type 的宣告方式。
使用type的方式可以比較詳細宣告類型。不然runtime是自動檢查。

// runtime 運行時聲明
const emit = defineEmits(['change', 'update'])

// type-based
// 指定我們傳入參數的類型(如傳入：country)，和回傳的類型(void = 沒有回傳東西)
const emit = defineEmits<{
  (e: 'change', country: string): void
  (e: 'update', country: string): void
}>()

Ref & Reactive

Ref和Reactive會自動使用一開始宣告的type。

//1. 沒有特別指定類型
// inferred type: Ref<number>
const year = ref(2022)

// inferred type: { title: string }
const book = reactive({ title: 'Egypt is based in nothern Africa' })

//default值是數字，Vue會直接使用這個當作類型，
//所以當我們要改值為string時，會出現TS error
// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = 'I am a string'


//2.特別指定類型
const year: Ref<string | number> = ref('2020') 
//等於以上的寫法
//const year = ref<string | number>('2020')

year.value = 2020 // ok!


//如果一開始沒有指定值的話，會自動加上undefined成為Union type 
// inferred type: Ref<number | undefined>
const n = ref<number>()

//使用interface宣告reactive的類型
interface Country {
    name: string
    population?: number
}

const africaCountry: Country = reactive({ name: 'Egypt is based in nothern Africa' })

Event

擷取自官方文檔。

function handleChange(event: Event) {
  console.log((event.target as HTMLInputElement).value)
}

Computed

擷取自官方文檔。

import { ref, computed } from 'vue'

const count = ref(0)

// inferred type: ComputedRef<number>
const double = computed(() => count.value * 2)

// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

const double = computed<number>(() => {
  // type error if this doesn't return a number
})

環遊非洲第11天--埃及

想到埃及，就想到四大古文明和金字塔，好像大概知道他的位置，但沒有仔細想過...埃及居然也在非洲大陸上！！

擁有上千年歷史的埃及，以撒哈拉沙漠為界線，位在非洲北方，屬於非洲大陸上的「北非」。地緣政治上，也屬於「中東」最東方的一環。
等等，中東？原來埃及也是阿拉伯世界的一個國家。
埃及人口一億多，是非洲大陸人口第3大國家，阿拉伯國家人口第一大，大部分人卻住在5%的領土上。
由於國內95%是乾旱貧脊的沙漠地帶，大多數的人口集中在尼羅河的下游三角洲地帶。