사용자의 관점으로 코드 바라보기

타입스크립트의 타입 시스템 

1) 명시적으로 지정 가능

2) 지정하지 않으면 타입 스크립트 컴파일러가 자동으로 추론

 

타입이란 해당 변수가 할 수 있는 일을 결정하는 것 

function f1(a){

return a

}

a가 무슨 타입이냐에 따라서 할 수 있는 일이 달라진다. 

 

자바스크립트는 함수 사용법에 대해서 오해를 야기할 수 있다. 

function f2(a){

return a*38;

}

console.log(f2(10)); // 380

console.log(f2('Mark')) // NaN

과연 함수 작성자는 어느걸 의도했을까?

 

타입 스크립트에서는 명시적으로 지정하지 않으면 Any로 추론 된다. 

함수 작성자는 올바른 사용법을 사용자에게 전달하지 않은것

 

noImplicitAny 옵션을 켜면...

타입을 명시적으로 지정하지 않은 경우, 타입스크립트 컴파일러가 자동으로 any로 추론할 경우에

Compile Error를 발생시킴 (직접 any를 지정하는 경우에는 발생시키지 않음)

 

 

 

number 타입으로 추론된 리턴 타입

function f4(a:number) {

if (a>0) {

return a*38

}

}

 

console.log(f4(5)) // 190

console.log(f4(-5) + 5) //NaN , undefined + 5가 실행된다. stricNullCheck 옵션을 켜지 않을 경우

undefined이지만 number로 퉁쳐버린다.

 

--> stricNullChecks 옵션을 켜자

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

 

noImplicitReturns 옵션

함수내에서 모든 코드가 return이 없으면 error를 발생 시킴

function f5(a:number) {

if (a>0){

return a*38;

}

}

--> if가 아닌경우 return이 없다. error

 

매계변수에 object가 들어오는 경우 

function f6(a) {

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

}

 

console.log(f6({name:'Mark', age:30}));  //정상

console.log(f6('Mark')) // error, 이름은 undefined이고, 연령대는 NaN대 입니다. 출력 된다. 

 

object의 타입을 지정하자

 

function f7({name:string, age:number}):string {

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

}

 

나만의 타입을 만드는 방법

interface, type, class 이용

 

interface PersonInterface {

name:string, 

age:number

}

type PersonTypeAlias = {

name:string, 

age:number

};