프론트엔드 기초: 타입스크립트 입문하기

/date 24.10.28.

 

📌 타입스크립트란

- 타입스크립트가 왜 필요한가?: 자바스크립트는 어렵지 않게 배울 수 있는 편리한 언어이긴 하지만, 코드가 너무나도 지저분하다. 코드의 스케일이 커질수록 코드 관리가 되지 않아 협업에 문제가 생길 수도 있다. -> 타입스크립트로 해결

• 타입스크립트 = 자바스크립트 + 타입체크
• 타입스크립트 환경에 자바스크립트를 코딩하면 동작한다. 반면 자바스크립트 환경에 타입스크립트를 코딩하면 동작하지 않는다.
• 자바스크립트와 타입스크립트의 코드 스타일 비교

function plus(a, b){
	return a+b;
}

 

 

자바스크립트의 경우 타입 명시를 해주지 않아도 된다.

function plus(a: number, b: number){
	return a+b;
}

 

타입스크립트의 경우 타입 명시를 해주어야 한다.

 

- 타입스크립트의 장점

• 자바스크립트 기반보다 버그를 줄일 수 있고 유지보수가 쉽다.
• 강력하고 높은 퀄리티의 코드를 생산할 수 있다
• 데이터 타입을 표기하여 컴파일 타임 시 오류 체크가 가능해진다. 즉, 타입스크립트는 언어인 동시에 컴파일러라고 생각하면 된다.

 

 

📌 첫 번째 프로젝트 만들기

 

app.ts파일에 간단한 함수를 만들었다. 터미널에 tsc app.js를 입력하면 타입스크립트 파일을 컴파일한 자바스크립트 파일이 자동으로 생성된다.

 

 

tsc --init을 입력하면 해당 파일에 대한 tsconfig.json파일이 자동으로 생성된다.

 

매번 컴파일 명령어를 입력하기 귀찮을 수 있다. tsc -w app.ts 명령어를 통해 계속해서 타입스크립트 파일을 지켜보고(watch) 있을 것을 설정할 수 있다.

 

 

 

 

📌 데이터 타입과 추론

- 왜 데이터 타입이 그렇게 중요한가?

• 자바스크립트에 정적 타입을 적용한 것이 타입스크립트
• 자바스크립트의 변수에는 어떤 데이터 타입의 값도 할당될 수 있다. 어떤 변수에 문자열을 할당하고, 누군가가 그 이후에 실수로 해당 변수에 숫자 값을 넣는 경우가 발생할 수 있다. 자바스크립트는 이를 문제없는 코드로 인식하여 에러를 사전에 막지 못한다.
• 타입스크립트는 타입 추론을 한다: 타입을 명시하지 앟더라도 내부적으로 어떤 타입인지 살펴보고 변수의 타입을 자동으로 판단한다.

 

- 타입 추론(Type Inference)

• 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다.
• 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다. 예를 들어 let age = 30; 변수를 이렇게 할당한다면, 자동으로 age는 number로 추론된다.
• 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 정확하다.
• 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.

 

- 데이터 타입의 종류

• 타입스크립트에서는 다양한 데이터 타입을 지원한다.
• 데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있다.
• 기본 데이터 타입: number, string, boolean, null(의도적으로 값이 없음을 나타낼 때), undefined(값이 할당되지 않는 변수의 기본값)
• 객체 타입: object, array, tuple
• 특수 타입: any(어떤 타입이든 할당될 수 있는 타입 - var와 유사), unknown

 

 

📌 타입 명시

- 변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정하는 것

let myName: string = 'romiwaves'

 

 

📌 인터페이스

- 인터페이스를 통해 타입을 만들어줄 수 있다.

interface Student{
	stdId: number;
	stdName: string;
	age: number;
	gender: string;
}

function getInfo(id: number) : Student
{
	return {
		stdId: ididid,
		stdName: 'romiwaves',
		age: 129;
		gender: 'idk';
	};
};

 

- 리턴 시 인터페이스에 있는 요소를 하나 빼고 리턴을 시도하면 에러가 발생한다. 즉 모든 요소가 포함되어야 Student라는 타입이 되는 것이다.

- 있어도 되고, 없어도 나머지만 리턴할 수 있도록 프로퍼티 옵션을 설정하는 방법은 프로퍼티 이름 뒤에 ?(물음표)를 붙여 주는 것이다. 해당 프로퍼티는 선택적 프로퍼티가 된다. 함수에서도 마찬가지로 매개변수의 이름 뒤에 물음표를 붙이면 옵셔널로 사용이 가능하다.

 

- 인터페이스의 본질

• 사용자 정의 타입이다: string이나 number와 같은 기본 타입처럼 데이터 타입으로 사용이 가능하다
• 선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여준다
• 메소드도 인터페이스 내에서 선언이 가능하다: 반드시 메소드 오버라이딩을 해주어야 한다.
• 인터페이스르 클래스에 상속할 수 있다: 이는 확장이 아닌 구현 개념이다

 

 

📌 열거형

- 열거형은 값에 제한을 둘 수 있는 사용자 정의 타입이다.

enum GenderType{
	Female,
	Male
}

interface Student{
	stdId: number;
	stdName: string;
	age: number;
	gender: GenderType;
}

function getInfo(id: number) : Student
{
	return {
		stdId: ididid,
		stdName: 'romiwaves',
		age: 129;
		gender: GenderType.Male;
	};
};