読書時間: 10分
この記事の内容：Vue3でtsを使う時の色々な書き方を記録します。
タイプケース
vue3 + ts プロジェクトでは、しばらくの間、型が大文字と小文字になります。
基本型との見分け方は? 文字列、文字列、数値、数値、ブール値、ブール値…
-
たとえば、js では
string 与 String、後者は前者のパッケージ化オブジェクトであり、他の型も同じ意味を持ちます。 -
ts を
string 与 String例にとると、前者は ts の型、後者は js のオブジェクトであり、他の型も同じ意味を持ちます。
結論: ts でパラメータの型を定義するには小文字を使用してください(例: title: String の代わりに title: string を定義します)。
<script setup lang="ts">
interface DialogOptions {
title: string; // 小写
visible?: boolean; // 小写
}
const props = defineProps<DialogOptions>();
</script>
props タイプの制約
props タイプの制限を記述する方法は 4 つあります。
1.(推荐)最初にインターフェースを定義してから、
欠陥: デフォルト値を定義できない
<script setup lang="ts">
interface DialogOptions {
title: string;
visible?: boolean;
callback: (row: any) => any;
}
const props = defineProps<DialogOptions>();
</script>
2.(不推荐)汎用制約タイプを直接使用する
短所: 書くのが複雑すぎる
<script setup lang="ts">
const props = defineProps<{
title: string;
visible?: boolean;
callback: (row: any) => any;
}>();
</script>
3.(推荐)まずインターフェイスを定義し、Vue3 フレームワークと組み合わせてwithDefaults()型を制約します
適用対象: 定義可能なデフォルト値
<script setup lang="ts">
interface DialogOptions {
title?: string;
visible?: boolean;
callback: (row: any) => any;
}
const props = withDefaults(defineProps<DialogOptions>(), {
title: "dialog title",
visible: false,
});
</script>
4. (不推荐)vue2 と同じ書き方を維持します。Vue3フレームワークが提供するマクロ機能を利用defineProps()組み込みの型推論機能
利点: この記述方法は Vue2 の記述方法と一致していますが、type の値は大文字にする必要があります。大文字と小文字が混在すると、認知エラーが発生しやすくなります
<script setup lang="ts">
const props = defineProps({
title: {
type: String, // 大写
default: "Dialog",
required: true,
},
visible: {
type: Boolean, // 大写
default: false,
required: false,
},
callback: {
type: Function, // 大写
default: () => {
},
required: false,
},
});
</script>
4. (......)validor を使用して props パラメータを検証する
validator値を制約するために使用する必要がある場合は、このメソッドを使用し、単独で使用することはできません (良い方法があればコメントを残してください)
<script setup lang="ts">
const props = defineProps({
title: {
type: String as PropType<"提示" | "弹窗" | "确认框">,
default: "提示",
validator: (prop: string) => ["提示", "弹窗", "确认框"].includes(prop),
},
visible: {
type: Boolean,
default: false,
required: false,
},
callback: {
type: Function,
default: () => {
},
required: false,
},
});
</script>
放出タイプの制約
- 配列の使用法 (型を制約できない)
<script setup lang="ts">
// 申明
const emit = defineEmits(["receiveData"]);
// 使用
const clickButton = () => {
emit("receiveData", "456");
};
</script>
- オブジェクトの使用法 (型を制約できない)
<script setup lang="ts">
const emit = defineEmits({
receiveData: (payload) => {
return typeof payload === "string";
},
});
// 使用
const clickButton = () => {
emit("receiveData", 123456);
};
</script>
ref 型の制約
- 一般的な制約を介して
<script setup lang="ts">
interface ReceiveData {
value: number;
}
const year = ref<ReceiveData>({
value: 2023 });
console.log(year.value);
</script>
- 値による制約
<script setup lang="ts">
interface ReceiveData {
value: number;
}
const year: Ref<ReceiveData> = ref({
value: 2023 });
console.log(year.value);
</script>
リアクティブ型制約
<script setup lang="ts">
interface ReceiveData {
value: number;
}
// 1. 通过泛型约束
const year = reactive<ReceiveData>({
value: 2023 });
console.log(year);
// 2. 通过值约束
const year: ReceiveData = reactive({
value: 2023 });
console.log(year);
</script>