공부/TIL

한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 개론

2023. 8. 9. 22:18
목차
  1.  
  2. 타입스크립트란
  3. 자바스크립트의 한계점
  4. 타입스크립트의 독특한 타입 시스템
  5. 타입스크립트의 동작 방식
  6. Hello TypeScript 실습 시작!
  7. 설치
  8. Hello TypeScript
  9. 컴파일러 옵션
  10. 전역모듈 관련 설명
  11. 모듈 관련 Error
초반부 간단한 이론 정리!

 

타입스크립트란

1. C# 개발자가 개발하여 유사한 부분이 많음

2. 인기가 많음(점점 더 많아지는 중)

3. 타입스크립트 = 자바스크립트의 확장판

- 자바스크립트를 더 안전하게 사용할 수 있도록 확장함

- 자바스크립트에 타입을 정의하는 문법만 추가하면 타입스크립트가 됨

4. 배워야하는 이유 : 간단한 기능을 위해 개발된 유연한(버그 가능성이 높은) 자바스크립트에 node.js(자바스크립트 구동기)가 더해져 자바스크립트로 다양한 구현이 가능해짐. 따라서 복잡한 프로그램을 만들 때 버그 가능성을 낮추기 위해(안전하게 사용하기 위해) 타입스크립트가 필요

 

자바스크립트의 한계점

타입 시스템 : 언어의 타입 관련된 문법 체계

- 정적 타입 시스템 : 코드 실행 전 변수의 타입 고정적으로 결정 ex. JAVA

- 동적 타입 시스템 : 코드 실행 후 그때그때 유동적으로 변수 타입 결정 ex. python, javascript

 

Javascript : 변수의 타입이 하나로만 고정되지 않음

-> 변수에 문자열 담았다가 숫자열 담아도 실행이 됨! 그러나 오류가 뜸

let a = 'hello'
let a = 12345

a.toUpperCase() -> 오류

 

Java : 타입 관련된 오류 발생 시 에디터 상에서 바로 알려줌, 실행 전 타입을 모두 체크함

-> 단, 변수에 모두 타입을 지정해줘야 하기 때문에 작성해야 할 타이핑 양이 매우 증가함

 

타입스크립트의 독특한 타입 시스템

정적 타입 시스템 + 동적 타입 시스템

- a가 숫자값으로 초기화 되면, a는 숫자 타입으로 추론

-> 모든 변수에 타입 지정할 필요가 없음 = 점진적 타입 시스템 Gradual Type System

 

타입스크립트의 동작 방식

컴퓨터가 언어를 이해하는 법

사람 - 프로그래밍 언어 - 컴파일러(변환) - 바이트 코드(기계어) - 컴퓨터

 

컴파일러의 컴파일 과정

JavaScript

Js 코드 -> AST(추상 문법 트리) -> 바이트 코드 -> 실행

 

TypeScript

Ts 코드 -> AST -> 타입 검사(Type Checking, 검사 실패 시 컴파일 종료) -> 타입 검사를 통과한 Js 코드 -> AST -> 바이트 코드 -> 실행

 

Hello TypeScript 실습 시작!

설치

npm i @types/node
npm i typescript -g

Hello TypeScript

-> ts-node를 통해 typescript를 한번에 실행 가능

 

컴파일러 옵션

ex. 타입 오류를 얼마나 엄격하게 검사할지, 자바스크립트 코드의 버전은 어떻게 할지

- 실무에서는 보통 옵션을 커스터마이징하여 사용함

 

아래 명령어 실행 시 tsconfig.json 생성

tsc --init
{
  "compilerOptions": { // 더 세분화된 옵션
    "target": "ESNext", // 컴파일된 Javascript의 버전 설정, ESNext : Javascript 최신 버전
    "module": "ESNext", // Javascript의 모듈 시스템 설정
    "outDir": "dist", // 컴파일된 Javascript 파일 경로 설정
    "strict": false, // 타입 검사를 엄격하게 하도록 설정 ex. 함수의 매개변수 타입 설정 여부
    // Js -> Ts 변환 시 수많은 오류를 막기 위해 임의로 false로 설정하기도 함
    "moduleDetection": "force", // 전역모듈에 따른 변수명 중복 오류 해결 : 컴파일된 Js 파일에 export {}; 추가해줌
  },
  "ts-node": {
    "esm": true // 기본적으로 ts-node는 CommonJS를 따르기 때문에 해당 옵션 추가하여 ESM 따르도록 설정
  },
  "include": ["src"] // 해당 경로의 모든 파일을 포함하여 한번에 컴파일 = 컴파일 범위 지정
}

