안녕하세요! 수진입니다:)
오늘은 웹 개발을 공부하면서 한 번쯤은 반드시 만나게 되는 TypeScript(타입스크립트)에 대해 알아보겠습니다!
JavaScript를 공부하다 보면 분명 이런 경험이 있습니다.
저도 가끔 내가 다시 스무 살이면 좋겠다 라는 생각을 하는데요 ㅎㅎ
let age = 20;
age = "스무살";
위 코드는 JavaScript에서는 오류가 발생하지 않습니다.
하지만 실제 프로젝트에서는 이런 실수가 예상치 못한 버그를 만들기도 합니다.
이러한 문제를 해결하기 위해 등장한 것이 바로TypeScript 입니다.
오늘은 타입스크립트의 핵심 개념인
- 변수 선언
- 기본 타입
- 객체 타입
- 타입 정의
- 유니언 타입
- 제네릭
- 데코레이터
까지 한 번에 정리를 해보겠습니다.
TypeScript란
TypeScript는 Microsoft에서 개발한 JavaScript의 확장 언어입니다.
가장 큰 특징은 정적 타입 검사(Static Type Checking)를 지원한다는 점입니다.
즉, 프로그램을 실행하기 전에 타입 오류를 미리 찾아낼 수 있습니다.
예를 들어, 코드로 설명해보자면
let user = {
firstName: "soo",
lastName: "note",
role: "Developer"
;
user.role = 100;
위 코드는 role이 문자열(string)이어야 하는데 숫자를 넣었기 때문에 TypeScript가 오류를 알려줍니다.
실행하기 전에 버그를 발견할 수 있다는 것이 큰 장점입니다.
변수선언
TypeScript에서는 JavaScript와 동일하게
- const
- let
- var
를 사용할 수 있습니다.
const name = "Sujin";
let age = 23;
var hobby = "eating";
일반적으로는
변경되지 않는 값 -> const
변경되는 값 -> let
사용을 권장합니다.
TypeScript 기본 타입
TypeScript는 다양한 타입을 지원합니다.
1. boolean = 참(true) 또는 거짓(false)
let isStudent: boolean = true;
2. number = 숫자 타입
let age: number = 23;
3. string = 문자열 타입
let name: string = "수진";
4. null = 값이 비어있음을 의미
let value: null = null;
5. underfined = 값이 아직 정의되지 않은 상태
let result: undefined = undefined;
6. bigint = 아주 큰 정수를 다룰 때 사용
const big: bigint = 12345678901234567890n;
7. symbol = 고유한 값을 생성할 때 사용
const id = Symbol("id");
객체(Object) 타입
객체는 여러 데이터를 하나로 묶어 관리할 수 있습니다.
const user = {
name: "sujin",
age: 23,
hobby: ["Movie", "eating"]
};
객체 타입을 사용하면 데이터 구조를 명확하게 표현할 수 있습니다.
실제 프로젝트에서 가장 많이 사용하는 타입 중 하나입니다.
함수(Function) 타입
TypeScript에서는 함수의 매개변수와 반환 타입도 지정할 수 있습니다.
function getLength(obj: string): number {
return obj.length;
}
장점은 함수 사용 방법을 명확하게 알 수 있다는 것입니다.
코드를 처음 보는 사람도 쉽게 이해할 수 있습니다.
타입 정의하기
반복적으로 사용하는 타입은 직접 정의할 수 있습니다.
Interface 사용
interface User {
name: string;
age: number;
}
const user: User = {
name: "sujin",
age: 23
};
interface는 객체 구조를 정의할 때 자주 사용됩니다.
class 사용
class User {
constructor(
name: string,
age: number
) {}
}
const user = new User("sujin", 23);
객체를 생성하고 관리할 때 사용됩니다.
Type Alias 사용
type MyUser = User;
기존 타입에 새로운 이름을 붙일 수 있습니다.
유니언(Union)타입
하나의 변수에 여러 타입을 허용하는 기능입니다.
let status: string | number;
또는
type Status = "Ready" | "Waiting";
사용 가능한 값 자체를 제한 할 수도 있습니다.
이 기능은 잘못된 값 입력을 막는 데 매우 유용합니다.
제네릭(Generic)
처음 공부할 때 가장 어렵게 느껴질 수 있는 개념입니다.
하지만 이해하면 정말 강력합니다.
일반 함수 예시입니다.
function identity(arg: any): any {
return arg;
}문제는 반환 타입이 any라는 점입니다.
그래서 타입 정보가 사라집니다.
제네릭을 사용하면
function identity<T>(arg: T): T {
return arg;
}
호출 시 전달한 타입이 그대로 유지됩니다.
const text = identity<string>("Hello");
const num = identity<number>(100);
제네릭은 재사용성이 증가, 타입 안정성 향상 이라는 두 가지 장점을 제공합니다.
데코레이터(Decorator)
NestJS를 공부하다 보면 반드시 만나게 되는 기능입니다.
데코레이터는 클래스나 함수에 추가 기능을 붙이는 문법입니다.
예를 들어
function deco(
target: any,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log("데코레이터 실행");
}
사용 예시
class TestClass {
@deco
test() {
console.log("함수 호출");
}
}
실행 결과
데코레이터 실행
함수 호출
NestJS에서 자주 보는 @Controller() @Get() @Post() @Injectable() 등도 모두 데코레이터입니다.
TypeScript를 사용하는 이유
1. 컴파일 단계에서 오류 발견 가능
2. 코드 자동완성 기능 향상
3. 대규모 프로젝트 관리 편리
4. 협업 시 가독성 향상
5. 유지보수 비용 감소
특히 규모가 커질수록 JavaScript보다 TypeScript의 장점이 더욱 커집니다.
글을 마치며 오늘 배운 내용 꼭 복습하세요~!
오늘 포스팅이 도움이 되셨나요?
긴 글 읽어주셔서 감사하고 오늘 하루도 수고하셨습니다~