Typescript
Java를 사용하다 Javascript를 사용하면 이게 뿌리가 같은 언어가 맞나 싶을만큼 특징이나 구조가 매우 다르다.
기본적으로 Java는 데이터베이스와 직접 상호작용을 하는 애플리케이션에 주로 사용되기 때문에 사용의 편의성 보다는 안정성과 보안이 우선시 된다.
반면 Javascript는 비록 지금은 서버-클라이언트, 웹-앱 구분없이 전방위적으로 사용되긴 하지만 태생이 스크립트언어이기 때문에 최대한 에러를 안띄우고 사용자에게 편의를 제공하는게 목적인 느낌이 든다.
이것이 가장 느껴지는 대목이 동적 타입이다.
동적 타입은 변수를 선언/저장할 때 타입을 지정하지 않고 할당되는 값의 타입에 따른다는 뜻이다.
예를 들어 아래의 코드가 있다고 가정해보자.
const add = (a, b) => a+b;이 함수는 두 변수(a, b)를 받아서 더한 값을 반환할 것이다.
add(3, 5)
8
add(1, 4)
5그런데 만약에 number 타입이 아닌 다른 타입을 넣으면 어떻게 될까?
add('a', 'b')
'ab'
add('3', '5')
'35'
add(3, 'b')
'3b'
add([1, 2, 3], [4, 5, 6])
'1,2,34,5,6'number가 아니어도 더하기가 된다. 심지어 타입이 달라도 더하기가 되고 배열 + 배열은 string으로 반환된다.
이렇듯 javascript는 동적으로 타입캐스팅을 하며 최대한 에러가 안나도록 설계가 되어있다.
이 점이 물론 편리할 수도 있지만 마냥 좋지만은 않다. 위와 같은 함수는 에러를 던지지 않고 정상작동 하는 것처럼 보일 것이고 숨겨진 버그로 남을 것이다.
특히나 요즘 처럼 javascript의 활용도가 높아지고 단순 스크립트언어 이상의 역할을 한다면 훨씬 안정적이게 개발할 수 있는 장치가 필요하다.
그래서 등장한 것이 Typescript이다.
위 함수를 우선 타입스크립트로 다시 작성해보자.
const add: number = (a: number, b: number) => a+b;꽤나 간단하다. 함수가 반환할 타입과 파라미터의 타입을 미리 정의해 주는 것이다.
물론 이렇게 작성되더라도 브라우저가 읽을 때는
javascript로 읽어야 하기 때문에 컴파일하는 과정이 필요하다.그러므로 당연히 파라미터 타입을 작성하지 않아도 IDE에서 에러로 표시될뿐 실행은 멀쩡히 된다.
사용법
실제로 애플리케이션을 개발할 때는 당연히 number나 string 타입만 사용하지 않는다. 대부분의 경우에는 JSON Object를 사용할 것이다. 이 Object의 타입을 우선 정의해줘야 할 것이다.
type User = {
id: string | number;
name: string;
nickname?: string;
gender?: "man" | "woman";
toString: () => string;
}이렇게 모든 속성을 직접 작성해줘야한다. 필수가 아닌 속성에는 ?를 붙여주고 gender 속성처럼 특정 값만 들어갈 수 있도록 지정해줄수도 있다. 그리고 id 속성처럼 string도 들어갈 수 있고 number도 들어갈 수 있는 속성은 여러 타입을 허용할 수 있다.
any 또는 object 같이 모호한 속성을 부여해서 편하게 사용할 수도 있긴한데 좋은 방식은 아니다 (Typescript의 사용 이유가 없어진다).
const updateMember: void = (user: User) => {
// 회원정보 수정 로직...
}타입을 정의해주면 이렇게 파라미터나 리턴값으로 정의된 타입을 사용할 수 있다.
정리
Typescript 사용이 요즘은 거의 필수로 자리잡은 것 같다. 개발은 혼자하는게 아니고 다른 개발자가 코드를 봤을 때 어떤 코드인지 한눈에 파악하기 훨씬 쉽다는 점 만으로도 충분히 큰 메리트가 있다.
하지만 모든 기술이 그렇듯 Typescript도 당연히 잘 써야 도움이 된다. 명확한 규칙없이 사용한다면 오히려 가독성이 더 떨어지고 오히려 개발에 방해가 될 수도 있다.
