[데브코스/TIL] DAY33 - TypeScript(1)

🧽 타입스크립트 준비

1. 자바스크립트 복습

• 템플릿 문자열
• 함수 (함수 선언문, 함수 표현식, 화살표 함수)
• 비구조화 할당 : 배열과 객체에서 값을 추출하여 변수에 할당하는 것
  • 배열
  • 객체
• spread 연산자 (...)
  • 객체 혹은 배열 합치기에 편리
  • 깊은 복사가 불가능 하다는 점

궁금증

spread 연산자와 rest 파라미터의 차이

• 사용 방법은 동일
• 함수의 파라미터로 쓰이면 rest 파라미터 (단, 함수 매개변수의 가장 마지막에 작성)
• 객체나 배열 등에 사용되면 spread 연산자 (위치 상관없음. 여러번 사용 가능)

2. 타입스크립트 세팅

• npm init -y : 노드 패키지 초기화 (필요한 값은 알아서 세팅)
• npm ls -g --depth=0 : 설치되어 있는 개발 라이브러리 목록
  • 이 출력 결과가 텅텅 비어있게 관리하면 좋음
  • 항상 최신 버전을 사용해야 하는데, 글로벌로 설치된 라이브러리의 버전으로 설치되기 때문
  • npm install -g 명령어 주의
• npm cache verify : 컴퓨터에 있는 캐시 파일을 확인하면서 불필요한 파일 삭제
• npm install typescript --save-dev : 타입스크립트 설치
• npm tsc --init : 타입스크립트 초기화 (tsconfig.json 파일 생성)
• npm tsc src/index.ts : 타입스크립트로 작성된 파일이 자바스크립트 코드로 만들어 줌
  • tsc는 TS를 JS로 변경해주는 컴파일러
  • 파일 하나면 컴파일 할 때는 tsconfig.json 참고 X
  • npm tsc : tsconfig.json 참고하며 컴파일 진행

3. 타입스크립트와 자바스크립트의 차이

• JS는 모든 것이 런타임에 결정. 코드를 실행해봐야 알 수 잇음
• TS는 컴파일 단계에서 알 수 있음. 컴파일 과정에서 오류가 있는지 없는지 확인 가능
  • 이런 이유 때문에 TS는 안정적인 언어라고 함.
  • 코드 실행 이전에 오류를 찾을 수 있으니까.
• 타입스크립트(TS) = 자바스크립트(JS) + 타입 시스템(type system)

궁금증

lock.json 파일은 무엇인가요?

• package.json 파일을 한 번더 검증하기 위한 파일
• 깃허브에 코드를 올릴 때, node_modules나 package-lock.json은 올릴 필요가 없습니다.

왜 TS를 JS로 변경해야 하나요?

• ndex.html은 TS 파일 실행 불가
• 브라우저는 오로지 html, css, js만 해석 가능
  • css만 해석 가능 => SCSS, SASS 해석 불가
  • html만 해석 가능 => pug 해석 불가
  • js만 해석 가능 => ts 해석 불가
• TS는 웹브라우저가 해석할 수 없는 언어이기 때문에 JS로 변경해주어야 한다.

npx는 무엇인가요?

• npx는 node package executor (npm을 실행 시킴)
• 설치한 노드 패키지를 실행할 때 사용하는 도구
• npm tsc : tsc라는 패키지를 실행하라!
• npx ts-node -v : 로컬 환경에 ts-node가 없다면 npx가 설치할지 말지 물어봐줌 & 설치도 해줌

ts를 코드 러너로 실행하면 tsconfig.json 설정으로 실행되나요?

• 노놉. 코드 러너 기본 내장 설정으로 실행

🎟️ 타입스크립트

1. 타입시스템의 타입

• string
• number
• boolean
  • truty나 falsy는 !!로 붙여주어 boolean으로 완전히 바꿔주기
  • "true", "false" 문자열은 JSON.parse()로 변경 가능
• object
  • 상당히 포괄적인 타입 (일반 객체, 빈 객체, 배열, 함수 전부 가능)
  • object 타입을 사용하기보다는 객체 속성을 명시적으로 작성해주는 방식으로 사용하기
• array
  • 타입명은 따로 없고 대괄호를 넣으면 됨
  • 예전에는 Array<string> 이렇게 쓰이기도 했으나, 요즘엔 string[]으로 쓰임
• tuple
  • 튜플은 여러가지 타입의 데이터를 배열에 넣은 것. (길이 고정)
  • 옵셔널(?) : 있어도 되고 없어도 되고
  • rest 연산자 사용 가능
  • const [item, ...rest]: [string, ...number[]] = ["a", 1, 2, 3]
• null, undefined
  • null 병합 연산자 (??)
  • const c:string = x ?? "test"
• any
  • 모든 타입을 받을 수 있음 (타입을 체크하지 않겠다라는 의미로 봐도 무방)
  • 사용 시 주의
  • 지금 당장 어떤 타입까지 고려하기 어려울 때 사용
• unknown
  • 나중에 뭐가 들어갔는지 확인해야 함
  • 타입가드 (타입 검사)
  • if (Array.isArray(value)) { ... }
  • any로 사용할 바에는 unknown 사용하기

📌 출처

수코딩(https://www.sucoding.kr)