Setting up TypeScript in Vue project - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a TypeScript variable in a Vue

Vue

<script setup lang="[1]">
const message: string = 'Hello Vue with TypeScript'
</script>

Drag options to blanks, or click blank then click option'

Ajsx

Bjs

Cts

Dvue

Attempts:

3 left

💡 Hint

Common Mistakes

Using lang="js" instead of lang="ts"

Omitting the lang attribute

Using lang="vue" which is invalid

To use TypeScript in Vue's <script setup> block, set lang="ts".

2fill in blank

medium

Complete the code to import the reactive function from Vue in a TypeScript setup.

Vue

<script setup lang="ts">
import { [1] } from 'vue'
const state = reactive({ count: 0 })
</script>

Drag options to blanks, or click blank then click option'

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'ref' instead of 'reactive'

Forgetting to import reactive

Using 'watch' when not needed

The reactive function creates a reactive object in Vue.

3fill in blank

hard

Fix the error in the TypeScript interface declaration for props in a Vue component.

Vue

<script setup lang="ts">
interface Props {
  title: [1]
}
const props = defineProps<Props>()
</script>

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number instead of string for text props

Using any which loses type safety

Omitting the type causing errors

The title prop should be a string type to hold text.

4fill in blank

hard

Fill both blanks to correctly define a reactive object with typed properties in Vue with TypeScript.

Vue

<script setup lang="ts">
import { [1] } from 'vue'
interface State {
  count: [2]
}
const state = reactive<State>({ count: 0 })
</script>

Drag options to blanks, or click blank then click option'

Areactive

Bref

Cnumber

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ref instead of reactive

Using string type for count

Not typing the interface

Use reactive to create a reactive object and number as the type for count.

5fill in blank

hard

Fill all three blanks to correctly define a computed property with TypeScript in Vue.

Vue

<script setup lang="ts">
import { reactive, [1] } from 'vue'
const state = reactive({ count: 1 })
const doubleCount = [2](() => state.count [3] 2)
</script>

Drag options to blanks, or click blank then click option'

Aref

Bcomputed

C*

D**

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of computed

Using ** which is exponentiation, not multiplication

Not importing computed

Use computed to create a computed property and multiply count by 2 using *.