ts 構文は Vue3 でどのように機能しますか?

1. 親から子への値の受け渡しの使用法

父から息子へ: defineProps の TS 記述方法

// 父组件：和 vue2 一样正常传值
<template>
  <div class="login-page">
    <cp-nav-bar title="登录" right-text="注册"></cp-nav-bar>
  </div>
</template>

// 子组件：接收
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
  title: string
  rightText?: string // ？表示可传可不传
}>()
// js中使用
console.log(props.title)
</script>

<template>
  <!-- 模板中直接使用变量名 -->
  <van-nav-bar
    fixed
    left-arrow
    :title="title"
    :right-text="rightText"
  ></van-nav-bar>
</template>

補充:

withDefaults props のデフォルト値を設定する必要がある場合は、関数を使用する必要があります。

const props = withDefaults(defineProps<{
  title?: string
  rightText?: string
}>(),{
  title: '首页'
})

// 以上代码通过语法糖解构，可以优化成如下代码：
const { title, title= "首页" } = defineProps<{
  title?: string
  rightText?: string
}>();

息子から父へ：defineEmitsのTS書き方

// 子传
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

// 父组件：和 vue2 一样正常接收
// @changeMoney="方法名"

2. ref/reactive の TS 使用法

1. 単純なデータ型は ts 型を定義する必要がない

ref() データから型を暗黙的に推測します

// const money = ref<number>(10)

const money = ref(10)

2. 複合型の場合は、ジェネリックを使用することをお勧めします

type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])
list.value = [
  { id: 1, name: '吃饭', done: false },
  { id: 2, name: '睡觉', done: true }
]

3. 計算された TS 使用量

ジェネリックが推奨され、1 行で実行できます

const total = computed<string>(() => (count.value * 2).toFixed(2));

4. 非 null アサーション

1.オプションの連鎖

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const input = ref< HTMLInputElement | null >(null)

onMounted(()=>{
  // 如果获取的元素不是input,就可能没有value值
  console.log(input.value?.value);
})
</script>

<template>
  <div>App组件</div>
  <input type="text" ref="input" value="abc">
</template>

2. 非 null アサーション

  // 一定要确定不为空！！！
  console.log(input.value!.value)
  input.value!.value = '123'

5、カスタム TypeScript 型宣言ファイル

1. JS ファイルに型を提供する

.js ファイルをインポートすると、TS は .js と同じ名前の .d.ts ファイルを自動的に読み込み、型宣言を提供します。

具体的な手順は次のとおりです。

1.declare キーワード: 型宣言に使用され、新しい変数を作成する代わりに、別の場所 (.js ファイルなど) に既に存在する変数の型を宣言します。

2. 明らかに TS タイプ (TS でのみ使用される) のものについては、 declare キーワードtype interface を使用できます。省略

3. その他の JS 変数については、 declare キーワードを使用して、これが型宣言に使用されることを明確に指定する必要があります。

// 参考示例:自定义组件的类型,必须是同名的.d.ts文件
import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
  interface GlobalComponents {
    CpIcon: typeof CpIcon
  }
}

2.シェアリングタイプ

.ts 複数のファイルで同じ型を使用している場合、.d.ts この型を提供するファイルを作成することで型共有を実現できます。

1. index.d.ts 型宣言ファイルを作成します。

2. 共有する必要がある型を作成し、 export エクスポートを使用します (TS の型を使用して import/export モジュラー機能を実現することもできます)。

3.共有タイプを使用する必要があるファイルでは .ts 、 import それをインポートできます（.d.ts サフィックスがインポートされる場合、それは直接省略されます）。

ts 構文は Vue3 でどのように機能しますか?

おすすめ