###### tags: `ノート`

# 5/1(金)

## Typescript

### any型

anyを付けたらjavascriptのような型になる

### Enumを使って、特定のまとまったグループのみを受け入れる列挙型を使う方法

特定のまとまったグループのみを受け入れる型

enum CoffeeSize {
  SHORT = 'SHORT',
  TALL = 'TALL',
  GRANDE = 'GRANDE',
  VENTI = 'VENTI'
}

const coffee = {
  hot: true,
  size: CoffeeSize.TALL
}

coffee.size = 400 // エラー
coffee.size = CoffeeSize.SHORT // エラーではない

### Union型

複数の型を使えるようにしたい時に使う

let unionType: number | string = 32
let unionTypes: (number|string)[] = ["Hello", 20]

### リテラル型

特定の値しか入れられないようにしたい

let apple: 'apple' = 'apple'

`const`で定義した場合はリテラル型になる

const apple = 'apple'
apple = 'orange' // エラー

### typeエイリアス

type FruitsType = 'Orange' | 'Apple' | 'Banana'
let fruit: FruitType = 'Orange'

### 関数に型をつける

function add(num1: number, num2: number): number {
  return num1 + num2 
}

## Vue.js 3.0

### [Composition API](https://vueschool.io/articles/vuejs-tutorials/exciting-new-features-in-vue-3/)

Composition APIはコンポーネントプロパティを関数として後悔しているため、`ref`や`computed`, `onMounted`などをインポートする必要がある。

import { ref, computed, onMounted } from 'vue'

`setup`メソッドは関数をテンプレート返す関数です。

export default {
  setup() {
   
  }
}

`ref`メソッドはリアクティブプロパティを宣言するために使用します。参照するには`value`を参照する必要があります。

const count = ref(0)

function increment() {
  count.value++
}

### createApp

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

new Vue({
  render: h => h(App)
}).$mount('#app')

現在は、グローバル`Vue`オブジェクトに変更を加え、`Vue`インスタンスを生成しています。これは全ての`Vue`インスタンスとコンポーネントに影響を与えます。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount('#app')

`createApp`メソッドを使用した場合、定義された特定のVueアプリケーションにスコープされています。そのため、予期しない影響を避けることができます。

### フラグメント

次のようなコンポーネントは作成できません。

<template>
  <div>Hello</div>
  <div>World</div>
</template>

理由は、Vueコンポーネントを表すVueインスタンスが単一のDOM要素にバインドされる必要があるためです。

フラグメントを使用した場合、無駄なDOMを生成しなくてすみます。