TypeScript에서 리터럴 유형 마스터하기: true와 const vs true

TypeScript에서는 두 명령문 사이에 상당한 차이가 있습니다.

1. clientLoader.hydrate = const로서 true;

2. clientLoader.hydrate = true;

참고로 저는 React Router v7에서 이 예시를 선택했습니다.

자세한 설명과 예시를 통해 차이점을 살펴보겠습니다.

1. clientLoader.hydrate = const로서 true;

TypeScript의 as const 어설션은 TypeScript 컴파일러에게 값을 일반 유형이 아닌 리터럴 유형으로 처리하도록 지시하는 방법입니다.
이 경우 const로서 true는 수화물 유형이 부울이 아닌 문자 그대로 true임을 의미합니다. 이는 본질적으로 수화물의 가치를 구체적으로 고정시킵니다.

예:

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

• 위의 예에서 clientLoader.hydrate는 구체적으로 true로 입력되었습니다. as const 어설션으로 인해 hydrate에 true 이외의 값을 할당할 수 없습니다.

• 이 유형의 할당은 특정 속성에 불변성을 적용하려는 경우에 유용합니다.

1. clientLoader.hydrate = true;

as const 어설션이 없으면 TypeScript는 수화물 유형을 부울로 추론합니다. 이는 수화물에 임의의 부울 값(참 또는 거짓)을 할당할 수 있음을 의미합니다.

예:

interface ClientLoader {
  hydrate: boolean;  // The type of hydrate is set to `boolean`
}

const clientLoader: ClientLoader = {
  hydrate: true,
};

clientLoader.hydrate = true;  // This is valid
clientLoader.hydrate = false; // This is also valid

• 이 경우 hydrate는 불리언으로 입력되므로 true 또는 false를 지정할 수 있습니다.

• 참과 거짓 사이를 전환할 수 있는 유연성을 제공합니다.

왜 const로 사용하나요?

1. 불변성 강화: const는 값을 다른 값으로 변경할 수 없도록 잠급니다. 이는 프로그램 전체에서 특정 값이 항상 동일하도록 하려는 경우 특히 유용합니다.

2. 차별화된 공용체에 대한 리터럴 유형: 구별된 공용체로 작업할 때 const를 사용하면 아래와 같이 리터럴 유형을 기반으로 특정 사례를 만들 수 있습니다.
   

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

결론

1. 특정 리터럴 값을 속성에 할당하고 값이 고정된 상태로 유지되도록 하려면 const로 사용하세요.

2. 속성이 다른 부울 값을 허용하도록 하거나 정확한 값을 제한할 필요가 없는 경우 일반 할당(true, false 등)을 사용하세요.

이렇게 하면 const를 TypeScript 코드에서 더 정확하게 입력하고 더 엄격한 값 제약 조건을 적용하는 데 유용한 도구가 됩니다.

위 내용은 TypeScript에서 리터럴 유형 마스터하기: true와 const vs true의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!