10. TypeScript (부제_타입추론)

타입스크립트를 맞이하여 색감을 바꿔봤다. 맘에듦

자바스크립트와 이름이 비슷한 타입스크립트가 있다. 이름만 들어도 데이터의 '타입'과 관련이 깊어보인다. 왜 잘 쓰고 있는 자바스크립트에서 굳이 타입스크립트를 써야하는가? 자바스크립트는 매우 편하다. 그게 실무에서는 문제가 된다. 너무 자유롭다보니 협업할 때 통일하기 어렵고 다른사람의 코드를 리뷰하기도 쉽지 않을 뿐더라 데이터의 타입 또한 너무 자유롭게 입력가능해서 (사실 1주일 만에 만들어진 언어이다 보니 허술한 점이 많다) 이를 실무에서 쓸 수 있도록 보안해준 녀석이 이 타입스크립트이다. 앞으로 많이 만나게 되겠지. 일단 오늘은 타입스크립트의 주요 기능인 타입 추론 기능에 대해서 배워보았다.

---

타입스크립트는 무엇이 다른데?

 

 이름에서부터 알 수 있듯 타입에 대해서 깐깐한 타입스크립트는 자바스크립트에서 허용하는 수많은 허점들을 잡아내서 오류로 표기해준다. 즉 각각의 데이터에 맞는 타입만 담길 수 있도록 해주는 것이 가장 큰 특징이다. 자바스크립트가 자유롭고 편하기 때문에 소규모 프로젝트에 적합하다면 타입스크립트는 대규모 웹 프로젝트에 적합하다. 또한 정적, 동적인 타이핑을 모두 지원한다. 따라서 자바스크립트로 작성된 모든 파일들을 별다른 수정없이 타입스크립트로 모두 열어볼 수 있다. 즉, 타입스크립트가 자바스크립트의 상위개념으로 생각하면 된다.( 생각해보면 당연하다. 자바스크립트를 수정, 보완한거라고 했으니까..) 

 

 

 타입스크립트의 다양한 장점과 특징들 중에서 타입을 미리 지정해 주고 이에 맞추어 강제적으로 입력 타입을 지정해 주는 기능이 있는데 이를 타입추론이라고 한다. 각 데이터 타입에 따른 타입 추론과 지정에 대해서 알아보자

 

타입추론

 

Typescript는 이름그대로 타입을 강제한다. 강제하지 않고 허용성이 넓은 것이 좋은것 같지만 오류가 발생했을 때 그 오류를 찾기가 굉장히 힘들어지기 때문에 대부분은 Typescript를 사용한다. 객체의 경우 명확한 타입이 정해져있지 않기때문에 사용자가 직접 타입을 정해주어야한다. 일반적으로는 변수명앞에 Interface의 첫글자 I를 붙여서 만들어주는것이 관례이다.

타입을 지정해주지 않으면 초기에 들어온 데이터를 가지고 어떤 타입인지를 스스로 판단해서 추론한다.

//타입 추론
let aaa = "안녕하세요";
aaa = 3;

//타입 명시
let bbb: string = "반갑습니다";
bbb = 3;

위 아래 모두 string타입이 지정되어있다. 그렇다면 그냥 추론하면되지 왜 굳이 타입을 명시해야할까? 타입을 굳이 명시를 해줘야 하는 상황이 있다.

//타입 명시가 필요한 상황
let ccc: number | string = 1000
ccc = "1000원"

 위와같은 경우는 기존에 number타입이였는데 문자타입으로 변경해야 하는 상황이다. 이 경우같은때에는 처음에 타입을 number와 string 모두 가능하도록 설정해주어서 추후에 문자열로 변경할 수 있도록 해준다. 그렇다면 boolean타입은 어떨까?

// boolean타입
let eee: boolean = true;
eee = false;
eee = "false"; //js에서는 true로 작동함

 기존의 js에서는 문자열안에 아무것도 없지 않는한 모두 true값을 리턴했다. 따라서 false라고 문자를 적어도 true로 작동한다. 하지만 typescript에서는 오류임을 감지한다.

// 배열타입
let fff: number[] = [1,2,3,4,5]
let ggg: string[] = ["철수","영희","훈이"]
let hhh: (string|number)[]=["철수","영희","훈이",10]

배열같은 경우도 배열안의 요소에 대한 타입을 지정해준다. 마찬가지로 하나 이상의 타입이 함께 쓰일 경우에는 | 연산자를 이용해서 사용되는 모든 타입을 추가해주어야 한다.

 

// 객체타입
interface Iprofile {
    name : string;
    age : number | string;
    school : string;
    hobby?: string;
}

const profile: Iprofile= {
    name : "철수",
    age : 5,
    school : "미술초등학교"
}

profile.age = "8살" // profile.age을 그냥 타입추론을 이용하면 "8살" 이와같이 변경이 불가능함
profile.hobby = "미술" //나중에 추가하고싶을 때

 객체의 경우는 배열보다는 살짝 복잡하다. 기본적으로 객체에 대한 타입이 따로 정해져 있지 않기 때문에 이를 새롭게 설정해주는 과정이 필요하다. 위의 예시와 같이

// 함수타입
const add = (money1: number, money2: number, unit: string): string => {
    return money1 + money2 + unit; 
};
const result = add(1000, 2000, "원")

 

함수같은 경우는 매개변수의 타입을 따로 지정해주지 않으면 디폴트 값인 any 타입이 지정된다. 이는 정말 모든 타입을 허용하고 심지어는 그 값을 주지 않아도 동작하기 때문에 위험성이 매우 높다. 따라서 반드시 위와같이 각각의 타입을 지정해 주어야 하며 그 함수의 결과 return 타입도 매개변수 뒤에 이어서 지정해 줄 수 있다. 이를 통해 역으로 return 이 어떤타입으로 나와야 하는지를 알 수 있다.