#14. 타입스크립트란?

 

타입스크립트(TypeScript)는 JavaScript의 상위 집합(Superset)으로, 
정적 타입 시스템을 제공하는 언어

 

- 컴파일 타임에서 타입 검사를 수행하여 런타임 오류를 줄이고, 코드의 안정성과 가독성을 높임

- ES6+ 기능을 지원하며, 클래스, 인터페이스, 제네릭 등을 활용한 객체 지향적 프로그래밍이 가능

 

대표적인 ES6+ 기능
- let / const: 블록 스코프 변수 선언
- 화살표 함수 (Arrow Function): function 키워드 없이 간결한 함수 표현
- 템플릿 리터럴 (Template Literal): 백틱(`)을 사용한 문자열 보간
- 디스트럭처링 (Destructuring): 객체, 배열의 구조 분해 할당
- 스프레드 연산자 (Spread Operator): ...를 활용한 배열/객체 확장
- 프로미스 (Promise) 및 async/await: 비동기 코드의 체계적인 관리
- 클래스 (Class) 문법: 객체 지향 프로그래밍을 위한 문법 지원
- 모듈 시스템 (import/export): 코드 분리 및 재사용성 향상

 

 

 

 

 

 

 

 

 

타입스크립트를 사용해 본 경험 및 장점

프로젝트에서 타입스크립트를 사용하면서 코드의 안정성, 가독성, 유지보수성이 크게 향상되었습니다.

1. 정적 타입 검사: 런타임 오류를 사전에 방지하고, 안전한 리팩토링을 지원합니다.
2. 개발 생산성 향상: 강력한 자동 완성(IntelliSense)과 타입 추론으로 개발 효율이 증가합니다.
3. 협업 및 유지보수 용이: 명확한 타입 정의로 협업 시 커뮤니케이션 비용을 줄이고, 대규모 애플리케이션에서도 구조적인 개발이 가능합니다.
4. 서드파티 라이브러리와의 통합: @types를 활용한 타입 정의로 안정적인 라이브러리 사용이 가능합니다.

전반적으로 타입스크립트는 대규모 프로젝트와 팀 협업에 최적화된 언어로, 코드 품질과 생산성을 높이는 데 강력한 도구라고 생각합니다.

 

 

 

 

 

 

 

 

 

 

 

 

Q. JavaScript와 TypeScript의 차이점은?

 

 

정적 타입 vs 동적 타입

- JS는 동적 타입 언어로 변수 타입 선언하지 않고 할당된 값에 따라 결정되며,

- TS는 정적 타입 언어로 변수 타입 명시적 지정할 수 있으며, 컴파일 단계에서 타입 체크가 이뤄집니다.

 

 

 

컴파일 필요 여부

- JS는 브라우저에서 직접 실행 가능하며, TS는 .ts 파일을 .js로 변환(트랜스파일)해야 실행 가능합니다.

 

 

 

인터페이스 및 제네릭 지원

- JS는 인터페이스 및 제네릭 기능 없으며, TS는 둘 다 지원하여 코드의 안정성과 재사용성 높일 수 있습니다.

인터페이스 (Interface)
- 객체의 구조를 정의하는 역할
- 클래스나 객체가 특정 구조를 따르도록 강제할 수 있어 코드의 일관성을 유지하는 데 유용

제네릭 (Generics)
- 타입을 고정하지 않고, 사용할 때 지정할 수 있도록 하는 기능
- 유연하고 재사용 가능한 코드를 작성할 수 있음

 

 

 

객체지향 프로그래밍(OOP) 지원 강화

- JS는 클래스와 상속 가능하지만, 인터페이스나 접근 제어자는 없습니다. 

- TS는 인터페이스, 접근 제어자, 추상 클래스 등을 제공하여 OOP를 더 강력히 지원합니다. 

 

 

 

코드 안정성 및 유지보수성

- JS는 타입이 없어, 런타임 오류 발생 가능성 높으며, TS는 컴파일 단계에서 오류를 사전 발견하여 안정성이 높습니다.

 

 

 

ECMAScript 최신 기능 지원

- JS는 최신 ECMAScript 표준을 따르지만, 브라우저 지원이 필요하지만, 

- TS는 최신 ECMAScript 기능을 미리 사용 가능하며, 구버전 브라우저에서도 사용할 수 있도록 트랜스파일 가능합니다.

 

 

 

 

 

 

 

 

 

 

 

Q. TypeScript의 단점이나 단점 극복 방법은?

 

 

단점 1: 초기 학습 비용

- JavaScript보다 문법이 복잡하고, 타입 시스템을 이해해야합니다.

- 기본적인 타입 시스템과 인터페이스 사용법을 익혀야 합니다.

- 기존 JavaScript 코드에 부분적으로 TypeScript를 도입하여 점진적 학습해야 합니다.

 

 

단점 2: 컴파일 필요

-  .ts 파일을 .js로 변환(트랜스파일)해야 실행할 수 있습니다.

-  ts-node를 사용하여 개발 환경에서 바로 실행

-  Babel과 Webpack을 활용하여 자동 빌드 및 트랜스파일 환경 구성

TSX 사용을 권장합니다 (Node.js 20 버전에서는 동작하지 않습니다)
- 23년 10월 Node.js의 LTS(장기 지원 버전)가 20대로 업데이트 되면서 ts-node가 정상적으로 동작하지 않고 있습니다.
- 23년 10월 이후에 ts-node 대신 tsx를 사용하시기 바랍니다.

 

단점 3: 라이브러리 및 타입 정의 문제

- 일부 JavaScript 라이브러리는 TypeScript 지원이 부족할 수 있습니다.

- DefinitelyTyped의 @types/라이브러리명 패키지를 사용하여 타입 추가
- any 타입을 활용하여 임시 해결 후 점진적으로 타입을 적용

 

 

단점 4: 코드 작성 속도 저하

- TypeScript는 타입을 명시해야 하므로 JavaScript보다 코드 작성 속도가 느릴 수 있습니다.

- 타입 추론을 적극 활용하여 불필요한 타입 선언 최소화
- strict: false 설정을 통해 점진적으로 타입을 적용

 

 

 

 

 

 

 

 

 

 

Q. TypeScript에서 any, unknown, never의 차이는?

 

 

any는 어떤 타입이든 할당할 수 있지만, 타입 검사가 적용되지 않기 때문에 예상치 못한 오류가 발생할 수 있습니다. 따라서 꼭 필요한 경우가 아니라면 사용을 지양하는 것이 좋습니다.

 

unknown은 any와 달리 직접 조작할 수 없으며, 타입을 확인한 후에만 사용할 수 있기 때문에 안전성을 보장할 수 있습니다. 특히, 외부 API 응답을 받을 때 유용합니다.

 

never는 반환되지 않는 함수에서 사용되는 타입입니다. 예를 들어, 예외를 던지거나 무한 루프에 빠지는 함수에서 never를 사용하면 코드의 의도를 명확하게 표현할 수 있습니다.

 

 

 

 

 

 

 

 

 

any와 unknown 중 무엇을 써야 할까요?

 

unknown이 더 안전한 타입이므로, 타입 검사를 거칠 수 있는 경우 unknown을 사용하는 것이 좋습니다. 

any는 정말 필요한 경우에만 사용해야 합니다.

 

 

any는 정말 필요한 경우
- 타입을 알 수 없는 서드파티 라이브러리
- JavaScript에서 TypeScript로 마이그레이션할 때
- JSON 데이터를 임시 처리할 때 (타입을 알 수 없는 경우)
- 빠른 개발을 위한 임시 조치

 

 

❌ 잘못된 사용	✅ 더 나은 사용
let data: any;	let data: unknown;
function getData(): any {}	function getData(): unknown {}
const response: any = fetchApi();	const response: { name: string; age: number } = fetchApi();

 

결론: any는 최소한으로 사용하고, 가능하면 대체하자!

 

 

 

 

 

 

 

 

 

 

never는 실제로 언제 사용되나요?

 

never는 예외가 발생하는 함수, 무한 루프, 또는 switch 문에서 모든 경우를 처리했는데도 남는 경우 타입 체크를 위해 사용됩니다.

 

 

 

 

 

 

 

 

 

 

 

Q. TypeScript의 인터페이스와 타입 별칭(Type Alias)의 차이점은?

- interface는 객체 타입을 정의할 때 주로 사용되며, extends로 확장할 수 있고, 선언 병합이 가능합니다.
- 반면, type alias는 객체뿐만 아니라 유니온 타입, 튜플 등 더 다양한 타입을 정의할 수 있지만, 한 번만 선언할 수 있습니다.

 

확장성이 필요한 경우 interface를, 다양한 타입 정의가 필요할 때는 type alias를 사용하는 것이 좋습니다."

 

 

 

 

 

 

 

 

 

 

Q. TypeScript에서 제네릭(Generics)을 어떻게 활용할 수 있는가?

제네릭은 TypeScript에서 타입을 동적으로 설정할 수 있도록 해주는 기능입니다.
이를 활용하면 함수, 인터페이스, 클래스에서 다양한 타입을 유연하게 처리할 수 있습니다.

 

예를 들어, getFirstElement<T>(arr: T[]): T 같은 제네릭 함수를 만들면, 문자열 배열이든 숫자 배열이든 동일한 로직으로 사용할 수 있습니다.

 

또한 extends 키워드를 사용하여 특정 타입을 제한할 수도 있습니다.
이러한 제네릭을 활용하면 코드의 재사용성을 높이고, 타입 안정성을 유지하면서 유연성을 확보할 수 있습니다.

 

 

 

 

 

 

 

 

 

Q. TypeScript를 사용하면 JavaScript보다 성능이 좋아지는가?

 

TypeScript는 개발 중 타입 안정성을 제공하는 정적 타입 검사 도구로, 

최종적으로 컴파일된 JavaScript 코드의 성능에 영향을 미치지 않습니다.

즉, TypeScript로 작성된 코드가 실행되는 과정에서 성능 차이는 발생하지 않으며, 

주로 코드 품질과 유지보수성에 도움을 줍니다.

 

성능 최적화는 실제로 JavaScript 코드에서 이루어져야 하며, 

TypeScript는 이 과정에서 버그를 사전에 방지하고, 안전한 코드 작성을 돕습니다.

 

 

 

 

 

 

 

Q. 타입스크립트와 Babel의 차이는?

TypeScript는 정적 타입 검사를 제공하는 언어로, 타입 시스템을 추가하여 코드의 안전성을 높이고, 타입 오류를 방지하는 데 도움을 줍니다. 

 

반면, Babel은 트랜스파일러로, 최신 JavaScript 문법을 구형 환경에서도 호환될 수 있도록 변환하는 역할을 합니다.

 

TypeScript는 코드의 타입 안정성을 제공하는 반면, Babel은 최신 JavaScript 기능을 하위 호환성을 고려하여 변환하는 데 초점을 맞추고 있습니다. 따라서 두 도구는 목표가 다르지만, 상호 보완적으로 사용될 수 있습니다.

 

하위 호환성
- 새로운 버전의 소프트웨어나 시스템이 이전 버전에서 사용되던 기능이나 데이터를 그대로 사용할 수 있도록 호환성

 

 

 

 

 

 

 

 

TypeScript를 처음 도입했을 때, 기존 JavaScript 코드베이스에 어떤 방식으로
점진적으로 TypeScript를 적용했나요?

 

 

처음 TypeScript를 도입할 때, 전체 코드베이스를 한 번에 변경하기보다는 점진적으로 적용하는 방식으로 접근했습니다. 

먼저, allowJs 설정을 통해 JavaScript 파일을 TypeScript 프로젝트 내에서 사용할 수 있게 하고, 중요한 부분부터 하나씩 타입을 적용했습니다. 

 

예를 들어, 비즈니스 로직이 포함된 중요한 모듈부터 타입을 정의하고, 그 외의 덜 중요한 부분은 나중에 타입을 추가하거나 any 타입으로 처리하면서 점차적으로 타입 시스템을 확장했습니다.

 

또한, strict 옵션을 활성화하여 가능한 한 많은 타입 오류를 사전에 잡을 수 있도록 하였으며, 

기존 JavaScript 코드에서 TypeScript로의 마이그레이션을 점진적으로 추진하였습니다.

 

 

 

 

 

 

 

 

 

 

any 타입을 사용할 때 발생할 수 있는 위험에 대해 구체적으로 설명해 주세요.

 

any 타입은 타입 검사를 우회하게 되어, 코드에서 예상하지 못한 오류를 일으킬 수 있습니다. 

 

any를 사용하면 TypeScript가 제공하는 타입 안정성의 장점을 잃게 되며, 타입을 추적할 수 없기 때문에 버그를 사전에 발견하기 어렵습니다. 

 

예를 들어, 객체에 대한 잘못된 속성 접근이나 함수의 잘못된 반환값 처리 등이 발생할 수 있습니다.

 

 

 

 

 

 

 

 

 

타입스크립트에서 "null"과 "undefined"의 처리

 

타입스크립트에서 null과 undefined는 둘 다 "값이 없음"을 나타내지만, 다르게 취급됩니다.

null은 의도적으로 값이 없음을 나타내며, 일반적으로 객체가 아직 초기화되지 않았거나, 비어 있음을 표현할 때 사용됩니다.

반면 undefined는 변수에 값이 할당되지 않았거나, 함수에서 명시적으로 값을 반환하지 않으면 자동으로 할당되는 값입니다.

 

타입스크립트에서 strictNullChecks 옵션을 사용하면, 

null과 undefined는 별개의 타입으로 구분되고, 명시적으로 처리해야 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

타입스크립트에서 const와 let의 차이점

 

const와 let은 변수 선언을 위한 키워드입니다. 

주된 차이점은 const는 한 번 초기화된 값을 변경할 수 없고, let은 변경 가능합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

타입스크립트에서 Partial<T>와 Required<T> 사용법

 

Partial<T>와 Required<T>는 제네릭 타입으로, 객체 타입의 속성들을 변경하는 유틸리티 타입입니다.

 

- Partial<T>: 객체의 모든 속성을 선택적으로 만듭니다. 즉, 모든 속성을 undefined로 허용하는 타입으로 변환합니다.

- Required<T>: 객체의 모든 속성을 필수로 만듭니다. 즉, undefined나 null을 허용하지 않도록 합니다.

 

interface User {
  name: string;
  age: number;
}

const user1: Partial<User> = { name: "John" }; // age가 없어도 가능

const user2: Required<User> = { name: "John", age: 30 }; // 모든 필드가 필요

 

 

 

 

 

 

 

 

 

 

 

 

타입스크립트에서 "타입 가드 (Type Guards)" 사용법

 

타입 가드는 특정 타입을 좁히는 기능을 말합니다. 

주로 typeof, instanceof 또는 사용자 정의 타입 가드 함수를 사용하여 특정 타입인지 확인하고, 그에 맞는 처리를 할 수 있습니다.

• typeof: 기본적인 타입 확인
• instanceof: 객체가 특정 클래스의 인스턴스인지 확인
• 사용자 정의 타입 가드: 특정 조건을 만족할 때 타입을 좁히는 함수

function isString(value: any): value is string {
  return typeof value === "string";
}

const input: string | number = "Hello";

if (isString(input)) {
  console.log(input.toUpperCase()); // input은 이제 string으로 취급됨
}

 

 

 

 

 

 

 

 

 

 

타입스크립트의 Union과 Intersection 타입의 차이점

 

- Union 타입: 여러 타입 중 하나를 허용합니다. 즉, 타입이 하나일 수도 있고, 다른 타입일 수도 있습니다.

- Intersection 타입: 여러 타입을 모두 만족하는 값을 요구합니다. 즉, 모든 타입을 동시에 갖는 객체를 만들어야 합니다.

 

 

 

 

 

 

 

 

 

 

 

타입스크립트에서 this 타입의 사용

 

타입스크립트에서 this는 함수 내에서 현재 객체를 참조합니다. 

this 타입은 특정 객체를 참조할 수 있도록 타입을 지정하는 데 사용됩니다. 

주로 메서드 내부에서 this가 올바른 타입을 가지도록 하기 위해 사용됩니다.

 

class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  greet(this: Person) {  // this가 Person 타입임을 명시
    console.log(`Hello, ${this.name}`);
  }
}

const p = new Person("John");
p.greet(); // Hello, John