2021/06/15 타입스크립트

타입 시스템

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

TypeScript는 structural type system(구조적 타이핑)을 기반으로 타입 시스템을 갖추고 있습니다.

structural type system:구조가 같으면, 같은 타입이다.

 

---

 

function func(a) {
  return a * 38;
}

console.log(func(10)); //380
console.log(func('HEY')+5); // NaN

a 의 타입을 명시적으로 지정하지 않아 a가 any 로 추론되고

함수의 리턴 타입은 number로 추론되는 경우입니다.

이럴경우 nolmplicitAny 옵션을 켜주어야 합니다.

nolmplicitAny 옵션

타입을 명시적으로 지정하지 않은 경우,

타입스크립트가 추론 중 'any' 라고 판단하게 되면, 컴파일러 에러를 발생시켜

명시적으로 지정하도록 유도해주는 옵션입니다.

function func(a) {
  return a * 38;
}
// a의 타입을 명시하라는 error가 발생합니다.

console.log(func(10)); 
console.log(func('HEY')+5); 

 

다른 경우를 보겠습니다.

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

console.log(func2(5)); //190
console.log(func2(-5)+5); // NaN

매개변수의 타입은 명시적으로 지정했고,

명시적으로 지정하지 않은 함수의 리턴 타입은 number | undefined 로 추론됩니다.

하지만 위의 코드에서 a가 조건에 맞지 않는 func2(-5) 는 undefined가 되어 NaN이 출력됩니다.

이럴경우 strictNullChecks 옵션을 켜주어야 합니다.

 

strictNullChecks 옵션

모든 타입에 자동으로 포함되어 있는 'null' 과 'undefined'를 제거해줍니다.

console.log(func2(-5)+5); // error 발생

 

nolmplicitReturns 옵션

함수내에서 모든 코드가 값을 리턴하지 않으면, 컴파일 에러를 발생시킵니다.

//error
function func3(a:number) {
  if(a>0) {
     return a*38;
  }
}  

if가 아닌 부분의 리턴 타입이 지정되지 않았기 때문에 에러가 발생합니다.

 

타입을 만들어 놓는 방법

interface FruitInterface {
  name : string;
  price : number;
}

type FruitType = {
  name : string;
  price : number;
};

function func4(a:FruitInterface): string {
  return `과일은 ${a.name} 이고, 가격은 ${a.price} 입니다.`
}

console.log(func4({name:'apple', price:5000}));

 

strictFunctionTypes 옵션

함수를 할당할 시에 함수의 매개변수 타입이 같거나 슈퍼타입인 경우가 아닌 경우, 에러를 통해 경고합니다.

 

class Person {}
class Developer extends Person {
  coding(){}
}
class StartDeveloper extends Developer {
  burning(){}
}

function tellme(f:(d:Developer)=> Developer) {}

tellme(function dToD(d: Developer): Developer {
  return new Developer();
});

tellme(function pToD(d: Person): Developer {
  return new Developer();
});

//error
tellme(function sToD(d: StartDeveloper): Developer {
  return new Developer();
})