[ TypeScript ] 타입스크립트 설치 & 타입스크립트의 필요성 & 옵션설정

Suji Kang·2023년 11월 29일

🐾 javascript vs typescript

📌 javascript - 언어 O
📌 typescript - 언어 X (타입스크립트는 자바스크립트를 작성할떄 사용하는 tool)

typescript 문법을 따라서 작성 👉 javascript로 변환시킴 👉 javascript를 브라우저에서 실행 👉 결론적으로는 javascript가 실행되는것.

🔎 typescript install 2가지 방법

📌 1. 기존 javascript 기반의 리액트 프로젝트에 typescript문법을 추가하는 방법
npm install typescript @types/node @types/react @types/react-dom @types/jest

📌 2. 애초에 리액트 프로젝트를 만들떄 typescript 문법을 사용하는 리액트프로젝트를 만드는 방법
npx create-react-app 프로젝트명 --template typescript

🔎 우리가 추가로 설치한 라이브러리들도 typescript를 지원하는 라이브러리들이 존재한다. (버전이 호환이 되는지 확인필요)

예를들어서,

emotion이라는 라이브러리를 사용할때, emotion을 사용하는데에 있어서 typescript를 지원하는 라이브러리를 설치해야한다.

react-router-dom을 사용할때, typescript를 지원하는 라이브러리를 설치해야한다.

🌟 타입스크립트를 사용하는 이유 ❓

자바스크립트는 느슨한 언어(타입을 엄격하게 규제하지 않는다)

🔎 자바스크립트 변수

let a;
a = 10; //오류 x
a = 'hello'; //오류 x
a = true; //오류 x
a = [1,2,3]; //오류 x

변수를 선언하면 그 변수 속에 어떤 타입의 값이 들어가도 상관없다.

a.length //나는 배열이 a속에 있다고 생각해서 .length를 사용했는데, a가 number타입이 들어있다면? -->  오류가 발생한다.

🔎 타입스크립트 변수

애초에 a를 선언할때, a가 배열이라고 명시해주면?
a.length // 실행을 시켜도 문제가 없다.

변수는 b에는 number타입만 들어갈수 있다고 지정
b.length //오류발생

🐾 그렇다면 함수는 어떨까?

🔎 자바스크립트 변수

let banana = ()=>{
    return a/2;
}
banana('hello'); //오류발생

"실행시켰을때" 오류가 발생한것을 알수있다.

그런데 여기서,

🔎 타입스크립트 변수

//a 라는 매개변수는 number타입만 들어갈수있다고 지정
let banana = (a:number)=>{
    return a/2;
}
banana('hello'); //오류발생

이렇게 지정해주면, "실행시키기 전에" 오류를 알수있다.

🐾 기본

.ts 파일과
.tsx 파일을
구분한다.

파일을 구분하지 않는다.
.js
.jsx return자리에 <> </>가 return되는것을 확인할수있다.

🐾 tsconfig.json 파일 만들기

🔎 타입스크립트 설정파일

compilerOptions(typescript --> javascript로 변환 시킬때, 어떤 옵션을 사용할지 설정하는 파일.)

타입스크립트 적용폴더

타입스크립트 적용안할 폴더

...옵션 설정

"module": "ES6",

import a from "ddd" ---> es6방식
const a = require("ddd") --> commonjs방식

tsconfig.json

{
    "compilerOptions": {
         "target": "ES6", //ES6문법을 사용하겠다.
        "strictNullChecks": true, //null과 undefined를 구분해서 사용하겠다.
        "module": "ES6", //import 방식을 ES6문법을 사용하겠다.
        "strict": true, //타입스크립트 문법을 엄격하게 사용하겠다.
    },
    "exclude": [
        "node_modules" //node_modules폴더안에 있는 모든 폴더와 파일을 타입스크립트가 적용하지 않겠다.
    ],
    "include": [
        "src/**/*"   //src폴더안에 있는 모든 폴더와 파일을 타입스크립트가 적용하겠다.
    ]
}