TypeScript 공부(1)

김희목·2024년 8월 22일
0

패스트캠퍼스

목록 보기
44/54
post-custom-banner

TypeScript이란?

2012년 마이크로소프트에서 발표했으며, 자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어입니다.

그리고 타입스크립트는 브라우저나, Node.js 환경에서 동작하지 못하기 때문에 자바스크립트로 변환 즉, 컴파일하여 사용해야 하기 때문에 정적 타입의 컴파일 언어라고도 부를 수가 있습니다.

타입스크립트는 자바스크립트의 '슈펴셋'으로 완벽하게 호환가능하며, 대부분의 라이브러리, 프레임워크가 타입스크립트를 지원합니다.

슈펴셋이란. 자바크스립트의 기능은 전부 다 가지고 있고, 추가로 더 많은 기능을 가지고 있다는 의미입니다.

동적 타입 (Dynamic Typing)

자바스크립트와 같은 동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있습니다.

변수에 값을 할당할 때 데이터 타입이 결정되며, 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있습니다.

이러한 특징을 동적 타이핑이라 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어라고 합니다.

정적 타입 (Static Typing)

타입스크립트는 정적 타입 언어입니다. 변수를 선언할 때 명시적으로 타입을 지정하고, 이후에는 해당 타입의 값만을 변수에 할당합니다.

컴파일 시간에 타입 검사를 수행하여 많은 타입 오류를 미리 감지할 수 있습니다.

장점

  • 컴파일 시 타입 검사: 코드를 작성하는 동안 발생하는 많은 타입 오류를 컴파일 시간에 미리 감지할 수 있습니다.
  • 성능 최적화: 정적 타입 정보를 활용하여 컴파일러가 코드를 더 효율적으로 최적화할 수 있습니다.
  • IDE 지원 강화: 정적 타입 정보는 IDE에서 강력한 자동 완성 및 코드 분석을 지원합니다.

단점

  • 번거로운 타입 어노테이션: 타입을 명시적으로 선언해야 하므로 코드가 길어질 수 있고, 추가 작업이 필요할 수 있습니다.
  • 개발 속도 저하: 더 많은 코드를 작성하고 수정해야 하므로 초기 개발 속도가 상대적으로 느릴 수 있습니다.

결론적으로, 동적 타입은 실행 시간에 타입이 결정되고 유연성이 높지만 런타임 오류와 성능 감소가 발생할 수 있습니다. 정적 타입은 초기 개발 속도가 느리지만 타입 안정성과 성능 최적화를 제공합니다.

개발 환경 구성

npm init -y를 입력하여 우선 package 파일을 만들어 줍니다.

npm i -D parcel typescript를 입력하여 parcel 번들러를 설치해주는데 typescript를 사용할 것이기 때문에 이렇게 입력해주시면 됩니다.

그다음, 바로 package 파일에 dev,build를 작성해주시고, main: index.js 코드는 삭제해 주시면 됩니다.

src 폴더를 만들고, 그안에 main.ts 파일을 만들어주세요 그리고, html 파일에 script 태그를 사용하여 ts 파일과 연결해주시면 됩니다.

그리고 index.html 주변 즉, 루트경로에 tsconfig.json 파일을 만들어주세요.

해당 파일은 타입스크립트의 구성 옵션을 제공 해주기위해 필요한 여러 가지 내용들을 추가해줄 것입니다.
일단 개발 환경을 구성하는 것이 목적이기 때문에 해당 내용은 일단 작성만 하고 넘어가도록 하겠습니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "strict": true
  },
  "include": ["src/**/*/ts"],
  "exclude": ["node_modules"]
}
post-custom-banner

0개의 댓글