Web/TypeScript

Type Narrowing & Assertion

gorae_lulu 2023. 2. 11. 20:53

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다.

더 자세한 설명은 해당 강의를 참고하세요.

https://codingapple.com/course/typescript-crash-course/

 

빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌

    Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다.    Next.js 사용시 서버사이드 렌더링이 쉽기 때

codingapple.com


1. Type Narrowing

Type이 하나로 확정되지 않았을 경우, 데이터를 처리하고 싶을때 type을 하나로 정하는 것.

function 함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
 else {
    return 0
  }
}

 typeof는 string을 반환하기 때문에 if(typeof x === number) 가 아닌 if(typeof x === 'number')로 써야한다.

또한, if문 쓸 때는 마지막에 else {} 이거 없으면 에러가 남.

 

 

2. Type Assertion

타입을 잠깐 덮어쓰는…

왼쪽에 있는 변수를 number로 덮어 씌워주세요…

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

 

 

 

Q1. array 자료에 숫자열을 저장해놨는데 가끔 '4', '5' 이런 식의 문자타입의 숫자가 발견됨. 이를 모두 숫자열로 클리닝해주는 함수를 만들어보자.

 

Q2. 여러변수에 선생님이 가르치고 있는 과목이 저장되어있음.
과목1개만 가르치는 선생님은 문자하나로 , 2개이상을 가르치는 선생님은 array자료로 과목들이 저장되어있음. 선생님 object자료를 집어넣으면, 그 선생님이 가르치고있는 과목중 맨 뒤의 1개를 return 해주세요.

 

방법 여러가지..

slice(-1)[0]으로 배열의 마지막 요소 접근
length-1로 배열의 마지막 요소 접근