전역모듈 관련 설명

typescript는 모든 ts 파일을 전역 모듈로 보기 때문에 다른 파일에 같은 변수명 설정 시 오류를 일으킴

해결 방법

1. export {}; -> 모듈화

2. tsconfig.json에 moduleDetection 설정 : js로 컴파일 시 export {}; 구문 자동 추가

 

모듈 관련 Error

C:\workspace\onebite-typesript\section2>ts-node index
node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module './index'
Require stack:
- C:\workspace\onebite-typesript\section2\imaginaryUncacheableRequireResolveScript
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at requireResolveNonCached (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:549:16)
    at getProjectSearchDir (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:519:40)
    at phase3 (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:267:27)
    at bootstrap (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:47:30)
    at main (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:33:12)
    at Object.<anonymous> (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:579:5)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\workspace\\onebite-typesript\\section2\\imaginaryUncacheableRequireResolveScript'
  ]
}

Node.js v18.17.0

-> Package.json에 type 추가 필요

{
  "name": "section2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", // <- 해당 옵션 추가 필요

 

'공부 > TIL' 카테고리의 다른 글

한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 이해하기  (0) 2023.08.18
한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 기본  (1) 2023.08.14
[혼자 공부하는 컴퓨터구조+운영체제] Chapter 6 - 7  (0) 2023.08.05
[혼자 공부하는 컴퓨터구조+운영체제] Chapter 4 - 5  (0) 2023.07.30
[혼자 공부하는 컴퓨터구조+운영체제] Chapter 1 - 3  (1) 2023.07.29
  1.  
  2. 타입스크립트란
  3. 자바스크립트의 한계점
  4. 타입스크립트의 독특한 타입 시스템
  5. 타입스크립트의 동작 방식
  6. Hello TypeScript 실습 시작!
  7. 설치
  8. Hello TypeScript
  9. 컴파일러 옵션
  10. 전역모듈 관련 설명
  11. 모듈 관련 Error
'공부/TIL' 카테고리의 다른 글
  • 한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 이해하기
  • 한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 기본
  • [혼자 공부하는 컴퓨터구조+운영체제] Chapter 6 - 7
  • [혼자 공부하는 컴퓨터구조+운영체제] Chapter 4 - 5
Ail_
Ail_
Ail_
log
Ail_
  • 분류 전체보기 (186)
    • 사설 (11)
      • 강연 (5)
      • * (3)
      • 회고 (3)
    • 공부 (139)
      • Just do it (3)
      • TIL (66)
      • Game Bootcamp (31)
      • Digital Twin Bootcamp (39)
    • 노션 (3)
    • 프로젝트 (26)
      • Game Bootcamp (1)
      • Digital Twin Bootcamp (21)
      • 경기청년 갭이어 (4)
    • 토이 프로젝트 (1)
      • 아쿠아오브 (1)

인기 글

최근 글

태그

  • 2025
  • 이펙트
  • 유니티
  • C#
  • 경기갭이어
  • 인터랙티브 웹 UX·UI
  • 부트캠프
  • 경기청년갭이어
  • unity
  • 갭이어
  • 유니티 게임 개발
  • 오블완
  • 노션
  • 개발일지
  • SQL첫걸음
  • 개발회고
  • Do it! 자료구조와 함께 배우는 알고리즘 입문 : 파이썬 편
  • 템플릿
  • 회고
  • TypeScript
  • 멋쟁이사자처럼
  • 대시
  • 공격
  • mysql 설치
  • 티스토리챌린지
  • SQL 첫걸음
  • 피격
  • 한입 크기로 잘라 먹는 타입스크립트
  • Chat
  • node.js

최근 댓글

전체
오늘
어제
hELLO · Designed By 정상우.
Ail_
한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 개론
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.