[코딩애플] 6.Type Script

타입 확정하기 Narrowing & Assertion

 

저번 시간에 만든 함수에 숫자 또는 문자를 집어넣으면 + 1 해주는 함수입니다.

function 내함수(x :number | string){
   return x + 1  //에러남 
}

 

Operator '+' cannot be applied to types 'string | number' and 'number'

string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇습니다.

 

해결 방법

1. Narrowing 방법으로 설정

2. Assert 방법으로 설정 

 

🍎 Type Narrowing

if문 등으로 타입을 하나로 정해주는 것을 뜻합니다. defensive 하게 코딩하는 방법

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

타입이 확실하지 않을 때 생기는 부작용을 막기위한 장치

 

함수 안에서 if문 쓸 때는 마지막에 else {} 이거 없으면 에러가 납니다.

return 하지않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것인데

tsconfig.js 파일 안에 "noImplicitReturns": false, 추가하면 에러 없애줍니다.

 

- 꼭 typeof를 쓸 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있습니다. 

- in, instanceof 키워드도 사용가능합니다.

 

🍎 Type Assertion

assert : "이 변수의 타입을 number 로 생각해주세요" 라는 뜻

이런 뜻으로 코드를 짜면 타입스크립트 컴파일러가 눈감아줍니다.

변수명 as string 이런 식으로 as라는 키워드 쓰면 됩니다.

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

as 키워드 사용시 특징
1. as 키워드는 union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 수행합니다.
(number 타입을 as string 이렇게 바꾸려고 하면 에러남)
2. 실은 그냥 타입실드 임시 해제용입니다. 실제 코드 실행결과는 as 있을 때나 없을 때나 거의 동일합니다.
아무튼 그러면 이제 변수를 숫자로 가정해서 가공할 수 있습니다.

Q. 근데 내함수('123') 이렇게 숫자말고 문자를 입력하면 어떻게 됩니까
A. as number라고 썼긴 했지만 number 타입처럼 +1 해주진 않습니다.
콘솔창에 결과 출력해보면 '1231' 이렇게 출력될걸요
as는 그냥 주장만 하는거지 실제로 타입을 바꿔주는건 아니기 때문입니다. 

1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용하거나
2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때

- 코딩애플 -

 

(숙제 전 참고사항 : console.log() 하는 법)

만든 index.html 안에

<script src="index.js"></script>

이렇게 ts에서 변환된 js 파일을 넣으면 html을 크롬으로 연 후에 개발자도구에서 console.log 실행

아니면 .ts 파일을 바로 실행시켜주는 에디터 부가기능 사용

---

🍏 (숙제1) 숫자여러개를 array 자료에 저장해놨는데

가끔 '4', '5' 이런 식의 문자타입의 숫자가 발견되고 있습니다.

이걸 클리닝해주는 함수가 필요합니다. 

클리닝함수( ['1', 2, '3'] ) 이렇게 숫자와 문자가 섞인 array를 입력하면

[1,2,3] 이렇게 숫자로 깔끔하게 변환되어 나오는 클리닝함수를 만들어오고 타입지정까지 확실히 해보십시오.

모르는 부분은 구글검색해도 봐드림

 

답.

function 클리닝함수(a :(number|string)[]){
  let 클리닝완료된거 :number[] = [];
  
  a.forEach((b)=>{
    if (typeof b === 'string') {
      클리닝완료된거.push(parseFloat(b))
    } else {
      클리닝완료된거.push(b)
    }
  })

  return 클리닝완료된거
}

console.log( 클리닝함수([123,'3']) )

 

🍏 (숙제2) 다음과 같은 함수를 만들어보십시오.

let 철수쌤 = { subject : 'math' }
let 영희쌤 = { subject : ['science', 'english'] }
let 민수쌤 = { subject : ['science', 'art', 'korean'] }

지금 여러 변수에 선생님이 가르치고 있는 과목이 저장이 되어있습니다. 

과목 1개만 가르치는 쌤들은 문자 하나로 과목이 저장이 되어있고

과목 2개 이상 가르치는 쌤들은 array 자료로 과목들이 저장되어있습니다. 

 

'철수쌤' 같은 object 자료를 파라미터로 집어넣으면 

그 선생님이 가르치고 있는 과목중 맨 뒤의 1개를 return 해주는 함수를 만들어봅시다.

그리고 타입지정도 엄격하게 해보도록 합시다. 

 

(동작예시)

만들함수( { subject : 'math' } )  //이 경우 'math'를 return
만들함수( { subject : ['science', 'art', 'korean'] } ) //이 경우 'korean'을 return
만들함수( { hello : 'hi' } )  //이 경우 타입에러 나면 됩니다

Q. 이 자료가 array type 인지 어떻게 검사하냐고요? 모르는건 구글에 검색해봐야합니다.

 

답.

function 만들함수( x :{subject : string | string[]} ){
  if (typeof x.subject === 'string') {
    return x.subject
  } else if (Array.isArray(x.subject) ){
    return x.subject[x.subject.length - 1]
  } else {
    return '없쪄'
  }
}

console.log( 만들함수( { subject : ['english', 'art'] }  ) )

---

참고 사이트 : https://codingapple.com