search

shldhee / auth-vue3-ts

0 stars 0 forks source link

vue typescript #5

Open shldhee opened 2 years ago

shldhee commented 2 years ago 
const count = ref(0);
Ref<number> 자동 타입추론

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import fetchCount from './fetchCount' // a mock fetch function

interface AppInfo {
  name: string
  slogan: string
}

const appInfo: AppInfo = reactive({
  name: 'Counter',
  slogan: 'an app you can count on'
})

const count = ref<number | null>(null)

onMounted(() => {
  fetchCount((initialCount) => {
    count.value = initialCount
  })
})

<script>

<template>
  <div>
    <h1>{{ appInfo.name }}</h1>
    <h2>{{ appInfo.slogan }}</h2>
  </div>
  <p>{{ count }}</p>
</template>

Child Component Props

// App.vue
<script setup lang="ts">
import { reactive } from 'vue'
import Counter from './components/Counter.vue'

interface AppInfo {
  name: string
  slogan: string
}

const appInfo: AppInfo = reactive({
  name: 'Counter',
  slogan: 'an app you can count on'
})

</script>

<template>
  <div>
    <h1>{{ appInfo.name }}</h1>
    <h2>{{ appInfo.slogan }}</h2>
  </div>
  <Counter 
    :limit="10" 
    :alert-message-on-limit="'can not go any higher'"
  ></Counter>
</template>

// Counter.vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import fetchCount from '../services/fetchCount'

interface Props {
  limit: number
  alertMessageOnLimit?: string
}

const props = defineProps<Props>()

const count = ref<number | null>(null)

onMounted(() => {
  fetchCount((initialCount) => {
    count.value = initialCount
  })
})

function addCount(num: number) {
  if (count.value !== null) {
    if (count.value >= props.limit) {
      alert(props.alertMessageOnLimit)
    }
    else {
      count.value += num
    }
  }
}

</script>

<template>
  <p>{{ count }}</p>
  <p>
    <button @click="addCount(1)">Add</button>
  </p>
</template>

default props

// no default
interface Props {
  limit: number
  alertMessageOnLimit?: string
}

const props = defineProps<Props>()

// default props value
interface Props {
  limit: number
  alertMessageOnLimit?: string
}

const props = withDefaults(defineProps<Props>(), {
  alertMessageOnLimit: 'can not go any higher'
})

emit

// Counter
function addCount(num: number) {
  if (count.value !== null) {
    if (count.value >= props.limit) {
      alert(props.alertMessageOnLimit)
    }
    else {
      count.value += num
    }
  }
}

</script>

<template>
  <p>{{ count }}</p>
  <AddButton 
    @add-count="addCount"
    @reset-count="count = 0"
  ></AddButton>
</template>

// AddButton
<script setup lang="ts">

const emit = defineEmits<{ 
  (event: 'add-count', num: number): void  
  (event: 'reset-count'): void 
}>()

</script>

<template>
  <p>
    <button @click="emit('add-count', 1)">Add</button>
    <button @click="emit('reset-count')">Reset</button>
  </p>
</template>
shldhee commented 2 years ago

defineEmits undefined

eslint
{
  env: {
     'vue/setup-compiler-macros': true
  },

}