Younho9 Notes2022-09-28
TODO
- tailwindcss-line-clamp 설치
- 패키지의 node 버전 / packageManager 명시하기
- vue-demi를 사용한 vue2 / vue3 동시 지원
Learning
Vue 3 + TypeScript #vue #typescript
TypeScript의 --preserveValueImports
타입스크립트가 import를 사용하고 있는지를 감지하지 못하는 몇 가지 케이스가 있다.
js
import {Animal} from './animal.js';
eval('console.log(new Animal().isDangerous())');
import {Animal} from './animal.js';
eval('console.log(new Animal().isDangerous())');
기본적으로 타입스크립트는 항상 사용하지 않는 것처럼 보이는 import문을 제거한다.
TypeScript 4.5부터는 --preserveValueImports 플래그를 지원한다. 이는 모든 imported values를 타입스크립트가 제거하지 못하도록 막는다.
이는 Svelte와 Vue에서 다음과 같이 자주 나타난다.
svelte
<!-- A .svelte File -->
<script>
import { someFunc } from "./some-module.js";
</script>
<button on:click={someFunc}>Click me!</button>
<!-- A .svelte File -->
<script>
import { someFunc } from "./some-module.js";
</script>
<button on:click={someFunc}>Click me!</button>
vue
<!-- A .vue File -->
<script setup>
import {someFunc} from './some-module.js';
</script>
<button @click="someFunc">Click me!</button>
<!-- A .vue File -->
<script setup>
import {someFunc} from './some-module.js';
</script>
<button @click="someFunc">Click me!</button>