TypeScript 시작하기

고재현·2023년 8월 6일
0

TypeScript

목록 보기
1/13
post-thumbnail

TypeScript란?

TypeScript는 JavsScript의 상위호환(?) 이라고 생각하면 편하다.
문법을 그대로 사용하지만, 타입문법을 업그레이드한 것이다.

예를들어

console.log(5-'3')

를 해준다면 자바스크립트로는 어떻게 될까?
자바스크립트는 Dynamic typing을 지원하는 언어이기 때문에 자기가 알아서 '3'을 숫자로 바꿔줘서 2를 출력해준다.

하지만 이런것을 타입스크립트를 쓴다면 문법에러로 잡아준다.
이 때문에 타입스크립트를 쓴다.

React에서 TypeScript 사용하기

  1. 이미 있는 React 프로젝트에 사용하기

    npm install --save typesciprt @types/node @types/react @types/react-dom @types/jest

를 해주면 이용이 가능하다.
그렇게 설치한 후, .js파일들을 .ts로 바꿔서 사용 가능하다.

  1. React 프로젝트를 새로 만들기

    npm create-react-app my-app --template typescript

를 터미널에 입력하면 사용가능하다.

TypeScript 세부설정

먼저 typescipt를 사용하기 위해서는 tsconfig.json이라는 파일을 먼저 만들어줘야한다.
tsconfig.json 파일을 만들었다면 그 안에

{
  "compilerOptions":{
		"target" : "es5",
        "module" : "commonjs",
  	}
}

이렇게 입력해주면 된다.

target
: 타입스크립트파일을 어떤 버전의 자바스크립트로 쓸 것인지
module
: 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸 것인지

추가로

"noImplicitAny" : true,
"strictNullChecks" : true,

같은 것을 넣어줄 수 있는데

noImplicitAny
: any타입이 의도치 않게 발생한 경우 에러 생성
strictNullChecks
: null,undefined타입에 이상한 조작할 시 에러 생성

이라는 설정들을 해주는 것들이다.

profile
잘못된 내용이 있다면 알려주세요..!

1개의 댓글

comment-user-thumbnail
2023년 8월 6일

즐겁게 읽었습니다. 유용한 정보 감사합니다.

답글 달기