TypeScript

자바 스크립트의 타입을 강제 시키는 언어

문자를 넣던지 숫자를 넣던지 상관이 없었는데.
타 언어는 대부분 불가능함.

타입스크립트는 타 언어처럼 변수 선언시에 타입을 지정해줌
지정된 타입 이외의 값은 에러가 발생함.

사용하는 이유

count 등의 변수를 사용할때 count + 1 이런 코드를 돌렸더니
문자로 인식이 되어 01 > 011 > 0111 이런식으로 늘어나는 등의 사고가 발생함.
코드가 길어질수록 위 같은 코드가 얼마나 심어져있을지 찾기도 힘들정도 (지뢰밭)

사용방법

객체는 타입이 아님

때에 따라서 직접 만들어 줘야함

Interface 타입이름 {
	key : value;
}

형태로 만듬

타입스크립트 설치하기

타입스크립트 홈페이지

상단의 Download 통해서 들어가면

npm, yarn, pnpm 각각 설치방법이 있음 현재 yarn으로 사용중이니 yarn을 눌러보면

이렇게 나옴
해당 내용을 vscode 터미널에 입력

입력은 packge.json이 있는경로에서 입력할것.

설치 완료

타입스크립트 설정

설치를 하고나서 사용하려면 간단한 설정을 해줘야함

yarn add typescript --dev 한 경로에

tsconfig.json 파일 생성하고

다시 홈페이지의 Docs 클릭

좀 내려가서
What is a tsconfig.json 을 들어가 보면

작성 예시 등을 확인할 수 있다.

현재 프로젝트는 next.js를 사하는데
next.js는 자동으로 타입스크립트를 인식해서 기본 내용을 채워줌

next.js 실행

인식을 했는데
yarn add --dev @types/react @types/node
를 추가해 달라고 메시지가 뜸

추가 해 주고 다시

이번엔
yarn add --dev @types/react
을 추가해달라함

계속 동일한 메시지를 띄우는데 이것은 버전이 맞지않아서 뜨는 에러.

설치목록을 보면 18.3.8이 되었는데 현재 사용중인건

react 17버전이기 때문

리액트에 맞춰서 버전을 통일시키고 해당 버전으로 다시 설치가 되도록

node_modules를 삭제

설치 버전이 입력되어있는

yarn.lock도 삭제

이후 package.json의 내용을 설치할 수 있도록
yarn install 을 입력

다시 node_modules 와 yarn.lock 가 깔려있음.

이제 다시 yarn dev를 해보면 정상적으로 실행이 되고
We detected TypeScript in your project and created a tsconfig.json file for you.
tsconfig.json을 감지해서 입력했다는 글과

tsconfig도 입력이 되어있음.

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

• target : 어느 버전의 js로 변경할지
• lib : window.alert 등의 타입도 체크할지
• allowjs : 타입스크립트 파일에서 자바스크립트 파일을 import 할 수 있게 할지
• skipLibCheck : 타입스크립트 파일을 만들면 .ts로 바뀔건데, 다른사람들이 만든 모듈에는 js도 있고 ts도 있을것, 이런것들도 타입 체크를 스킵 할건지?
• strict : 타입을 엄격하게 볼것인가?
• forceConsistentCasingInFileNames : 파일 이름들을 대소문자를 무시할건지?
• noEmit : 타입스크립트로 된 파일을 JS로 변경할때 파일을 생성할건지 말건지 (생성안하는게 true)
• module : esnext 방식은 import를 통해 불러옴
  module : commonjs 방식은 require() 통해서 불러옴
• include : 어떤 파일을 검증할 것인지
• exclude : 제외할것

package.json

dependencies 와 devdependencies
두가지로 나뉘어짐.
dependencies : 실행할 때 필요한 내용
devdependencies : 실행할 떄 필요 없는 내용 (vscode 전용)

  "dependencies": {
    "@apollo/client": "^3.11.5",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "antd": "^5.20.4",
    "axios": "^1.7.7",
    "graphql": "^16.9.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "@types/node": "17.0.2",
    "@types/react": "17.0.2",
    "typescript": "^5.6.2"
    }

전부 dependencies에 넣어도 동작하는데 아무 문제 없음
그럼 왜 나눠서 설치하는가?
yarn install -> dependencies, devdependencies 모두 설치해서 node_modules에 넣어줌

실제 배포를 할때
vscode와는 상간이 없기에 devdependencies부분을 설치할 필요가 없음.
yarn install --production = 설치 시간을 단축할 수 있음.

vs코드에서만 필요한지 실제 동작에도 필요한지 구분할 필요가 있음.