Skip to content

Fix #630 - translate clarification about type exports in SFCs #631

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 7, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion src/api/sfc-script-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ const attrs = useAttrs()
`<script setup>` は、通常の `<script>` と一緒に使うことができます。次のことが必要な場合は、通常の `<script>` が必要になることがあります:

- `inheritAttrs` や、プラグインで有効になるカスタムオプションなど、`<script setup>` では表現できないオプションを宣言する
- 名前付きのエクスポートを宣言する
- 名前付きのエクスポートを宣言する (TypeScript の型を含む)
- 副作用を実行したり、一度しか実行してはいけないオブジェクトを作成する

```vue
Expand Down Expand Up @@ -265,6 +265,23 @@ const post = await fetch(`/api/post/1`).then(r => r.json())

## TypeScript のみの機能

### 追加タイプのエクスポート

上記のように、SFC から追加タイプをエクスポートするには、それらを `<script setup>` ブロックの隣の追加 `<script>` ブロックに移動する必要があります。

例:
```vue
<script lang="ts">
export type SizeOptions = 'small' | 'medium' | 'large';
</script>

<script lang="ts" setup>
defineProps({
size: { type: String as PropType<SizeOptions> },
})
</script>
```

### 型のみの props/emit 宣言

`defineProps` や `defineEmits` にリテラル型の引数を渡すことで、純粋な型の構文を使って props や emits を宣言することもできます:
Expand Down