📍composables
/composables 폴더에 기능 단위로 파일을 만들고 내부에서 use + 파스칼 케이스의 함수를 선언하고 개별 named export
- 예시) /composables/math.ts 생성
export function useSum(x: number, y: number) {
return x + y;
}
// 화살표 함수 사용 가능
export const useMultiply = (x: number, y: number) => {
return x * y;
};
export function useMinus(x: number, y: number) {
return x - y;
}
export function useMyNumber() {
// util 호출 가능
return MY_NUMBER;
}
/pages/math.vue 에서 composable 사용
- auto import 동작하므로 import 필요 없음!
- IDE에서 모듈을 찾을 수 없다고 한다면 개발서버 실행해주면 됨(yarn dev)
<template>
<div>
<div>
<h2>Composable Test</h2>
<h2>one: {{ one }}</h2>
<h2>four: {{ four }}</h2>
<h2>zero: {{ zero }}</h2>
<h2>777: {{ myNumber }}</h2>
</div>
</div>
</template>
<script setup lang="ts">
const one = useSum(0, 1);
const four = useMultiply(2, 2);
const zero = useMinus(5, 5);
const myNumber = useMyNumber();
</script>
utils 와 차이점
- composable은 util을 호출할 수 있음
- Vue Composable을 보관하는 용도
📍utils, types
- /utils 폴더에 기능 단위로 파일을 만들고 내부에서 자유롭게 named export
- /composables 와 똑같지만, composable은 use~ 함수만 가능, util은 함수 뿐만 아니라 모든 값 가능
- 예시) utils/math.ts 생성
export function sum(x: number, y: number) {
return x + y;
}
export const multiply = (x: number, y: number) => {
return x * y;
};
export const MY_NUMBER = 777;
/pages/math.vue 에서 util 사용
<template>
<div>
<div>
<h2>Composable Test</h2>
<h2>one: {{ one }}</h2>
<h2>four: {{ four }}</h2>
<h2>zero: {{ zero }}</h2>
<h2>777: {{ myNumber }}</h2>
</div>
<div>
<h2>Util Test</h2>
<h2>seven: {{ seven }}</h2>
<h2>ten: {{ ten }}</h2>
<pre>{{ numberGroup }}</pre>
</div>
</div>
</template>
<script setup lang="ts">
const one = useSum(0, 1);
const four = useMultiply(2, 2);
const zero = useMinus(5, 5);
const myNumber = useMyNumber();
const seven = sum(2, 5);
const ten = multiply(1, 10);
const numberGroup = ref<AppMath.NumberGroup>({ one: 1, two: 2 });
onMounted(() => {
numberGroup.value.one = 11111;
numberGroup.value.two = 22222;
});
</script>
utils 에서 type이나 interface는 auto import 되지 않음
- 별도의 /types 폴더를 만들어서 type을 보관한다면, .d.ts를 사용해야 한다
(auto import 이외의 별도의 내부적 import 사용하면 예상치 못한 결과를 낳을 수 있음, 단, node_modules 에서 import는 괜찮음)
- 참고 링크
https://github.com/nuxt/nuxt/discussions/17527
/types/math.d.ts 생성
- namespace를 활용해서 혹시 모를 충돌을 줄이는 편이 좋을 듯 하다
declare namespace AppMath {
interface NumberGroup {
one: number;
two: number;
}
}