📒 오늘 공부한 내용

🔍수업목차

[9-1] 타입스크립트란?
[9-2] 타입스크립트를 사용하는 이유와 사용방법
[9-3] 타입스크립트 설치 및 세팅
[9-4] 타입스크립트 파일 확장자와 실습

✅ 타입스크립트란?

---

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

자바스크립트

let hello = "hello"
hello = 12345

타입스크립트

let hello:string = "hello" 

// ❌ 불가능
hello = 12345
// ⭕️ 문자열만 할당 가능
hello = "12345"

💡 브라우저는 HTML,CSS,Javascript만 읽을 수 있는데 타입스크립트는 어떻게 읽을까?

실행시 자바스크로 변경되어 실행

컴파일 or 트랜스파일 : 변경되는 작업
컴파일러 or 트랜스파일러 : 변경해주는 도구를
컴파일 : 하나의 언어가 다른 언어로 변경되는 작업
트랜스파일 : 하나의 언어가 같은 언어의 다른 버전으로 변경되는 작업

✅ 타입스크립트를 사용하는 이유와 사용방법

---

• 자바스크립트는 타입이 엄격하지 않다.

• 변수나 상수를 만들면 처음에 문자를 넣었다가, 나중에 숫자를 넣는 등 자유자재로 변환이 가능하다.

• 이 점이 편리해 보이지만, 큰 서비스를 여러명이 개발하는 경우 문제가 될 수 있다.

• 타입스크립트는 숫자 변수에는 숫자만 넣고, 문자 변수에는 문자만 넣도록 하여 안정성을 높여준다.

📂 타입스크립트 사용 방법

변수 타입 지정

let aaa : string = "안녕하세요"
let bbb : number = 123

객체의 타입 지정

interface IProfile {
    name: string;
    age: number | string;
    school: string;
    hobby?: string;
  }
const porfile: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐 초등학교",
  };

✅ 타입스크립트 설치 및 세팅

---

1️⃣ typescript 홈페이지 접속

2️⃣ Docs를 클릭 → getstart의 installation → yarn add typescript --dev를 복사

3️⃣ 터미널에서 class 폴더 위치로 이동한 후 붙여넣기

4️⃣ yarn add @types/react@17.0.2 @types/node@17.0.2 --dev를 붙여넣기

5️⃣ typescript 설정 파일(tsconfig.json)을 만들어 준다. 내용은 비워 놓는다.

6️⃣ yarn dev 명령을 실행하게 되면, nextjs가 typescript의 설정 파일인 tsconfig.json을 감지하고, (tsconfig.json)에 기본 설정을 자동으로 채워준다.

7️⃣ (tsconfig.json)파일에서 strict을 true로 바꿔준다.

✅ 타입스크립트 파일 확장자와 실습

---

• 타입스크립트를 사용하는 파일 중 return 을 포함하고 있다면 확장자를 ts로 두면 오류가 발생한다.

• eturn 부분이 사실 html이 아니라 JSX, 즉, 자바스크립트 XML 이기때문에 그렇다.

tsx : JSX 를 return 하는 컴포넌트
ts : 자바스크립트만사용하는 컴포넌트

📂 타입 추론

• 파일의 확장자를 ts 혹은 tsx로 변경하게 되면서 기존의 자바스크립트 작성 부분이 타입스크립트 영역으로 바뀌게 된다.

• 따라서 변수에 타입을 먼저 입히지 않고 할당을 하게 되면 타입스크립트는 할당된 값의 자료형을 타입으로 추론 하게 된다.

📂 타입스크립트 배열, 객체 실습

배열타입

let aaa:string[] = ["원두","은정","혜원"]

let fff:(string | number)[] = [1,2,3,"철수","영희"]

let hhh: string[] | nuber[] =[ "영희","철수" ]
hhh=[1,2,3]

객체타입

interface IPropfile {
		name : string
		age : number 
		school : string
	}
const profile:IPropfile = {
		name : "원두"
		age : 8
		school : "코캠 초등학교"
	} 

		age : string | number
		school : string
	}
const profile:IPropfile = {
		name : "원두"
		age : 8 or "8살"
		school : "코캠 초등학교"
	}