TypeScript에서 유형 변환을 올바르게 수행하는 방법은 무엇입니까?

TypeScript 유형 변환에 대한 심층적 인 논의

이 기사는 TypeScript 유형 변환의 사용 및 제한, 특히 as 키워드를 자세히 분석하고 모범 사례를 제공합니다.

시나리오 분석 : VUE 구성 요소 및 유형 어설 션

VUE 구성 요소의 props 이 group 속성을 number 유형으로 정의한다고 가정합니다. getDictGroup 함수는 sid 매개 변수도 유형 number 일 것으로 기대합니다. 그러나 런타임 sid 유형 string 일 수 있으므로 유형 오류가 발생할 수 있습니다. 다음 코드 스 니펫은이 문제를 보여줍니다.

 const props = defineProps  ();

getDictGroup (props.group);

내보내기 const getDictGroup = async (sid : number) => {
  const dict = await getDict ();
  console.info (typeof sid); // "String"을 출력 할 수 있습니다.
  숫자로 sid = sid; // Assert를 입력하지만 런타임 유형 Console.info (sid typeof sid)를 변경하지 않습니다. // 여전히 "String"출력
  console.info (typeof (sid as number)); // 여전히 "String"출력
};

유형 어설 션에 as number 사용하는 것은 단순히 TypeScript 컴파일러에 변수가 number 유형으로 취급되어야하며 런타임 유형 변환을 수행하지 않음을 알려주는 것입니다. parseInt(sid) TypeScript가 오류를보고하고 number string 에 할당 할 수 없기 때문에 문제를 해결할 수 없습니다.

유형 변환의 특성

as 키워드는 유형 어설 션이며 변수의 런타임 유형을 변경하지 않는 컴파일 타임 메커니즘입니다. 실제 유형 변환을 수행하려면 JavaScript의 유형 변환 기능을 사용해야합니다.

예를 들어 숫자를 문자열로 변환합니다.

 n : number = 12345;
n = 문자열 (n);
Console.log (N); // "12345"
Console.log (typeof n); // "끈"

문자열을 숫자로 변환하십시오.

 strnum : String = "42";
숫자 : 번호 = 숫자 (strnum);
Console.log (num); // 42
Console.log (num의 타입); // "숫자"

TypeScript의 올바른 유형 변환 방법

TypeScript에서 안전한 유형 변환은 JavaScript의 유형 변환 기능과 필요한 유형 검사를 결합해야합니다.

1. 문자열 to 숫자 : Number() 함수를 사용하고 옵션 체인 및 널 값 병합 연산자를 결합하여 잠재적 오류를 처리합니다.

    strnum을하자 : 문자열 | undefined = "42";
   숫자 : 번호 = 숫자 (strnum) ?? 0; // null 값 병합 연산자를 사용하여 정의되지 않은 처리

2. 문자열 : String() 함수 사용 :

    숫자를하자 : 숫자 = 42;
   str : string = String (num);

3. 보다 엄격한 유형 확인 : 변환하기 전에 잠재적 인 런타임 오류를 피하기 위해 유형 확인을 수행하십시오.

    함수 convertString (값 : 숫자 | 문자열) : 문자열 {
     if (typeof value === '번호') {
       리턴 문자열 (값);
     } else if (typeof value === 'string') {
       반환 값;
     } 또 다른 {
       새 오류를 던지십시오 ( '유효하지 않은 입력 유형');
     }
   }

초기 문제를 해결하기위한 솔루션

초기 문제의 경우 올바른 솔루션은 유형 변환에 Number() 함수를 사용하고 잠재적 오류를 처리하는 것입니다.

 const props = defineProps  (); // 문자열을 허용하도록 소품 유형을 수정합니다

getDictGroup (props.group);

내보내기 const getDictGroup = async (sid : number | string) => {
  const dict = await getDict ();
  let convertedSid : number = number (sid);
  if (isnan (convertedSid)) {
    Console.error ( "유효하지 않은 입력 : SID는 숫자가 아닙니다");
    반품; // 또는 오류를 적절하게 처리합니다
  }
  Console.info (ConvertedSid 타입); // "숫자"
  // 후속 작업에 ConvertedSid를 사용합니다};

이러한 방식으로 올바른 런타임 유형 변환을 수행 할뿐만 아니라 TypeScript 컴파일러의 유형 안전을 보장합니다. 동시에, 우리는 숫자가 아닌 입력에 대한 오류 처리를 추가했습니다. props 유형을 수정하면 실제 상황에 더 일치하는 string 입력이 가능합니다.

위 내용은 TypeScript에서 유형 변환을 올바르게 수행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!