지난 시간까지 프로그래밍의 기본 원리를 다루었어요. 이번 시간부터는 타입스크립트에 대해 정리해 볼게요.
타입스크립트 사용 이유
데이터의 자료형(타입)을 미리 알 수 있기 때문에 버그를 줄이고 생산성을 높일 수 있어요. 타입을 명시하기 때문에 유지보수 또한 쉬워져요.
타입스크립트는 자바스크립트의 슈퍼셋(확장형)이에요. 자바스크립트 프로젝트에 타입스크립트를 일부만 적용하는 것도 가능해 호환성이 좋아요. 추가로 IDE에서 코드를 작성할 때 타입 기반으로 메서드 자동 완성이나 추천이 원활하게 동작하기 때문에 개발에 큰 도움이 돼요.
초기 환경설정
타입스크립트는 자바스크립트에 타입 체크가 추가된 언어이므로, 실행을 위해서는 자바스크립트로 변환(컴파일)하는 과정이 필요해요.
npm i -g typescript위 명령어를 통해 도구를 설치하고, tsc 명령어를 통해 타입스크립트 파일을 자바스크립트로 컴파일할 수 있어요.
코드 포맷터인 Prettier나 문법 오류를 잡아주는 ESLint 같은 확장 프로그램을 함께 사용하면 코드를 더 안정적으로 작성할 수 있어요.
명령어 tsc --init 을 실행하면 tsconfig.json 파일이 생성되는데, 이 파일을 통해 원하는 컴파일 옵션을 설정할 수 있어요. 참고로 tsc -w 파일명 옵션을 사용해 컴파일하면 코드의 변화를 지속적으로 감지해서 반영해 주어 편리해요.
데이터 타입과 타입 추론
타입스크립트는 정적 타입 언어로, 변수 선언 시 데이터 타입을 명시하거나 컴파일러가 알아서 타입을 유추하는 타입 추론 기능을 사용해요.
- 기본 데이터 타입:
number,string,boolean,null,undefined - 객체 타입:
object,array,tuple(각 요소가 다른 타입을 가질 수 있는 배열) - 특수 타입:
any(어떤 타입이든 허용),unknown(타입을 미리 알 수 없는 경우)
개발자가 직접 타입을 명시하지 않아도 초기화된 값을 바탕으로 타입을 정해주는 것을 타입 추론이라고 해요. 반대로 개발자가 변수나 함수의 타입을 직접 지정해 주는 것을 타입 명시라고 해요.
// 변수의 데이터 타입 명시
let data: 데이터타입 = 값;
// 함수의 매개변수와 리턴 타입 명시
function func(a: number, b: string, c?: boolean): void {
// 리턴 타입이 void인 경우 내부에 return이 없어야 해요.
}
// 객체의 데이터 타입 명시
let obj: {
prop1: string;
prop2: number;
} = { prop1: "test", prop2: 123 };타입스크립트는 타입 추론과 명시를 통해 정해진 변수의 타입과 다른 타입의 값을 할당하려고 하면 에러를 발생시켜요.
let a = 1; // number로 타입 추론됨
a = '문자열'; // Error: Type 'string' is not assignable to type 'number'.인터페이스 (Interface)
interface 키워드를 사용해 사용자 정의 타입을 만들 수 있어요. 정의된 인터페이스는 재사용이 가능하고, 해당 타입을 부여받은 객체는 인터페이스에 정의된 속성들을 반드시 포함해야 해요. 속성 이름이나 함수의 매개변수 뒤에 ? 를 붙이면 필수가 아닌 선택적 속성으로 만들 수 있어요.
interface Person {
name: string;
age: number;
gender?: string; // 선택적 속성
setName: (name: string) => void;
}
class Teacher implements Person {
name = 'Lee';
age = 43;
setName(name: string): void {
this.name = name;
}
}열거형 (enum)
열거형은 관련된 상수들의 집합을 정의할 때 사용해요. 타입스크립트 코드 상에서는 정수를 직접 명시하지 않아도, 내부적으로 0부터 시작하는 정수 값이 자동으로 할당되어 동작해요.
enum GenderType {
Male,
Female
}
interface Person {
name: string;
age: number;
gender?: GenderType;
setName: (name: string) => void;
}
class Teacher implements Person {
name = "Lee";
age = 43;
gender = GenderType.Male; // 내부적으로 0으로 취급됨
setName(name: string): void {
this.name = name;
}
}실제로 컴파일된 자바스크립트 코드를 확인해 보면, 열거형 객체가 정수를 매핑하는 즉시 실행 함수 형태로 변환되어 사용되는 것을 알 수 있어요.
