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

타입 시스템

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

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

• 타입을 명시적으로 지정할 수 있다.
• 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론

자신의 코드에서 해당 함수를 사용하는 사용자

형태를 정해둔 함수

해당 함수를 구현하는 구현자

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

//javascript

// f1 이라는 함수의 body에서는 a를 사용할 것
// a 가 할 수 있는 일은 a의 타입이 결정합니다.
function f1(a){
	return a;
}

함수 사용법에 대한 오해를 야기하는 자바스크립트

//javascript

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

//사용자는 사용법을 숙지하지 않은 채, 문자열을 사용하여 함수를 실행했다.
console.log(f2(10)); //380
console.log(f2('mark')); //NaN

타입스크립트의 추론에 의지하는 경우

//a의 타입을 명시적으로 지정하지 않는 경우이기 때문에 a는 any로 추론
// 함수의 리턴 타입은 number로 추론(NaN도 number의 하나입니다)
function f3(a){
	return a * 38;
}
//사용자는 a가 any이기 때문에, 사용법에 맞게 문자열을 사용하여 함수를 실행했다.
console.log(f3(10)); //380
console.log(f3('mark')+5); //NaN

nolmplicitAny 옵션을 켜면

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

타입스크립트가 추론 중 ‘any’라고 판단하게 되면 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도

nolmplicitAny 에 의한 방어

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

//사용자의 코드를 실행 할 수 없다.
console.log(f3(10));
console.log(f3('mark')+5);

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

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

//하지만 실제 undefined + 5가 실행되어 NaN이 출력
console.log(f4(5)); //190
console.log(f4(-5)+5); //NaN

strictNullChecks옵션을 켜면

모든 타입에 자동으로 포함되어 있는

null 과 undefined 를 제거해줌.

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

//사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행
// 해당 함수의 리턴 타입은 number | undefined이기 때문에,
// 타입에 따르면 이어진 연산을 바로 할 수 없다.
// 컴파일 에러를 고쳐야하기 때문에 사용자와 작성자가 의논 해야함.
console.log(f4(5)); //190
console.log(f4(-5)+5); //error object is possibly

nolmplicitReturns 옵션을 켜면

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

매개벼수에 object가 들어오는 경우,

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

console.log(f6({name:'mark',age:38)}; //이름은 mark이고 연령대는 30대입니다.
console.log(f6('mark')); //이름은 undefined이고, 연령대는 NaN대 입니다.

object literal type

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

console.log(f7({name:'mark',age:38)}; //이름은 mark이고 연령대는 30대입니다.
console.log(f7('mark')); //error TS2345: Argument of type ' string' is not assignable to parameter of type