TypeScript 기본 다지기 Ⅰ

이제 자바스크립트와 리액트에 좀 적응할 쯔음 .. 또 TS라는 신문물을 접하게 되니 마음이 정말 새롭고 괴롭다.. ^^
강의를 들어도 감이 잘 안 오는 건 문법에 어색해서일테니 직접 써보며 익숙해지자!

📌 1. TypeScript 기본 개념

---

1. TypeScript란?

: 타입스크립트(TypeScript, TS)는 마이크로소프트에서 만든 자바스크립트의 확장 버전이다. 기본적으로 자바스크립트의 모든 기능을 지원하며, 정적 타입을 추가할 수 있다.

2. TypeScript와 JavaScript의 차이점

	자바스크립트(JavaScript)	타입스크립트(TypeScript)
타입 시스템	동적 타입(런타임에 타입 결정)	정적 타입(컴파일 단계에서 타입 확인)
컴파일 여부	브라우저에서 바로 실행 가능	실행 전, tsc로 컴파일 필요(.ts → .js)
에러 발견 시점	실행 중에야 에러 확인 가능	코드 작성 중에 에러 발견 가능
객체 지향 프로그래밍(OOP)	지원하지만 제한적	interface, enum, class 등 지원
코드 유지보수	대규모 프로젝트에서 어려움	타입 덕분에 유지보수 용이

✅ 쉽게 말하면 TypeScript는 JavaScript의 단점을 보완하고, 오류를 미리 방지할 수 있는 언어다!

📌 2. 기본 타입과 타입 주석

---

1. 타입 주석(Type Annotation)

: 타입 스크립트에서는 변수나 함수에 명시적으로 타입을 지정할 수 있다.
: 타입명을 붙여서 사용한다.

let message: string = "Hello, TypeScript!";
let age: number = 25;
let isDeveloper: boolean = true;

2. 기본 타입

🔹 문자열 (string)

let name: string = "Alice";
let gretting: string = `Hello, ${name}!`;

🔹 숫자 (number)

let age: number = 30;
let temperature: number = -5.5;
let hex: number = 0xff; // 16진수
let binary: number = 0b1010; // 2진수
let octal: number = 0o744; // 8진수

🔹 불리언 (boolean)

let isCompleted: boolean = true;
let hasPermission: boolean = false;

🔹 null과 undefined

let empty: null = null;
let notAssigned: undefined = undefined;

• 🚨 주의!
  strictNullChecks 옵션이 true인 경우, null과 undefined는 number, string 등의 타입에 할당할 수 없다.

  let name: string = null;  // ❌ 오류 발생
  let age: number = undefined;  // ❌ 오류 발생

  따라서 null과 undefined도 포함하도록 하려면 유니온 타입(|) 을 사용해야 한다!

🔹 배열 (Array)

// 1. 대괄호 방식
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];

// 2. 제네릭 방식
let scores: Array<number> = [80, 90, 100]

🔹 객체 (Object)

let person: {name: string; age: number} = {
	name: "Alice",
	age: 25
}

🔹 튜플 (Tuple)

: 튜플은 고정된 길이와 순서를 가지는 배열이다. 순서를 가지기 때문에 꼭 지켜줘야 한다!

let user: [string, number] = ["Alice", 25] // 문자열 + 숫자 조합

let wrongUser : [string, number] = [25, "Alice"] // ❌ 오류 발생

🔹 열거형 (Enum)

: 특정 값들을 그룹으로 묶을 때 사용한다.

enum Direction {
	Up,    // 0
  	Down,  // 1
  	Left,  // 2
  	Right  // 3
}

let move: Direction = Direction.Up;
console.log(move); // 0

기본적으로는 숫자가 0부터 할당되지만 직접 값을 지정할 수도 있다.

enum Status {
	Success = 200,
 	NotFound = 404,
  	ServerError = 500
}

let response: Status = Status.Success;
console.log(response); // 200

🔹 any 타입

: any 타입은 아무 타입이나 허용하는 타입이다. 하지만 TS의 장점을 살리려면 가급적 사용을 피하는 것이 좋다!

let value: any = "Hello";
value = 42; // 가능하지만 비추천
value = true; // 가능하지만 비추천

🔹 unknown 타입

: any와 비슷하지만, 좀 더 타입 안정성을 유지할 수 있는 타입이다.

let value: unknown;
value = "Hello"; // 가능
value = 42; // 가능

let message: string;
// message = value; // ❌ 오류 발생 (unknown 타입은 직접 할당 불가)

🔹 유니온 타입 (|)

: 여러 개의 타입을 동시에 허용할 때 사용한다.

let id: number | string;
id = 10; // 가능
id = "user123"; // 가능
id = true; // ❌ 오류 발생 (number 또는 string만 가능)

🔹 리터럴 타입 (Literal Type)

: 특정한 값만 갖도록 제한할 수도 있다.

let role: "admin" | "user" | "guest";
role = "admin"; // 가능
role = "user"; // 가능
role = "editor"; // ❌ 오류 발생 (지정된 값만 가능)

흠 ... 너무 많은가..??.. 싶지만.. 아직 안 끝났다 투비컨티뉴드 .. 💥