[TypeScript] Narrowing 과 Assertion

🐣 들어가기 전에!

---

이번에는 Narrowing & Assertion에 대해서 살펴볼 것이다. 혹시 지지난 게시물에서 다뤘던 union type에서 오류가 났던 부분들을 기억 하는지?!?! 대략 아래와 같은 코드였는데, 여기서 뿜뿜한 에러를 해결하는 법을 지금부터 알아가보도록 하겠따!

let 계산: string | number
계산 + 1; //error

 

 

union type에 대해서 기억이 잘 안난다면 참고!

[TypeScript] union type · any · unknown

바로 전 게시물은 void type에 대한 정리 글!_!

[TypeScript] void type

 

 

🐣 Type Narrowing

---

1. 개념

Type이 아직 하나로 확정되지 않았을 경우 사용. 유형 가드(보호) 또는 제어 흐름을 사용하여 특정 범위 내에서 변수 유형을 구체화하는 프로세스. 대표적인 방법으로는 typeof 연산자.

쉽게 말하면 if 문 등으로 타입을 하나로 정해주는 것을 말함. 

 

if 문과 typeof 키워드로 현재 파라미터 타입을 검사하여 지정.

* 참고로 typeof 외에도 타입을 구체화 시킬 수 있으면 다 사용가능 (in, instanceof)

 

2. 코드로 더 살펴보기

아래 코드에서는 if 문과 typeof 키워드로 현재 파라미터 타입을 검사하여 지정.

function process(value: number | string) {
    if (typeof value === "string") {
        console.log(value.toUpperCase()); // 여기서 value는 문자열로 처리
    } else {
        console.log(value.toFixed(2)); // 여기서 value는 숫자로 처리
    }
}

 

🐣 Type Assertion

---

1. 개념

타입 덮어쓰기라고 생각. TypeScript보다 유형에 대해 더 많이 알고 있는 경우 TypeScript에 변수의 특정 유형을 알릴 수 있음. as 키워드를 사용하면 완료!

어떤 변수의 타입을 (예시) string 타입으로 하고 싶을 때 사용. 

왼쪽에 있는 변수를 type으로 덮어쓰기 (ex) x as number : x변수를 number로 덮덮)

변수명 as string // 이렇게 사용하면 됨

 

 

어떨 때 사용?

1. Narrowing 할 때 사용
2. 무슨 타입이 들어올지 100% 확실할 때 사용

 

2. 코드로 더 살펴보기

아래 코드를 살펴보면 'value'는 'string'으로 assertion 되므로 해당 'length' 속성에 접근 가능

let value: unknown = "Hello";
let strLength: number = (value as string).length; // value가 문자열임을 단언

---------------------------------

function 함수(x : number|string) {
    let array: number[] = []
    array[0] = x as number; // x를 number로 인식
}
함수(123)

---------------------------------

//참고
(이름 as string) + 1;  //현재문법
<string>이름 + 1;   //옛날문법

---------------------------------

// 꺾쇠 괄호 구문을 사용하는 또 다른 예
let someValue: any = "I am a string";
let strLength2: number = (<string>someValue).length;

 

 

🐣 그렇다면 처음의 궁금증은 어떻게 해결?

---

처음 union type 에러가 났던 것을 해결뿜 하려면

function 내함수(x :number | string){
    return (x as number) + 1
}

console.log( 내함수(123) )

 

 

 

🐣 더 나아가보기!_!

---

만약에 array가 들어오는데 [1, '2', 3] 이런식으로 되어있어서, 전부 숫자 타입으로 변경하고 싶다면?

function 뿜뿜(x: (number|string)[]) {
    let 숫자: number[] = [];
    
    x.forEach((a) => {
        if (typeof a === 'string') {
            숫자.push(parseFloat(a))
        } else {
            숫자.push(a)
        }
        
    })
    return 숫자;
}
console.log(뿜뿜([123,'1']));

 

혹여 parseFloat에 대해 궁금하다면

Number(), parseInt(), parseFloat() 차이점과 공통점[JavaScript]

 

 

🐣 참고

---

만약 HTML 에서 narrowing을 한다면?

1. if
2. instanceof 연산자 (가장 많이 사용)
3. as
4. ?. (optional chaining)
5. tsconfig.json 의 strict false 처리(타입을 쓸 이유가 없음)

 

* 참고로 optional chaining의 경우 있으면 출력, 아니면 undefined

// [1]
if (타이틀 != null) {
    타이틀.innerHTML = "반가워용"
}

// [2]
if (타이틀 instanceof Element) {//HTML이 Element로 오는 것인지 확인 > true로 볼록문 실행
    // 추후 class에서 object가 class의 자식, instance인지를 확인
    타이틀.innerHTML = "반가워용"
}

// [3]
let 타이틀1 = document.querySelector("#title123잘못입력") as Element;
// as 키워드 사용해서 id 값 입력 잘못해도 Element로 타입지정

// [4]
if (타이틀?.innerHTML != undefined) {
    타이틀.innerHTML = "반가웡"
}
// 오브젝트에 붙이는 ?.
//1. 타이틀에 innerHTML이 있으면 출력
//2. 없으면 undefined

 

 

---

---

막상 내가 as 쓸 때는 오직 오류를 임시 해결할 때...@_@

 

[TypeScript] 객체의 타입과 readonly