[TIL] 0415

NotionClone Project Refactoring

フィールド宣言でtypescriptとjavascriptの違いが見つかりました.
クラスを拡張すると、親のコンストラクション関数が実行され、サブクラスのフィールドが生成されます.

コンストラクタにおけるプロトコル

の作成と割り当て

1で作成されたプロパティ名が、サブエレメント内で宣言されたフィールド名と同じである場合、名前が再割り当てされます.

値は指定されていませんが、宣言のみ

tsは宣言を無視した.

jsは、未定義のものを再割り当てします.

jsの場合

class Sidebar extends Component {
 PageList; // js는 undefined를 재할당한다

 mounted() {
   console.log(this.PageList); // undefined 출력
   const $pageList = this.$target.querySelector('[data-component="PageList"]');
   
   // 첫 생성 및 할당
   this.PageList = new PageList($pageList, {
     data: this.state.pageListData,
     onClickRemove: this.handleClickRemoveIcon.bind(this),
   });
 }

 async fetch() {
   console.log(this.PageList); // PageList컴포넌트 출력
   const pageListData = await getDocumentList();
   
   // await의 영향으로 constructure함수가 다 실행되고, 
   // 자식 프로퍼티 생성하는 로직까지 전부 실행되고 나서 밑에 코드가 실행됨
   console.log(this.PageList); // undefined가 출력됨
   this.setState({ pageListData }, true);
 }

 reRender() {
   this.PageList.setState({
     data: this.state.pageListData,
   });
 }
}

export default Sidebar;

tsの場合

class RandomQuotes extends Component<undefined, { [key: string]: string }> {
  Contents: Contents; // undefind가 재할당되지 않음 -> ts는 값이 없으면 아무것도 할당하지 않는다

  mounted() {
    console.log(this.Contents); // undefined 출력
    const $contents = this.$target.querySelector('[data-name="contents"]');
    
    // 첫 선언 및 할당
    this.Contents = new Contents($contents, this.state);
  }

  handleClickButton() {
    this.fetch();
  }

  async fetch() {
    console.log(this.Contents); // Contents컴포넌트 출력
    const { data } = await axios.get('https://free-quotes-api.herokuapp.com/');
    console.log(this.Contents); // Contents컴포넌트 출력
    this.setState({ quote: data.quote, author: data.author }, true);
  }

  reRender() {
    this.Contents.setState(this.state);
  }
}

export default RandomQuotes;