🟦 타입스크립트란?

타입스크립트는 자바스크립트에 타입 문법이 추가된 언어로 정적 타이핑을 통해 코드의 오류를 사전에 방지 할 수 있다.

💡 동적 타이핑 VS 정적 타이핑

동적 타이핑은 변수에 할당된 값의 타입이 실행 시점의 결정되는 방식.
정적 타이핑은 변수에 할당된 값의 타입이 코드 작성 시점에 결정되는 방식.

동적 타이핑은 실행 시점에야 타입 오류를 발견하게 되어 타입 안정성이 떨어진다.

짧은 코드라면 타입오류를 코드 상에서 발견할 수 있겠지만, 자바스크립트 애플리케이션의 규모가 커질수록 실행시점에만 발견할 수 있는 오류가 늘어나게 되고 이는 유지보수에 어려움을 가져온다.

이러한 동적 타이핑 언어의 한계를 해결하기 위해 타입스크립트가 등장했다.

✅ 타입스크립트의 특징

타입스크립트 코드를 실행시키는 런타임 환경은 없기 때문에 자바스크립트 코드로 변환하기 위해 컴파일을 진행하는데 이때, 정적 타이핑을 검사해 코드를 실행하지 않고 타입 오류를 찾는다.

타입스크립트는 다음과 같은 특징이 있다.

타입스크립트는 자바스크립트의 상위 집합이다.
타입스크립트를 실행시키는 런타임 환경은 없다.
컴파일 과정에서 정적 타이핑을 겁사해 타입 오류를 체크한다.

타입스크립트는 자바스크립트의 상위 집합이다.

모든 자바스크립트 코드는 타입스크립트 코드로 간주되며, 역은 성립하지 않는다.

const message = "Hello, World!";
// TypeScript 컴파일러에서 오류 없음, JavaScript 코드를 이해함.
 
const message: string = "Hello, World!";
// JavaSciprt 엔진에서 문법 오류, TypeScript 코드를 이해하지 못함.

타입스크립트를 실행시키는 런타임 환경은 없다.
- 자바스크립트 코드는 브라우저, Node.js 등의 런타임 환경에서 실행
- 타입스크립트 코드는 컴파일을 통해 자바스크립트로 변환된 후 브라우저, Node.js 등의 런타임 환경에서 실행
컴파일 과정에서 정적 타이핑을 겁사해 타입 오류를 체크한다.
- 컴파일 과정에서 타입 오류를 체크하기 때문에 코드를 실행하지 않고도 타입오류를 체크할 수 있다.

💾 타입스크립트 컴파일러

타입스크립트 컴파일러 tsc 는 코드를 검사해 타입 오류를 확인하고 자바스크립트 코드로 변환한다.

tsc 는 typescript npm package 에 포함되어 있다.

npm install typescript

// utils.ts
function add(a: number, b: number,): number {
//               a           b        반환값
	return a + b;
}
 
add(1, "2"); // 타입 에러

npx tsc utils.ts // 컴파일을 통해 utils.js 파일 생성

// utils.js
function add(a, b) { // 컴파일을 통해 타입스크립트 문법 제거
	return a + b;
}
 
// 컴파일 과정 중에 타입 에러 발생

💿 tsserver

VSCode와 같은 IDE는 tsserver 를 통해 타입스크립트 코드를 분석하고 타입 오류를 검사하며 IDE와 통신해 타입 오류를 표시하고 코드 자동완성, 코드 리팩토링 등의 기능을 제공한다.

tsserver 또한 typescript npm package 에 포함되어 있다.

tsserver 가 .ts 와 .js 파일을 분석해 타입 오류를 검사한다.

(제대로 작동하지 않을때 cmd + shift + P → TypeScript: Restart TS Server 실행)

Syntax, 문법

값의 타입이 결정되는 3가지 방식

1. Type Annotation (타입 주석)

코드 작성시 값의 타입을 명시적으로 지정

변수 선언
```
const name: string = "이구름";
```

함수 (파라미터와 반환 값의 타입)

function greet(name: string): string {
	return `안녕하세요, ${name}님!`;
}

2. Type Inference (타입 추론)

tsc 가 코드의 문맥을 바탕으로 값의 타입을 자동으로 결정하는 방식

// 값의 타입을 지정하지 않았지만 할당된 값이 string이기 때문에 tsc가 string으로 추론
let username = "이구름";
 
// 반환 타입을 명시하지 않았지만 return에서 string이 반환되므로 tsc가 string으로 추론
function greet(name: string) {
	return `안녕하세요, ${name}님!`;
}
 
// greetMessage 변수의 타입을 명시하지 않았지만 greet 함수의 반환 값이 string 이므로
// tsc가 string으로 추론
const greetMessage = greet(username);

3. Type Assertion (타입 단언)

개발자가 직접 어떤 값에 특정 타입으로 명시해 tsc가 해당 타입으로 인식하도록 하는 방식

const usernameEl = document.getElementById("username");
usernameElement.innerText = "이구름";
// getElementById의 반환타입은 usernameEl 또는 null
// tsc는 'usernameEl is possible 'null'이라고 말한다.
 
