Tag Archives: typescript

[Solved] Vue3 Error: Failed to resolve component:xxx

I use vite+typescript+pinia to develop the vue3 project, because I have just come into contact with this problem recently. Look at the code first:

<script lang="ts" setup name="XtxMore">
</script>
<template>
  <RouterLink
    to="/"
    class="xtx-more"
  >
    <span>
      <slot>Check All</slot>
    </span>
    <i class="iconfont icon-angle-right"></i>
  </RouterLink>
</template>

At this time, an error will be reported in the console:

This is because when we name the component, that is, when we add the name attribute to the component, there is no content in the script tag, which will lead to the failure of parsing and the error will be reported.

Just add something in the script tag

<script lang="ts" setup name="XtxMore">
defineProps()
</script>
<template>
  <RouterLink class="xtx-more">
    <span>
      <slot>Check All</slot>
    </span>
    <i class="iconfont icon-angle-right"></i>
  </RouterLink>
</template>

 

[Solved] tsc execute error in VSCode Terminal

Premise: node and typescript are installed

Error: execute TSC xxx.ts in vscode, an error will be reported.

Solution: the execution mechanism of vscode is limited. Just change the execution mechanism

Exit vscode and run as administrator.
step 1:
execute get-ExecutionPolicy and return Restricted, which means it is restricted.
step 2:
execute  set-ExecutionPolicy RemoteSigned
step 3:
execute get-ExecutionPolicy and return RemoteSigned

Perform the above steps and execute TSC xxx.ts again is OK

 

[Solved] error TS1086: An accessor cannot be declared in an ambient context

error TS1086: An accessor cannot be declared in an ambient context

Error ts1086 error resolution

After the NPM package is installed, an error is reported when running the project.

The error information is as follows

ERROR in node_modules/xxx/xxx/xxxx.d.ts(15,9): error TS1086: An accessor cannot be declared in an ambient context.

Solution:

Modify tsconfig.json file

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

[Solved] Router Pinia error: getActivePinia was called with no active Pinia. Did you forget to install pinia

Router Pinia error: getActivePinia was called with no active Pinia. Did you forget to install pinia
Solution:1. First create the store TS file

import { createPinia } from "pinia";
const pinia = createpinia();
export default pinia;
Instead of the kind of form created in main.ts.

2. Import in Mian.ts

// Alternative to the traditional direct import in main.ts
import { createApp } from "vue"
import App from './App.vue'
import pinia from "./store/store"

const app = createApp(App)
app.use(pinia)

3. Using Pinia in router.ts

import { createRouter, createWebHistory } from 'vue-router'
import pinia from '../store/store' 
import { useUser} from "../store/useUser"
const store = useUser(pinia)  // Make sure to pass in pinia here
console.log(store) 
After that, you can use the methods and properties of the store as you like

eslint Error: Delete `␍` [How to Solve]

reason

Due to the end of line style configuration, endoofline configuration has the following four options:
lf – line feed only (\n), which is common in Linux, MacOS and git repos
CRLF – carriage return + line feed character (\r \n), and windows
CR – carriage return character only (\r), Rarely use
auto – keep the existing end of the line (the mixed values in a file are standardized by looking at the content used after the first line)

Solution:

Configure endOfLine: ‘auto’ in prettier.config.js:

module.exports = {
  semi: false, // unterminated semicolon
  singleQuote: true, // single quotes
  quoteProps: 'as-needed',
  trailingComma: 'none', // final comma
  
 // The point is that this one should be configured as auto
  endOfLine: 'auto'
}

VSCode Terminal Execute tsc Commands Error [Solved]

1. Problem description

When the vscode terminal executes the TSC instruction to compile the TS document, an error is reported as follows:

2. Causes of problems

Vscode terminal cannot use command

3. Solutions

1. Right click the vscode icon and select run as administrator;

2. Run code on vscode terminal

get-ExecutionPolicy

Restricted is displayed, indicating that the terminal is prohibited from using the command;

3. Rerun the code

set-ExecutionPolicy RemoteSigned

4. Execute again at this time

get-ExecutionPolicy

If remotesigned is displayed, it means that the terminal command can be used

4. Implementation effect

How to Solve forEach cannot exit the loop Issue

The forEach loop in the array will report an error if you want to exit the whole loop using break, and return will not jump out of the loop. In other words, the forEach traversal cannot be terminated.

Solution:

Iterate through for to achieve

    let arr = ['1', '2', '3', '4', '5'];
     for(let i=0; i<arr.length; i++) {
       if(arr[i] == '3') break;
       console.log(arr[i]) // 1 2
     }

Implemented by try--catch throwing exceptions

    let arr = ['1', '2', '3', '4', '5'];
    try {
      arr.forEach((item, index) => {
        if (item === '3') {
          throw new Error('End')
        }
        console.log(item) // 1 2 
      })
    } catch (e) {
      if (e.message === 'End') throw e;
    }

Implemented via reduce iteration, with an interrupt flag set

    let arr = ['1', '2', '3', '4', '5'];
    arr.reduce(function (p, c) {
      if (c == '3') {
        this.break = true
      }
      if (this.break) {
        return
      }
      console.log(c) // 1 2
    }, '')