Tips
Destructuring with assignment
const person = { fullName: "David" };
const { fullName: name } = person;
console.log(name); // => David
Import and re-export a default export in a single line
// utilities/index.js
export { default as dates } from "./dates";
// in another file
import { dates } from "<some-path>/utilities";
Vue script setup prop typing with default values and complex types
<script setup lang="ts">
import { reactive } from "vue";
type Size = "sm" | "md" | "lg";
interface Props {
primary?: boolean;
size?: Size;
}
const props = withDefaults(defineProps<Props>(), {
primary: false,
size: "md",
});
const { primary, size } = reactive(props);
</script>
Vue options API prop typing
<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
name: "MyComponent",
props: {
type: String as PropType<string>, // cast to typescript type,
default: "box",
},
});
</script>