'TypeScript'

TypeScript

Type이 필요한 이유

• 개발자와 사용자가 생각한 내용(변수 값)이 다름
• 정해진 타입을 가진 변수에 다른 타입의 값을 넣을 수 있음

TypeScript 특징

1. 변수 값에 데이터 타입 지정 가능
   • 예측 가능한 코드 작성 가능
   • 디버깅 편리
2. 객체지향 프로그래밍 가능
   • 클래스 기능 제공

TypeScript 컴파일러 설치

npm install -g typescript

React + TypeScript 프로젝트 생성

npx create-react-app 폴더명 --emplate typescript

• "App.test.tsx", "logo.svg", "setupTests.ts" 파일 제거 가능

TypeScript 문법

any 타입(잘 사용하지는 않는다)

값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있음

let 변수이름: any = 초기값;

union 타입

하나의 변수에 여러 개의 타입을 지정할 수 있음

let 변수이름: 타입1 | 타입2;

타입 주석

변수 이름 뒤에 콜론(:)과 타입을 붙임

let 변수이름: 타입;
let(const) 변수이름: 타입 = 초기값;

타입 추론

": 타입"을 명시하지 않고 초기값을 분석해 왼쪽 변수의 타입을 결정

let 변수이름 = 초기값;

타입 가드

union 타입을 사용할 경우, 자바스크립트의 typeof 연산자를 이용하여 코드 검증을 수행하는 것을 의미

*typeof 연산자: 변수의 데이터 타입을 반환하는 연산자

타입 별칭

기존에 존재하는 복잡한 타입을 저장하여 새로운 타입으로 생성하는 기능

type 새로운타입 = 기존타입;

열거형(Enum)

서로 연관된 아이템들을 함께 묶어서 표현하는 자료형

• 요일(월 ~ 일)
• 계절(봄, 여름, 가을, 겨울)
• 성별(남자, 여자)

• 열거형 타입

• 리터럴 타입

템플릿 문자열

변수에 담긴 값을 조합해 문자열을 만드는 방식 제공

`${변수이름}`

함수

function 함수이름(매개변수1: 타입1, 매개변수2: 타입2, ...): 반환값_타입 {
  // 작업
};

• 반환값(return)이 없는 경우, "반환값_타입"에 void 입력

선택적 매개변수

필수 매개변수가 아닌 경우 매개변수 이름 뒤에 물음표(?) 기호를 붙임

• 선택적 매개변수를 뒤로 몰아준다

기본 매개변수

매개변수에 값이 전달되지 않았을 때, 기본값으로 지정

function 함수이름(매개변수: 타입 = 기본값): 반환값_타입 {
  // 작업
};