#vue
https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api
## TypeScript
`reactive`を使う。`ref`を使用する方法もあるが落とし穴が多いため、多少冗長でも`reactive`がオススメ。
**reactiveの値は明示的に型指定しないと推論されない。**
```ts
import {
defineComponent,
reactive,
} from "@vue/composition-api";
export default defineComponent({
setup() {
// - Componentの状態はstateとして管理する
// - reactiveによって変更があった場合に必要な処理を実行できる
// - 以前の書き方だとdataに相当する
const state = reactive({
inputString: "0" as string,
inputNumber: 0 as number,
optional: null as string | null,
});
// 中略
return {
state,
}
}
```
```vue
<template>
{{ state.inputString }}
</template>
```