const usernameEl = document.getElementById("username") as HTMLElement;
usernameElement.innerText = "이구름";
// as HTMLElement 로 타입 단언을 해 tsc는 usernameEl을 HTMLElement 로만 인식

const usernameEl = <HTMLElement>document.getElementById("username");

const usernameEl = document.getElementById("username") as HTMLElement;

타입 단언은 두 방식 다 가능하지만 코드의 일관성과 가독성을 높이기 위해 as 를 권장한다.

타입 단언의 조건

타입 단언은 더 구체적이거나 덜 구체적인 타입으로만 지정할 수 있다.

const message: string = "hello";
// string 타입을 더 구체적인 "hello" 리터럴 타입으로 단언
 
const value1 = message as "hello";
// stirng 타입을 덜 구체적인 any 타입으로 단언
 
const value2 = message as any;
 
const message: string = 2 as any as string;
// number 타입을 string 타입으로 단언하고 싶다면 any 또는 unknown으로 단언했다가
// 다시 원하는 타입으로 단언하는 방식을 사용한다. (꼭 필요한 경우에만 사용)

💡 더 구체적인 & 덜 구체적인 타입

더 구체적은 특정 타입으로 간주될 수 있는 값의 종류가 제한적이고 구체적
덜 구체적은 특정 타입으로 간주될 수 있는 값의 종류가 제한적이지 않고 넓고 일반적

1. 원시 타입과 리터럴 타입

string 과 string literal 타입 비교
let stringType: string;  
stringType = "hello"; // ok  
stringType = "world"; // ok  
  
let StringLiteralType: "hello";  
stringLiteralType = "hello"; // ok  
stringLiteralType = "world"; // Error!  
이 경우에 string literal 타입이 더 구체적이고 string 타입은 덜 구체적이다.

2. 유니온 타입

string | number | null 과 string | number 유니온 타입 비교
let unionType1: string | number | null;  
unionType1 = "hello"; // ok  
unionType1 = 42; // ok  
unionType1 = null; // ok  
  
let unionType2: string | number;  
unionType2 = "hello"; // ok  
unionType2 = 42; // ok  
unionType2 = null; // Error!  
string | number | null 은 string, number, null 타입의 값들 모두 할당 가능

string | number 은 string, number 타입의 값만 할당 가능

이 경우에 string | number 유니온 타입이 더 구체적인 타입
string | number | null 유니온 타입이 덜 구체적인 타입이다.

3. 객체 타입
let cat = {  
	name: "이구름",  
	age: 7,  
};  
  
let developer = {  
	name: "이재훈",  
	age: 29,  
	position: "FE",  
};  
  
person = developer; // ok  
developer = person; // Error!  
cat 객체 타입의 변수에는 developer 객체를 할당 할 수 있다.
developer 객체에 string 타입의 name과 number 타입의 age가 있기 때문이다.

developer 객체 타입의 변수에는 cat 객체를 할당 할 수 없다.
cat 객체에 postion 프로퍼티가 없기 때문이다.

cat 타입은 position이 없어도 가능하지만 developer는 모두 있어야해 값의 종류가 제한적이라고 볼 수 있다.

이를 통해, developer 객체 타입이 더 구체적인 타입이고 cat 객체 타입은 덜 구체적인 타입이다.

Non-null Assertion Operator (`!`)

값이 null 또는 unedfined 가 아님을 명시해 tsc가 해당 값을 안전하게 사용하도록 보장한다.

컴파일 단계에서는 null이나 undefined 일 수 있지만 런타임에서는 가능성이 없음을 명시한다.

const usernameEl = document.getElementById("username")!;
usernameEl.innerText = "이구름";

타입의 종류

1. 원시 타입

자바스크립트의 Primitive Value에 대응하는 타입

const str: string = "str";
const num: number = 240903;
const boo: boolean = false;
const und: undefined = undefined;
const nul: null = null;
const sym: symbol = Symbol("symbol");
const big: bigint = BigInt("240903");

⛔ Wrapper Object Type은 직접 쓰지 않는다.

Wrapper Object Type은 Primitive Value를 객체로 감싸는 타입이다.

// str1의 타입은 String으로 추론  
const str1 = new String("hello");  
// String 타입에 string 타입 값을 할당  
const str2: String = "hello";  
// string 타입에 String 객테를 할당하려고 하면 에러 발생  
const str3: string = new String("hello");

2. 유니온 타입

유니온 타입은 두개 이상의 타입 중 하나일 수 있음을 나타내는 타입이다.

유니온 타입을 구성하는 각 타입을 유니온 멤버라고 부르고 | 기호로 구분한다.

let birthday: string | number = 20240901; // number 타입의 값 할당
birthday = "2024.09.01"; // string 타입의 값 할당

유니온 타입의 값은 바로 사용하기보다 타입 좁히기를 통해 특정 타입으로 좁혀 사용한다.

🔗 타입 좁히기의 종류

link_to_page