[TypeScript 공식문서] 1. The Basics

1. TypeScript란?

• JavaScript의 모든 값은 다양한 동작을 내장하고 있으며, 타입을 통해 이를 예측할 수 있음.
• JavaScript는 동적 타입 언어로, 코드 실행 전에는 타입 오류를 알기 어려움.
• TypeScript는 정적 타입 검사를 통해 런타임 오류를 사전에 방지할 수 있음.

 

정적 타입 시스템 사용 → 코드가 실행되기 전에 코드에 대해 예측가능

 

2. 정적 타입 검사

• TypeScript는 코드 실행 전에 타입을 검사하여 오류를 미리 감지.
• 예제:
• const message = "Hello World!"; message(); // TypeScript 오류: 문자열을 함수처럼 호출할 수 없음.

3. TypeScript의 장점

• 예외 방지: 실행되지 않아야 할 코드 실행을 사전에 차단.
• 버그 방지: 오타 및 잘못된 논리 오류 감지.
• 도구 지원: 코드 자동 완성, 리팩토링 지원.

4. TypeScript 컴파일러(tsc)

• TypeScript 코드를 JavaScript로 변환.
• 설치 및 실행:
• npm install -g typescript tsc hello.ts
• TypeScript는 타입 정보를 제거한 순수 JavaScript 파일을 생성함.

5. 타입 지정

• 함수의 매개변수와 변수에 명시적으로 타입을 지정 가능.

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
 
greet("Maddison", Date());

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());

• 위는 에러, 아래는 에러 안남. Because, JavaScript 에서 Date()를 호출하면 string을 반환하기 때문…
• new Date() 를 사용해서 Date 타입을 생성해야 비로소 처음 기대했던 결과를 반환 받을 수 있다.

let msg = "hello there!";

• TypeScript는 자동으로 타입을 추론할 수도 있음.

TypeScript 에서 tsc로 컴파일하면 type이 사라짐

• TypeScript는 타입 정보를 제거한 JavaScript 코드로 변환됨.
• 이는 브라우저와 Node.js에서 실행 가능하도록 하기 위함.

6. 엄격 모드(strict mode)

• -strict 플래그를 활성화하면 더 엄격한 타입 검사가 가능.
• noImplicitAny: 암묵적 any 타입을 금지.
• strictNullChecks: null과 undefined의 사용을 제한.

7. 다운레벨링(Downleveling)

• TypeScript는 최신 JavaScript 기능을 지원하지만, 모든 환경에서 실행할 수 있도록 구버전 JavaScript(ES3, ES5) 코드로 변환하는 기능을 제공함. 이를 다운레벨링(Downleveling)이라고 함.

✅ TypeScript는 기본적으로 ES5로 컴파일됨.

✅ --target 옵션을 설정하면 ES6(ES2015) 이상의 문법을 유지 가능.

✅ 브라우저 호환성 문제를 해결하기 위해 다운레벨링이 필요함.

✅ tsconfig.json에서 설정하면 프로젝트 전체적으로 적용 가능.

8. TypeScript를 활용한 개발

• 타입을 활용하여 안전한 코드를 작성할 수 있음.
• 자동 완성 및 코드 분석 기능이 뛰어남.
• 기존 JavaScript 프로젝트에서도 점진적으로 도입 가능.