TypeScript
타입스크립트는 명시적으로 자바스크립트에 타입을 부여한 언어이다.
간단하게 말하면 자바스크립트의 확장된 언어라고 볼 수 있는데, 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다.
이 변환 과정을 컴파일(complile) 이라고 부릅니다.
왜 Typescript를 쓰지?
타입스크립트는 크게 두가지 이점을 가져다 주는데 이 덕분에 자바스크립트 보다 더 뛰어난 생산성을 기대할 수 있다.
- 에러의 사전 방지
- 코드 가이드 및 자동 완성(개발 생산성 향상)
에러 사전 방지
//자바스크립트
function sum(a, b) {
return a + b;
}// 타입스크립트
function sum(a: number, b: number) {
return a + b;
}자바스크립트와 타입스크립트의 차이점은 바로 저렇게 타입을 명시하여 원하는대로 동작할 수 있게 명시 시켜준다 생각하면 된다.
만일 두 수를 더하는 함수가 있는데 이를 많은 코드로 피로해진 상태 혹은 프로그래머의 실수로 아래와 같이 사용 되었다고 가정하자
sum('1','2')은 자바스크립트는 1+2가 아닌 문자로 인식해 1``2가 되는것이다.
하지만 타입스크립트로 정의할경우
'1'의 형식은 'number'형식의 매개 변수에 할당 될 수 없습니다 라는 문장을 띄우며 에러 표시를 할것이다.
이처럼 실수를 사전에 방지할 수 있고, 타입까지 명시 해 주었기 때문에 VScode와 같은 개발 툴 내부에서 해당하는 타입의 API를 자동으로 가져와 보여주기 때문에 일일히 타이핑을 하지 않아도 자동 완성으로 가져올 수 있는 이점 역시 존재한다
Interface
이렇게 사용할 함수 또는 변수에 일일히 타이핑 할 수 있으나, 이는 코드의 가독성을 오히려 해칠수 있다. 따라서 미리 Interface를 정의하여 필요한 부분에만 해당 Interface를 적용한다면 관리측면이나 가독성 면에서 용이하다.
function makeWeapon(WeaponInfo: { steel: string, bullet: number }) {
console.log(`강철총을 만들자...`);
}
let WeaponInfo = {
ingredient: 'iron',
keyCount: 30,
};
makeWeapon(WeaponInfo);다음과 같은 타입스크립트를 인터페이스를 정의 하면 아래와 같이 나타낼 수 있다.
interface IWeaponInfo {
steel: string; //인터페이스는 소문자이다.
bullet: number;
}
function makeWeapon(WeaponInfo: IWeaponInfo) {
console.log(`강철총을 만들자...`);
}
미리 정의를 해두었기에 나중에 수정할때도 해당 인터페이스 내용만 수정하면 매우 용이해 질것이며 가독성 측면에서도 우위를 가져갈 수 있다.
선택적 Property
위의 코드에서 만약 총을 만들때 특정한 탄환이 필요한 총이 있고, 그냥 호환이 되는 총이 있다고 생각하자. 그렇다면 총에 따라 해당 프로퍼티가 있을수도 없을수도 있는데 이는 간단하게 ? 프로퍼티를 사용하면 된다.
interface IWeaponInfo {
steel: string; //인터페이스는 소문자이다.
bullet: number;
bulletType?: string;
}
function makeWeapon(WeaponInfo: IWeaponInfo) {
console.log(`강철총을 만들자...`);
}
let WeaponInfo1 = {
steel: 'iron',
bullet: 40,
};
let WeaponInfo2 = {
steel: 'titanium',
bullet: 30,
bulletType: '5.56x45mm_MK262',
};