let someValue:any = 5; // 어떠한 타입도 ok
someValue = "hello"; // 문제없음
someValue = true; // 문제없음
타입스크립트에서의 일반적인 규칙은
타입에 관한 더많은 정보를 명시할수록
더좋다!
타입에대한 더많은 정보가 제공될수록 좀더 명확하게 개발자의 의도를 코드로 기술할수있고
컴파일시 더많은 타입 에러를 잡아낸다.
효과적인 코드의 유지보수
any타입을 쓰는경우를 최대한 피하는게 좋다.
쓰기 좋은예 : Third Party Library에서 동적컨텐츠를 가져와서 코드작성시 변수의 타입을 알수없는경우.
이런경우는 ?
무슨 타입이 변수에 들어올지는 알수없지만 변수의 타입이 문자열 아니면 숫자일꺼다.
제한된 타입들을 동시에 지정하고 싶을때
let someValue : number|string = 5;
someValue = "free";
someValue = true // 에러방생
같은 조합이 계속 반복될 경우 어떻게 코드를 향상 시킬수있나 ?
유니온타입으로가지는 변수나,함수가 여러개있다면 ?
같은코드를 반복하는거보다.
타입으로 지정하고 재활용하는게 좋다.
그때 쓰는것ㅇ이바로 Type Aliases
type StrOrNum = number | string;
//반복되는 유니온 타입에 코드부분을 타입으로 대체하면 코드가 깔끔해진다.
type NumOrStr = number|string;
let itemPrice :number;
const setItemPrice = (price:StringOrNum):void ->{
itemPrice = price; // itempPrice에 빨간밑줄이 그어진다.
};
setItemPrice(50);
itempPrice는 숫자타입인데
price는 스트링도될수도있는 유니온타입이다.
그러므로 오류를 뱉어낼수있다.
이때 사용하면 좋은게
typeof operator
if(typeof price ==='string'){
itemPrice=0;
}else{
itemPrice = price;
}
유니온타입을 사용할때 typeof operator를 사용하여 코드검증을 수행하는것을
타입스크립트에서 Type Guard라고 한다.
typeof 외에도 타입가드 방법은 몇가지더 존재한다.
null
,undefined
에 ==
,!=
사용가능어떤 인자명은 어떠한 타입이다
라는 값을 리턴하는 함수
function sendGreeting(message,userName): void{ // 함수의 반환값(return)값 타입명시
console.log(`${message}, ${userName}`)
}
function sendGreeting(message:string,userName:string): void{//매개변수타입(parameter의 타입 명시
console.log(`${message}, ${userName}`)
}
두번째 아규먼트를 보내기싫다면 ?
타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정한다
매개변수와 아규먼트의 수가 같아야한다.
function sendGreeting(message?:string,userName?:string): void{
console.log(`${message}, ${userName}`)
}
기억해야할 중요한것
전달되는 매개변수가 어러개이고
몇가지만 선택적 매개변수인경우
선택적 매개변수들은 필수 매개변수들 뒤에 나타나야한다.**
( 당연한것이긴하지만.. 명시적으로 기억하자 )
function sendGreeting(message?:string,userName = "기본이다"): void{
console.log(`${message}, ${userName}`)
}
기본매개변수가 존재한다면
선택적 파라미터도 필요가없어지므로 지워주고
타입추론으로인해서 타입명시도 필요가없어지므로
string타입이라는 타입명시도 지워줄수있다. (디폴트가 스트링이므로 자동으로 스트링이된다)
function sendGreeting(message="안녕",userName = "기본이다"): void{
console.log(`${message}, ${userName}`)
}
sendGreeting();
sendGreeting("굿모닝");
sendGreeting("굿밤","Shin");
를 Arrow function 으로 작성해보자
const sendGreeting = (message="안녕",userName = "기본이다") :
void =>{
console.log(`${message}, ${userName}`)
}
sendGreeting();
sendGreeting("굿모닝");
sendGreeting("굿밤","Shin");