1. TypeScript📃
01. TypeScript란?
TypeScript는 JavaScript의 상위 언어로, JS의 모든 기능과 정적 타입 시스템을 제공한다. 즉, JS처럼 작동하지만, 코드에서 예상치 못한 동작을 감지하여 버그 가능성을 낮출 수 있다. 모던 개발 환경에서 안전한 프로그래밍을 위해 TypeScript는 중요한 언어이다.
*정적 타입 시스템이란? : 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식
02. JavaScript vs TypeScript
| JavaScript | TypeScript | |
|---|---|---|
| 타입 시스템 | 동적 | 정적 |
| 컴파일 | 필요X | JavaScript로 컴파일 필요 |
| 개발 경험 | 유연함, 빠름 | 코드 완성, 타입 검사 등으로 향상된 개발 경험 |
| 프로젝트 규모 | 작은 규모에 적합 | 대규모 프로젝트에 적합 |
| 런타임 오류 | 런타임에 타입 오류 발견 가능 | 컴파일 타임에 타입 오류 발견 가능 |
| 학습 곡선 | 낮음 | 높음 |
| 도구 지원 | 광범위한 도구와 라이브러리 지원 | JavaScript 생태계의 모든 도구와 라이브러리 지원 |
| 브라우저 지원 | 모든 브라우저에서 기본적으로 지원 | 트랜스 파일 된 JavaScript가 모든 브라우저에서 지원 |
*컴파일(Compile)이란? : 소스 코드(TypeScript)에서 기계가 이해할 수 있는 코드(JavaScript)로 변환하는 과정
*런타임이란? : 코드가 실행되는 순간. 즉, JS로 변환된 코드가 실제로 동작하는 시점.
*컴파일 타임이란? : 코드를 실행하기 전에 발생하는 시간. 즉, 소스 코드를 JavaScript로 변환하는 시점
03. TypeScript 동작원리
- TypeScript 컴파일러가 코드를 분석 (= 컴파일 타임에 분석)
- 분석 이후 오류가 없다면 JavaScript 코드로 "모두" 변경
- 런타임에는 JavaScript와 동일하게 동작
2. 타입 선언하기📢
01. 타입이란?
타입이란 값이 가진 프로퍼티와 메서드 등을 참조하는 방법으로, 즉 변수,함수 등이 어떤 속성을 가지고 있는지 표현하는 방법이다.
02. 타입 기본 형태와 종류
- 기본 형태
function someFunc(a: TYPE_A, b: TYPE_B): TYPE_RETURN {
return a + b;
}
- 자주 사용하는 타입
| 타입명 | 설명 |
|---|---|
| boolean | 불리언(true 또는 false) |
| string | 문자열 |
| number | 숫자 |
| string[] / Array< string > | 요소가 문자열인 배열 |
| number[] / Array< number > | 요소가 숫자인 배열 |
| any[] | 요소의 타입이 모두 가능한 배열 |
| interface | 객체 구조 |
| type (타입 별칭) | 객체 구조 |
| null | null |
| undefined | undefined |
| any | 모든 타입 |
| void | return값이 없는 함수 |
- 여러 타입을 동시에 정의
| 타입명 | 설명 |
|---|---|
| │ | union: OR 연산자, A이거나 B |
| & | intersection: AND 연산자, A이면서 동시에 B |
- 기타 타입
| 타입명 | 설명 |
|---|---|
| readonly | 읽기 전용 (수정X) |
| tuple | 튜플: 길이와 각 요소의 타입이 고정된 배열 |
| enum | 열거형: 관련된 값들의 집합을 정의 (기본: 숫자 0부터 증가 / 그 외는 =로 할당) |
| unknown | 알 수 없는 타입 |
03. interface vs type alias
interface와 type alias는 매우 유사하다. 그래서 대부분의 경우 자유롭게 선택하여 사용할 수 있다. 하지만 약간의 차이점이 있으니 참고해야한다.
- 확장성 :
interface는 항상 확장 가능하지만,type alias는 한 번 정의되면 다시 열어 새로운 속성을 추가할 수 없다. - 복잡한 타입 표현 :
interface는 객체 형태의 타입을 정의하는 데에 주로 사용하며,type alias는 객체 형태 뿐만 아니라, 유니온 타입, 튜플, 매핑된 타입 등 복잡한 타입 표현에 유리하다.
interface vs type alias 관련 사이트
04. 구조적 타입
TypeScript의 타입 시스템은 구조적 타입 시스템으로, 값의 형태와 구조에 따라 타입이 결정된다. 즉, 타입의 실제 선언보다 실질적으로 어떤 프로퍼티와 메서드를 가지고 있는지가 더 중요하다. 구조적 타입 시스템에서는 두 개체가 동일한 구조를 가지면 동일한 타입으로 간주된다.
//예시
interface Person {
name: string;
age: number;
}
let p1: Person = { name: "Alice", age: 25 };
let p2 = { name: "Bob", age: 30 };
p1 = p2; //true : p2는 Person과 동일한 구조를 가짐