[Erro] TS. String.resplace() 매개변수 타입 에러

TypeScript - String replace()

해당 메서드는 정규식과 문자열 간의 일치 항목을 찾고 일치하는 하위 문자열을 새 하위 만자열로 바꾸는 메서드이다.

string.replace(regexp/substr, newSubStr/function[, flags]);

• regexp - RegExp 객체. 일치는 매개변수 #2의 반환 값으로 대체됩니다.

• substr - newSubStr로 대체될 문자열입니다.

• newSubStr - 매개변수 #1에서 받은 하위 문자열을 대체하는 문자열입니다.

• function - 새로운 부분 문자열을 생성하기 위해 호출되는 함수.

• flags - RegExp 플래그의 조합을 포함하는 문자열: g

예시

var re = /apples/gi; 
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges"); 
console.log(newstr)
 => oranges are round, and oranges are juicy.

출처 : Tutorialspoint

상황

function newsFeed(): void {
  let newsFeed: NewsFeed[] = store.feeds;
  const newsList = [];
  let template = `
  <div class="bg-gray-600 min-h-screen">
	...
          <div class="items-center justify-end">
            <a href="#/page/{{__prev_page__}}" class="text-gray-500">
              Previous
            </a>
            <a href="#/page/{{__next_page__}}" class="text-gray-500 ml-4">
              Next
            </a>
	...
    <div class="p-4 text-2xl text-gray-700">
      {{__news_feed__}}        
    </div>
  </div>
  `;
  
  template = template.replace("{{__news_feed__}}", newsList.join(""));
  template = template.replace(
    "{{__prev_page__}}",
    store.currentPage > 1 ? store.currentPage - 1 : 1);
  template = template.replace("{{__next_page__}}",
                             store.currentPage + 1);

  updateView(template);
}

  

1. 문자열로 구성된 html의 태그 중 일부를 마킹
2. 이를 replace 메서드를 사용하여 하위 문자열로 대체하려 함
3. 두번째 매개변수로, 숫자를 전달함
4. 문법 오류 발생

의도

변수 template는 문자열로 구성된 html입니다.
해당 변수는 뉴스 페이지와 개별 뉴스를 모두 담기을 시 복잡도를 예상하여, 뉴스 페이지와 개별 뉴스를 각각 {{prev_page}}, {{next_page}}로 마킹하여, replace 메서드를 사용하여 하위 문자열로 대체하려는 의도로 작성되었습니다.
따라서, template.replace(str, num)으로 입력하여 이를 해결하려 했습니다.

원인

그러나, replace 메서드는 문자열을 매개변수로 갖음을 인지하지 못했기에, 문법 오류가 발생한 것입니다.

해결

먼저, 에디터가 제시한 힌트를 확인했습니다.

(method) String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)

에디터는 replace 메서드가 "두가지 문자열을 받으며 첫번째 매개변수를 두번째 매개변수로 전환해줌"을 제시하고 있습니다.

방법은 단순합니다. 두번째 매개 변수를 문자열로 바꿔주면 됩니다.
삼항연산자를 사용하여 상황에 따라 달라지는 값을 전달했기에, 어떻게 문자열로 전환할지 고민했지만, 최종적으로 전달되는 값은 문자열이나, 숫자나 모두 문자열로 반환되기 때문입니다.

따라서, 삼항연산자의 결과를 String으로 묶는다면 원하는 문법 오류를 해결할 수 있습니다.

  template = template.replace(
    "{{__prev_page__}}",
    String(store.currentPage > 1 ? store.currentPage - 1 : 1)
  );
  template = template.replace("{{__next_page__}}",
                              String(store.currentPage + 1));