[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;