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 *.

Practice

1. What is the main benefit of using TypeScript in a Vue project?

easy

A. It helps catch errors early and improves code clarity.

B. It automatically styles your components.

C. It replaces Vue's template syntax with HTML.

D. It removes the need for JavaScript entirely.

Solution

1. Step 1: Understand TypeScript's role

   TypeScript adds static typing to JavaScript, helping catch errors before running code.

2. Step 2: Relate to Vue projects

   Using TypeScript in Vue improves code clarity and reduces runtime bugs.

3. Final Answer:

   It helps catch errors early and improves code clarity. -> Option A

4. Quick Check:

   TypeScript improves code safety = A [OK]

Hint: TypeScript catches errors before running code [OK]

Common Mistakes:

• Thinking TypeScript styles components
• Confusing TypeScript with HTML templates
• Believing TypeScript removes JavaScript

2. Which command is used to create a new Vue project with TypeScript support?

easy

A. vue create project --typescript

B. npm create vue@latest and select TypeScript option

C. npm install vue typescript

D. vue add typescript

Solution

1. Step 1: Identify the official Vue CLI command

   The recommended way is using npm create vue@latest to start a new project.

2. Step 2: Select TypeScript during setup

   During the interactive setup, you choose TypeScript to enable it.

3. Final Answer:

   npm create vue@latest and select TypeScript option -> Option B

4. Quick Check:

   Use npm create vue@latest for new Vue projects [OK]

Hint: Use npm create vue@latest and pick TypeScript [OK]

Common Mistakes:

• Using old vue CLI commands
• Trying to install TypeScript separately after project creation
• Confusing add commands with create commands

3. Given this Vue component script tag, what is missing to enable TypeScript?

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

medium

A. Wrap the export in a defineComponent call

B. Change data() to setup()

C. Add type="module" to the <script> tag

D. Add lang="ts" attribute to the <script> tag

Solution

1. Step 1: Identify how to enable TypeScript in Vue scripts

   Vue requires lang="ts" on the <script> tag to treat it as TypeScript.

2. Step 2: Check other options

   Changing to setup() or adding type="module" does not enable TypeScript automatically.

3. Final Answer:

   Add lang="ts" attribute to the <script> tag -> Option D

4. Quick Check:

   Use lang="ts" to enable TypeScript [OK]

Hint: Add lang="ts" to script tag for TypeScript [OK]

Common Mistakes:

• Forgetting lang="ts" on script tag
• Confusing setup() with TypeScript enabling
• Assuming type="module" enables TypeScript

4. You added lang="ts" to your Vue component but get errors about missing types. What is the likely cause?

medium

A. You forgot to create or configure tsconfig.json in the project root.

B. You need to remove lang="ts" to fix errors.

C. Vue does not support TypeScript in single file components.

D. You must rename the file extension to .ts instead of .vue.

Solution

1. Step 1: Understand TypeScript configuration needs

   TypeScript requires a tsconfig.json file to know how to compile and check types.

2. Step 2: Check other options

   Removing lang="ts" disables TypeScript, Vue supports TypeScript in .vue files, and renaming files is not needed.

3. Final Answer:

   You forgot to create or configure tsconfig.json in the project root. -> Option A

4. Quick Check:

   tsconfig.json is required for TypeScript setup [OK]

Hint: Create tsconfig.json to avoid missing type errors [OK]

Common Mistakes:

• Removing lang="ts" instead of fixing config
• Thinking Vue disallows TypeScript in .vue files
• Renaming .vue files to .ts incorrectly

5. You want to use TypeScript in a Vue 3 project with the Composition API. Which setup is correct for the script block?

hard

A. <script lang="js" setup>
import { ref } from 'vue'
const count = ref(0)
</script>

B. <script>
import { ref } from 'vue'
const count = ref(0)
</script>

C. <script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
</script>

D. <script lang="ts">
export default {
data() { return { count: 0 } }
}
</script>

Solution

1. Step 1: Identify TypeScript and Composition API usage

   Using lang="ts" setup enables TypeScript and Composition API syntax in Vue 3.

2. Step 2: Check other options

   The version with lang="js" setup uses JavaScript not TypeScript, the plain <script> lacks the lang="ts" attribute, and the one using export default with data() is Options API, not Composition API.

3. Final Answer:

   <script lang="ts" setup> with ref import and usage -> Option C

4. Quick Check:

   Use lang="ts" setup for Composition API with TypeScript [OK]

Hint: Use

Common Mistakes:

• Omitting lang="ts" for TypeScript
• Using lang="js" instead of lang="ts"
• Mixing Options API with Composition API syntax