1. 작성자와 사용자
- 타입시스템 : 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 / 컴파일러가 자동을 타입을 추론하는 시스템
- 타입스크립트의 타입시스템 : 타입을 명시적으로 지정할 수 있고, 만약 지정하지 않으면 타입스크립트 컴파일러가 자동으로 타입을 추론한다. 그래서 타입스크립트의 추론기능은 중요한 것 중 하나이다.
- 타입이란, 해당 변수가 할 수 있는 일을 결정하는 것이다. 자바스크립트에서는 함수 사용법에 대해 오해가 종종 발생하곤 한다.
// 함수f2의 결과를 NaN으로 의도한게 아니라면, 이 함수의 작성자는 매개변수 a가 number타입이라는 가정으로 작성했을 것이다.
function f2(a){
return a*38
}
//사용자가 사용법을 숙지하지 못하고 문자를 사용하면 NaN이 나와 의도한 함수의 결과를 벗어난다
console.log(f2(10)) //380
console.log(f2('Mark')) // NaN
- 하지만 타입스크립트에서도 타입을 명시적으로 지정해주지 않으면 변수를 any타입으로 추론해 어떤 사용법에 의해 어떤 자료형이 들어가야하는지 정확히 몰라 똑같이 NaN을 내보낼 수도 있다.
- noImplicitAny 옵션을 키게 되면, 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 any라고 판단하게 되면 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다.
//error TS7006 : Parametere 'a' implicitly has an 'any' type.
function f3(a){
return a*38
}
//타입이 any로 지정되면 에러가 발생
//사용자의 코드를 실행할 수 없습니다. 컴파일이 정상적으로 마무리 될 수 있도록 수정해야 합니다.
console.log(f3(10))
console.log(f3('Mark')+5)
- strictNullChecks 옵션을 켜면 모든 타입에 자동으로 포함되어 있는 'null'과 'undefined'를 제거해준다.
- 모든 타입에는 null과 undefined가 포함되어 있기 때문에 이 모드를 키지 않으면 런타임과 컴파일 타임의 타입이 달라지게 되면서 문제가 많이 발생한다.
//매개변수의 타입은 명시적으로 지정했습니다
//명시적으로 지정하지 않은 함수의 리턴타입은 number | undefined로 추론된다.
function f4(a: number){
if(a>0){
return a*38
}
}
//사용자는 사용법에 맞게 숫자형을 사용해 함수를 실행
//해당 함수의 리턴타입은 number | undefined 이기 때문에,
//타입에 따르면 이어진 연산을 바로 할 수 없다
//컴파일 에러를 고쳐야하기 때문에 사용자와 작성자의 의논 필요
console.log(f4(5))
console.log(f4(-5) + 5) // error TS2532 : Object is possibly 'undefined'
- 타입이 그냥 추론되게 하는건 지양하는게 좋다. 사용자 뿐만 아니라, 작성자를 위해서도 명시적으로 타입을 지정해주는게 좋다.
//매개변수의 타입과 함수의 리턴타입을 명시적으로 지정
function f5(a:number): number{
if(a>0){
return a*38
}
}
- noImplicitReturns 옵션을 켜면, 함수 내에서 모든 코드가 값을 리턴하지 않으면, 컴파일에러를 발생시킨다.
- 모든 코드의 줄기가 정확하게 타입지정이 안될 경우 에러를 내보냄. 모든 코드에 리턴을 직접 작성해야한다.
//JavaScript
function f6(a){
return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10)* 10}대 입니다.`;
}
//자바스크립트에서는 사용자가 추론해서 object를 넣어줘야 함
console.log(f6({name : 'Mark' , age: 38})) // 이름은 Mamrk 이고 연령대는 30대 입니다.
console.log(f6('Mark')) // 이름은 undefined 이고, 연령대는 NaN대 입니다
- object literal type
- 하지만 보통 이렇게 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대입니다.
consoel.log(f7('Mark')) // error
- 나만의 타입을 만드는 방법에는 두 가지 방법이 있다.
interface PersonalInterface{
name : string;
age : number;
}
type PersonTypeAlias ={
name : string;
age: number
}
funcion f8(a:PersonalInterface) : string{
return `이름은 ${a.name}이고, 연령대는 ${Math.floor(a.age /10)*10}대 입니다`
}
댓글