2025 / 02 / 28
오늘 수업 시간에는 지금까지 배운 타입스크립트의 기본 개념에 대해 정리하는 시간을 가졌습니다. 이번 벨로그 포스팅에서는 기본 개념과 전체적으로 한 번 정리하고, 헷갈릴 수 있을 것 같은 부분은 조금 더 자세히 작성해보도록 하겠습니다.
💌 타입스크립트
- 타입스크립트는 마이크로소프트에서 개발한 자바스크립트의 상위 집합으로, 자바스크립트에 정적 타입을 추가한 언어입니다.
- 자바스크립트의 동적 타입을 보완하여 코드의 안전성을 높이고, 컴파일 시 오류를 발견할 수 있어 더 안전한 코드 작성을 가능하게 합니다.
1. 특징
1. 정적타입을 지원합니다.
- 컴파일 타임에 타입 검사를 수행해 오류를 미리 발견할 수 있습니다.
2. 객체지향 프로그래밍을 지원합니다.
- 클래스를 사용하여 객체를 정의하고, 상속, 다형성 등을 구현할 수 있습니다.
3. 자바스크립트의 최신 문법을 지원합니다.
- ES6 이상의 문법을 사용할 수 있습니다.
4. 자바스크립트와 100% 호환됩니다.
- 기존 자바스크립트 코드를 타입스크립트 코드로 변환하거나 통합할 수 있습니다.
💌 설치와 세팅
타입스크립트를 사용하기 위한 준비 과정을 알아보겠습니다.
1. Node.js 설치
- 타입스크립트를 사용하기 위해 먼저 Node.js가 필요합니다.
- Node.js 공식 사이트에서 다운로드하여 설치합니다.
2. 타입스크립트 설치
- 타입스크립트를 전역으로 설치합니다.
npm install -g typescript
3. 버전 확인
- 설치가 완료되면, 타입스크립트 버전을 확인할 수 있습니다.
tsc --version
4. 설정 초기화
- 타입스크립트 프로젝트를 시작하기 전에 설정 파일을 초기화합니다.
tsc --init
5. 타입스크립트 파일 컴파일
- 타입스크립트 파일(.ts)을 자바스크립트 파일(.js)로 컴파일합니다.
tsc
6. 타입스크립트 변경 감지
- 타입스크립트 파일을 수정한 후 자동으로 컴파일하려면 watch 모드를 사용합니다:
tsc --watch
💌 타입스크립트의 기본 타입
- 타입스크립트에서 사용할 수 있는 타입에 대해 알아보겠습니다.
1. 원시 타입
1. 문자열 (String)
- 텍스트를 표현합니다.
2. 숫자 (Number)
- 정수, 부동소수점 숫자 등을 포함합니다.
3. 논리형 (Boolean)
- true 또는 false 값을 가집니다.
4. null
- 값이 없음을 나타냅니다.
5. undefined
- 정의되지 않은 값을 나타냅니다.
6. Bigint
- 아주 큰 정수 값을 표현합니다.
7. Symbol
- 고유한 값의 생성에 사용됩니다.
2. TS에만 존재하는 타입
1. any
- 어떤 타입도 허용하며, 타입 체크가 되지 않습니다.
2. unknown
- any와 비슷하지만, 사용하기 전에 타입 체크가 필요합니다.
3. never
- 어떤 값도 반환하지 않거나, 절대 발생하지 않는 값을 나타냅니다.
💌 type
- type은 타입에 이름을 붙이는 역할을 합니다.
type NewStringType = string;
let stringVar: NewStringType = "hello World";
type IdolType = { name: string; age: number };💌 interface
- interface는 객체의 구조를 정의하는 역할을 하며, 타입과 비슷한 역할을 합니다.
interface Idol {
name: string;
age: number;
}💌 type과 interface의 차이
- type은 기본 데이터 타입 (string, number 등)을 선언할 수 있습니다.
- interface는 객체의 구조만 정의할 수 있으며, 원시 타입을 선언할 수 없습니다.
- interface는 확장 가능하여 다른 interface를 상속할 수 있지만, type은 지원하지 않습니다.
💌 Optional 속성
- 값을 넣어도 되고 안 넣어도 되는 속성을 정의합니다.
?로 표시됩니다.
interface IdolOptional {
name: string;
age?: number;
}💌 Enum
- Enum은 열거형 타입으로, 관련된 값들을 묶어서 나타낼 수 있습니다.
enum State {
DONE,
LOADING,
INITIAL,
ERROR = "ERROR",
}
console.log(State.DONE); // 0
console.log(State.ERROR); // "ERROR"💌 타입 추론
- 타입스크립트는 변수에 값이 할당되면 그 타입을 추론합니다.
let stringType = "string"; // 타입이 자동으로 string으로 추론됨
- 상수를 사용하면 값이 고정되어 구체적인 값으로 타입이 추론됩니다.
const constString = "const"; // constString은 "const"로 고정됨
- 객체도 타입 추론이 가능합니다:
const idol = { name: "아이돌", age: 12 }; // 객체 타입 추론💌 타입 캐스팅
- 타입 캐스팅은 타입을 강제 변환하는 방법입니다.
as키워드를 사용하여 캐스팅합니다.
const youjin = { name: "안유진" as const }; // name은 "안유진"으로 고정됨
- 타입 캐스팅 후, 원래 타입에 맞는 메서드를 사용할 수 있습니다.
let num = 5;
(num as string).toUpperCase(); // num을 string으로 캐스팅 후 메서드 호출💌 유니온 타입
- 유니온 타입은 두 가지 이상의 타입을 하나의 변수에 할당할 수 있도록 합니다.
|기호를 사용하여 두 개 이상의 타입을 나열합니다.
type StringOrNumberType = string | number;
let stringOrNum: StringOrNumberType = "hello";
stringOrNum = 3;1. 유니온 타입의 제한
- 특정 값만 입력할 수 있도록 제한할 수 있습니다.
type StateTypes = "DONE" | "LOADING" | "INITIAL" | "ERROR";
let state: StateTypes = "DONE"; // 가능
state = "LOADING"; // 가능
state = "PENDING"; // 불가능2. 리스트(배열)의 유니온
- 배열에 다양한 타입을 지정할 수 있습니다.
type StringListOrNumList = string[] | number[];
type StrOrNumList = (string | number)[];3. interface의 유니온
- 인터페이스에서도 유니온을 사용할 수 있습니다.
interface Lion {
name: string;
age: number;
}
interface Tiger {
name: string;
age: number;
color: string;
}
type LionOrTiger = Lion | Tiger;
let lionOrTigerVar: LionOrTiger = {
name: "호랑이",
age: 2,
color: "주황색",
};
console.log(lionOrTigerVar.color); // Tiger 타입으로 지정됨4. 서로 관계없는 유니온
- 서로 관계없는 타입의 유니온은 사용할 수 없습니다.
type Person = { name: string; age: number };
type Dog = { breed: string; country: string };
type PersonOrDog = Person | Dog;
const personOrDogObj: PersonOrDog = {
name: "철수",
age: 10,
country: "대한민국",
};38일차 후기
- 며칠동안 타입스크립트에 대해 나눠서 배워서 내용이 많다고 느껴지진 않았습니다.
- 인터페이스와 타입이 비슷해서 가끔 작성 방법을 헷갈리는 것 빼고는 괜찮습니다.
- 타입스크립트에서 틀리면 알려주니까 일단 써보고 틀린 후에 고쳐야겠습니다.
- 기본적인 개념은 어느정도 이해하고 기억할 수 있는 것 같습니다.
- 아직 클래스 배우기 전이니까 그나마 다행인가... 앞으로가 걱정입니다. ٩(๑˃̌ۿ˂̌๑)۶
૮꒰ ྀི〃´꒳`〃꒱ა