2025 / 02 / 24
오늘 수업 시간에는 타입스크립트에 대해 배웠습니다.
기존에 배웠던 자바스크립트와의 다른 점과 더 유용한 점을 알 수 있었습니다.
사실 사용해본 적은 없어서 크게 와닿지는 않지만 앞으로 사용해 보기위해 자바스크립트와 타입스크립트의 차이점과 내용에 대해 정리해보겠습니다.
💌 자바스크립트
JavaScript
- 웹 페이지에서 동적인 기능을 구현하기 위해 사용하는 스크립트 언어입니다.
- 개발에서 중요한 역할을 하며, 서버 측에서도 Node.js와 함께 사용됩니다.
- 자바스크립트는 동적 타입 언어입니다.
- 변수의 타입을 명시적으로 지정할 필요가 없고, 변수의 값에 따라 타입이 자동으로 결정됩니다.
1) 특징
1. 동적 타입
- 변수의 타입을 명시하지 않아도 됩니다.
2. 인터프리터 언어
- 코드가 실행될 때 바로 해석되어 실행됩니다.
3. 다양한 실행 환경
- 브라우저, Node.js 등 다양한 환경에서 실행 가능합니다.
2) 예시
- 변수의 타입을 명시적으로 지정하지 않아도 괜찮습니다.
let name = "Alice"; // 자동으로 string 타입
let age = 30; // 자동으로 number 타입💌 타입스크립트
TypeScript
- 자바스크립트를 기반으로 한 정적 타입 언어입니다.
- 자바스크립트의 모든 기능을 포함하고 있지만, 타입 시스템을 추가하여 코드의 안정성을 높이고, 개발자의 실수를 줄일 수 있는 기능을 제공합니다.
- 코드 작성 시 타입을 명시해야 하며, 컴파일 과정에서 타입 오류를 미리 발견할 수 있습니다.
1) 특징
1. 정적 타입
- 변수를 선언할 때 타입을 명시해야 합니다.
2. 컴파일 언어
- 컴파일러가 타입 체크를 해주므로, 더 안전한 코드 작성이 가능합니다.
3. 자바스크립트와 호환성
- 자바스크립트 코드도 타입스크립트에서 실행할 수 있으며, 함께 사용할 수 있습니다.
2) 예시
- 변수의 타입을 명시적으로 지정해주어야 합니다.
let name: string = "Alice"; // 타입을 명시적으로 지정
let age: number = 30; // 타입을 명시적으로 지정💌 자바스크립트 데이터 타입
- 기본 데이터 타입을 제공하여 변수 정의 시 타입을 명확히 지정할 수 있습니다.
- 자바스크립트에서 지원하는 데이터 타입을 타입스크립트에서 사용할 수 있습니다.
1) 기본 타입
① string
문자열 타입
let name: string = "Alice";
② number
숫자 타입
let age: number = 30;
③ boolean
논리형 데이터(true & false)
let isActive: boolean = true;
④ bigint
매우 큰 정수값을 처리할 수 있는 타입 (ES2020)
let bigNumber: bigint = BigInt(999999999);
⑤ null
명시적인 null 값
let emptyValue: null = null;
⑥ undefined
정의되지 않은 값
let notDefined: undefined = undefined;
⑦ symbol
고유하고 변경할 수 없는 값
let uniqueID: symbol = Symbol("id");
2) 타입스크립트 전용 타입
① any
아무 타입이나 입력 가능한 타입
- any는 never를 제외한 모든것에 할당 가능합니다.
let anything: any = "Hello"; anything = 10; anything = true; // any는 never를 제외한 모든것에 할당 가능 let any2: any = ""; let string2: string = any2; let number2: number = any2; let null2: null = any2;
② unknown
타입을 알 수 없는 값
- unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없습니다.
// any를 제외한 다른 타입으로 선언된 변수에는 // 값을 할당할 수 없다. let unknown2: unknown = "1"; let unknown3: unknown = unknown2; let testString: string = unknown2; let testBoolean: boolean = unknown2;
③ never
아무 값도 반환하지 않는 함수의 반환 타입
function throwError(message: string): never { throw new Error(message); }
④ list(배열) 타입
특정 타입의 값만 포함할 수 있는 배열
let stringArray: string[] = ["a", "b", "c"]; let numberArray: number[] = [1, 2, 3];
⑤ 객체 타입
객체의 형태를 타입으로 지정
let person: { name: string; age: number } = { name: "Alice", age: 30 };
💌 비교하기
- 자바스크립트와 타입스크립트를 비교하여 표로 정리하였습니다.
| 특성 | 자바스크립트 | 타입스크립트 |
|---|---|---|
| 타입 시스템 | 동적 타입 (Dynamic Typing) | 정적 타입 (Static Typing) |
| 타입 체크 | 런타임에 타입 결정 | 컴파일 시점에 타입 체크 |
| 컴파일 필요성 | 필요 없음 | 컴파일 필요 (타입스크립트 → 자바스크립트) |
| 타입 선언 | 타입을 명시하지 않음 | 타입을 명시해야 함 |
| 호환성 | 자바스크립트 코드 그대로 실행 | 자바스크립트 코드와 호환됨 (변환 필요) |
| 코드 안정성 | 타입 오류를 런타임에 발견 | 컴파일 시점에 타입 오류를 발견 |
| 개발 환경 | 웹 브라우저 및 Node.js에서 실행 가능 | 타입스크립트 컴파일 후 자바스크립트로 실행 |
| 유지보수 | 대규모 프로젝트에서 어려움 | 대규모 프로젝트에서 유지보수 용이 |
34일차 후기
- 교수님께서 타입스크립트가 어렵다고 하셨는데.. 벌써부터 걱정입니다..
- 그래도 초반이라 그런지 별다른 문제 없이 넘어간 것 같습니다.
- 다음 시간 부터는 내용이 어려워 질 것 같으니.. 복습을 더 열심히해야겠습니다.
- 곧 웹 포트폴리오를 만들게 될 것 같습니다.. 한 게 별로 없는거 같은데 괜찮겠죠? ㅠㅜ
- 객체를 사용해서 새로 만들어 본 투두리스트와 크롬 확장 프로그램 중 Momentum을 추가적으로 기능을 넣고 꾸며서 다시 만드는 프로젝트를 했는데 빠른 시일 내에 정리해서 포스팅 해보겠습니다! ٩₍ ᐢ. ̫ .ᐢ ₎و
૮꒰ ྀི〃´꒳`〃꒱ა