---
# System prepended metadata

title: 5/1(金)
tags: [ノート]

---

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

# 5/1(金)

## Typescript

### any型

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

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

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

```typescript=
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型

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

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

### リテラル型

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

```typescript=
let apple: 'apple' = 'apple'
```

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

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

### typeエイリアス

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

### 関数に型をつける

```typescript=
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`などをインポートする必要がある。

```typescript=
import { ref, computed, onMounted } from 'vue'
```

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

```typescript=
export default {
  setup() {
   
  }
}
```

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

```typescript=
const count = ref(0)

function increment() {
  count.value++
}
```

### createApp

```typescript=
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`インスタンスとコンポーネントに影響を与えます。

```typescript=
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アプリケーションにスコープされています。そのため、予期しない影響を避けることができます。

### フラグメント

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

```html=
<template>
  <div>Hello</div>
  <div>World</div>
</template>
```

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

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

