>source

저는 현재 웹팩 프로젝트에서 Typescript와 함께 Vue.js를 사용하고 있습니다.

에 표시된 대로 권장 구성tsconfig.json나는 가지고있다:

"엄격한": 참,

내 구성 요소 중 하나에는 다음이 있습니다.

declare interface Player {
    cod: string,
    param: string
  }
export default Vue.extend({
    name: 'basecomponent',
    data() {
      return {
        players: []
      };
    },
    created()
      let self= this
      axios.get('fetch-data')
        .then((response)=> {
          let res: Players[]= response.data;
          for(let i= 0; i < res.length; i++){
              self.players.push(res[i]);
          }
        })
        .catch((error: string)=> {
          console.log(error);
       });
    },
 });

하지만 컴파일하려고 하면 다음과 같은 결과가 나타납니다.

error TS2345: Argument of type 'Player' is not assignable to parameter of type 'never'.

믿으니까선수: []가지다절대[]유형.

제 질문은: Vue 데이터 개체 속성 유형을 어떻게 유추할 수 있습니까?

  • 답변 # 1

    앞으로 누군가 이 문제를 겪을 경우를 대비하여 여기 내 문제를 해결한 답변이 있습니다. 조금 더 "장난적"이지만 내부의 모든 곳에서 형식 추론을 적절하게 수행합니다.Vue.extend()구성 요소 정의:

    interface Player {
      cod: string,
      param: string
    }
    //Any properties that are set in the `data()` return object should go here.
    interface Data {
      players: Player[];
    }
    //Any methods that are set in the "methods()" should go here.
    interface Methods {}
    //Any properties that are set in the "computed()" should go here.
    interface Computed {}
    //Any component props should go here.
    interface Props {}
    export default Vue.extend<Data, Methods, Computed, Props>({
        name: 'basecomponent',
        data() {
          return {
            players: []
          };
        },
        //You probably will want to change this to the "mounted()" component lifecycle, as there are weird things that happen when you change the data within a "created()" lifecycle.
        created() {
          //This is not necessary.
          //let self= this
          //If you type the Axios.get() method like this, then the .data property is automatically typed.
          axios.get<Players[]>('fetch-data')
            .then(({ data })=> {
              //This is not necessary.
              //let res: Players[]= response.data;
              //for(let i= 0; i < data.length; i++){
              // self.players.push(data[i]);
              //}
              this.players= data;
            })
            .catch((error: string)=> {
              console.log(error);
           });
        },
     });

  • 답변 # 2

    code를 짧게 유지하면서 일반적인 구문에 더 가까운 다른 방법을 찾았습니다.

    data() {
      return new class {
        players: Player[]= []
      }();
    },
    

    이것은 틀림없이 가장 좋은 방법입니다. 약식 구문으로 유형을 선언하고 한 줄에 값을 할당하는 것입니다. as를 사용하면 형식 강제 변환이 수행되지만 아마도 원하는 것은 아니지만 new Array()는 T[]의 일반(제네릭 사용) 구문입니다.

    Paul-Sebastian Manole2021-09-20 07:01:59
  • 답변 # 3

    작동해야 합니다.

    declare interface Player {
      cod: string,
      param: string
    }
    declare interface BaseComponentData {
      players: Player[]
    }
    export default Vue.extend({
      name: 'basecomponent',
      data(): BaseComponentData {
        return {
          players: []
        };
      },
    })
    

  • 답변 # 4

    Joshua의 답변에 추가하려면 데이터가 커질수록 code가 너무 장황해지지 않도록 플레이어 유형을 인라인으로 선언할 수 있습니다.

    data() {
      return {
        players: [] as Player[]
      };
    },
    

    다른 옵션:

    data() {
      return {
        players: new Array<Player>()
      };
    },
    

    예외적으로, 최소한 내 바닐라 설정에서는 경고가 나타납니다. 클래스 메서드 'data'는 'private', 'public' 또는 'protected'로 표시되어야 합니다. 나는 우리가 그것의 앞에 get을 떨어뜨린다고 가정합니까?

    Mark2021-09-20 01:45:11

    이제 이 접근 방식으로 '객체 리터럴에 대한 형식 어설션' 오류가 발생합니다. @ore4444의 아래 접근 방식은 이제 최신 권장 사항입니다.

    user740912021-09-20 04:52:23
  • 답변 # 5

    '<> ' 구문은 금지되어 있습니다. 대신 'as' 구문을 사용하십시오.

    다음과 같이 표시됩니다.

    players: [] as Player[]
    

    '<>' 구문이 금지된다는 주장을 뒷받침하는 참조할 수 있는 출처가 있습니까?

    nomadoda2021-09-19 23:06:47

    @nomadoda 그것은 금지되어 있지 않습니다. 제 생각에는 Илья Карев가 TSlint가 유형 캐스팅에 사용에 대해 경고하고 있다고 생각합니다. T 구문으로 myVar를 선호해야 하는 이유는 JSX 지원이 부족하기 때문입니다. TypeScript 문서 typescriptlang.org/docs/handbook/jsx.html에서 읽을 수 있습니다.

    Hans Koch2021-09-19 23:21:11
  • 답변 # 6

    당신의데이터메서드에 선언되지 않은 반환 값이 있습니다.

    제공하는 경우 TypeScript는선수.

    확장하기만 하면데이터() {선.

    예:

    data() {
      return {
        players: []
      };
    },
    

    다음이 되어야 합니다.

    data() : {
      people: Array<any>, //if possible, replace `any` with something more specific
    } {
      return {
        players: []
      };
    },
    

    타다! 플레이어는 이제 모든 유형의 배열입니다.

    제안된 솔루션을 이해하지 못했다고 생각합니다. 어떤 경우에도 code가 의미상 잘못되었습니다. ''데이터''는 객체를 반환하는 함수여야 합니다...

    Plastic2021-09-19 19:45:11

    일반 typescript가 아니라 VUE 객체에 사용되는 typescript입니다.

    Plastic2021-09-19 19:45:11

    @Plastic typescript의 올바른 사용법입니다. 데이터 함수의 반환 유형을 보여주므로 반환 값의 유형을 선언할 수 있습니다.

    Jae Woo Woo2021-09-19 22:37:59

    제안한 code의 두 번째 줄 첫 번째 단어는 사람이 아니라 플레이어를 읽어야 한다고 생각합니다.

    FrankPl2021-09-20 11:21:11
  • 이전 html : 여백이 없고 아래 영역에 브라우저 기본 여백이 없는 상단 탐색 모음용 CSS
  • 다음 android : 안드로이드에서 탭 레이아웃이나 툴바에 하단 그림자를 추가하는 방법