타입스크립트 3

hojoon·2023년 3월 20일
0

타입스크립트

목록 보기
4/9

타입 시스템

  • 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템
  • 컴파일러가 자동으로 추론하는 시스템 (명시적으로 지정하지 않으면 자동추론)

타입이란 해당 변수가 할 수 있는 일을 결정한다.

function f1 (a) {
	return a;
}
//a가 할 수 있는 일은 a의 타입이 결정한다.
function f2(a) {
  return a * 38;
}

console.log(f2("mark")); //NaN
//사용법을 숙지하지 않은 채 사용

똑같은 코드를 타입스크립트로 사용한다면?

function f1 (a) {
	return a;
}
//a의 타입은 any로 추론된다.
//그러나 함수 작성자는 올바른 사용법을 전달하지는 못한것.

noimplicityAny 옵션을 켜서 타입스크립트가 타입을 any라고 추론하게 되면 컴파일 에러를 발생시켜서 명시적으로 타입을 지정시키도록 한다.

명시적으로 타입을 지정 해보자.

function f2(a:number) {
if(a>0){
 return a * 38;
  }
}
//명시적으로 지정하지 않은 함수의 리턴 타입은 number로 추론된다.

console.log(f2(-5) + 5); //NaN
//의도된 결과가 아니다..!! 

그런데 뭔가 이상한 점이 있다.
f2(-5)는 undefined인데 왜 넘버로 추론하고 있는지 ??
그것은 넘버타입의 undefined가 서브타입으로 포함되어 있기 때문이다.
그래서 타입스크립트에서는 number로 퉁쳐버린다.

strictNullChecks 옵션을 키면 모든 타입에 자동으로 포함되어 있는 'null'과 'undefined'를 제거해준다.

function f2(a:number) {
if(a>0){
 return a * 38;
  }
}

console.log(f2(5)); //number or undefined 
console.log(f2(-5) + 5); //error TS2532: Object is possibly 'undefined'

명시적으로 리턴 타입을 지정해야할까??

function f2(a:number):number{
  if (a>0) {
  return a * 38
  }
}
//error TS2366: Function lacks ending return statement and return type does not~

이 함수는 넘버를 리턴할껀데 if 부분만 넘버를 리턴할 것인데 else 부분은 작업이 덜된것 같다고 타입스크립트가 알려준다.

noimplicityReturns 옵션을 키면 함수 내에서 모든 코드가 값을 리턴하지 않으면 컴파일 에러를 발생시킨다.

function f3(a){
  return `이름은 ${a.name} 이고, 연령대는 ${Math.floor(a.age/10) * 10}대 입니다.`

의도치 않은 결과물을 만들어낼수 있다.
->a에다가 오브젝트를 타입을 지정해줘야 한다

f3(a:{name:string; age:number}):string

나만의 타입을 만드는 방법

interface, alias, class 등등

어떻게 하면 작성자의 입장에서 타입을 잘 만들어가는지가 중요하다!!

왜냐하면 사용자한테 문제없이 코드를 사용할 수 있게 해주는게 타입스크립트 개발자가 해야할 중요한 일이기 때문이다.

profile
프론트? 백? 초보 개발자의 기록 공간

0개의 댓글