유형 방어 및 undefined에 대한 Typereror

2021년 첫 블로그.올해도 잘 부탁드립니다.
지난해 말 형방에 대한 루머가 발견돼 복습하는 김에 기사를 썼다.샘플 코드undefined 가능한 것에 대한 편집을 원하는 마음에 화가 나서 TS4.1을 가져오는 김에 추가noUncheckedIndexedAccess 옵션 등을 시도했다.

방어형 및 undefined의 Typereror

형 방어는 무엇입니까?

예를 들어, number or null과 같은 여러 유형의 변수를 사용합니다.이렇게 하면number와null에 두 가지 선택이 생긴다.하지만number에서만 논리를 기술하는 경우도 있다고 생각합니다.이럴 때는 형 방어를 사용한다.

TS 환경 개선

상기 유형 방어는?그건 알지만 실제 예제에 부딪히지 않으면 이해할 수 없는 파벌이기 때문에 형 보호의 은혜를 느끼기 위해 샘플을 만드는 환경을 만들어 이해하고 싶어요.아래의 환경을 조정할 필요는 없지만 해보고 싶을 뿐이야.

TS4.1을 가져옵니다.

2020년 11월 19일 Type Script 4.발행TS4.1에는 noUncheckedIndexedAccess 옵션이 추가되었습니다.이것들을 가져오고 싶습니다.

npm install - D [email protected]

tsconfig.json을 편집합니다.

이번에 noUncheckedIndexedAccess라는 옵션을 쓰고 싶으니까 추가, 진짜를 선택해 보세요.

{
  "compilerOptions": {
    // 他のオプションは割愛
    "noUncheckedIndexedAccess": true
  },
}

이번에 추가된 undefined 옵션은 엄격하게 접근할 가능성이 있는 noUncheckedIndexedAccess의 속성입니다.
여기까지 환경이 대체적으로 조정되었기 때문에 나는 실제 샘플 코드를 보고 싶다.

예제

// App.tsx

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {HogeData && (
          <HogeComponent description={HogeData[id].description ?? ""} />
        )}
      </header>
    </div>
  );
}

export default App;

// HogeData.ts

export const HogeData: {
  [key: string]: {
    description: string;
  };
} = {
  first: {
    description: "ほげほげほげ",
  },
  second: {
    description: "ふがふがふが",
  },
};

는 상술한 예를 보십시오.참고로 HogeComponent는 받은 description만 그리는 구성 요소입니다.
위의 경우 App.tsx가 TS한테 혼났어.<HogeComponent description={HogeData[id].description ?? ""} />그래.이번 예에서 HogeData는 id가 first 인지 second 일 때만 string 형식으로 description을 되돌려줍니다.그러나 id가 빈 문자열일 때나 예상치 못한 문자열이 지나친 경우HogeData[id]undefined가 되고 type error가 됩니다.또 noUncheckedIndexedAccess 덕분에 vscode에서 욕을 먹었다.
아래와 같은opptional이면 type error가 수납합니다.

{HogeData && (
  <HogeComponent description={HogeData[id]?.description ?? ""} />
)}

그러나 실제로id는 지정된 것만 절대 지나갈 수 없는 상황이고, 존재한다면HogeData은 HogeData[id]이 될 수 없는 상황이다.하지만 이 경우에도 TS는 type error 때문에 화를 낸다.

개진

undefined를 변수화하다.

const descriptionData = HogeData[id];

HogeData[id]를 변수로

if (descriptionData)

에서HogeData[id]는 아니다descriptionData!그리고 TS는

descriptionData.description

"undefined"도 사용 가능한가요?이런 error는 안 나와요.
또한null 합병 연산자도 빈 문자열을 보장할 필요가 없습니다.

최종 코드

function App() {
  const descriptionData = HogeData[id];
  return (
    <div className="App">
      <header className="App-header">
        {descriptionData && (
          <HogeComponent description={descriptionData.description} />
        )}
      </header>
    </div>
  );
}

이렇게undefined의 검사에서도 error가 발생하지 않는다.
이번에는 유형 방어로 제한하고 undefined가 욕먹는 것을 피할 수 있는 예를 썼다.전혀 모르는 사람이기 때문에 더욱 열심히 공부해야 합니다.