프론트엔드 기초: React + TypeScript(6)-타입스크립트, 타입추론, 타입명시, 인터페이스, ?선택적 프로퍼티, 열거형

타입스크립트 기초

타입스크립트가 왜 필요할까?

🔸자바스크립트 코드가 너무 지저분하다.

🔸코드 스케일이 커지면서 코드 관리가 되지 않는다.

타입스크립트를 사용하면 좋은 점

🔸자바스크립트 기반보다 버그를 줄일 수 있다.

🔸유지보수가 쉽다.

🔸강력한 높은 퀄리티의 코드를 생산할 수 있다.

수업대상

🔸자바스크립트 기초 숙지

🔸버그 위험을 낮추고 싶은 개발자

선행학습

🔸숫자, 문자열, 배열, 객체, 함수 데이터 타입

🔸변수 객체지향철학, 동적메모리의 동작 원리

타입스크립트 = 자바스크립트 + 타입체크

🔸타입스크립트 환경에 자바스크립트를 코딩하면 동작함

🔸자바스크립트 환경에 타입스크립트를 코딩하면 동작안함

데이터 타입을 표기하면 좋은 점

🔸컴파일 타임시 오류 체크

🔸TS에서 바로 웹브라우저는 해석하지 못하기 때문에,

JS를 통해 컴파일 번역을 해서 웹브라우저해서 해석할 수 있다.

환경설정

🔸vscode 설치

🔸타입스크립트 설치

🔸타입스크립트 파일 만들기

타입스크립트 첫번째 프로젝트

yarn add typescript
npx tsc --init
npx tsc 파일명.ts
npx tsc -w 파일명.ts

 

데이터 타입이 중요한 이유

🔸자바스크립트 변수에는 어떤 데이터 타입의 값도 할당될 수 있다.

그렇기 때문에 누군가의 실수로 그 변수에 초기값이 변경이 될 수도 있다.

🔸자바스크립트는 이러한 문제를 사전에 막지 못 한다.

타입 추론(Type Inference) 기능

🔸타입스크립트의 타입추론

🔸타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다.

🔸타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.

🔸타입스크립트는 age 변수의 타입을 자동으로 number로 추론한다.

🔸타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만,

타입을 명시적으로 지정하는 것이 더 명확하다.

🔸타입 추론이 모호나 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.

데이터 타입의 종류

🔸타입스크립트에서는 다양한 데이터 타입을 지원

🔸데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있음

🔸기본 데이터 타입

• number: 숫자 타입으로, 정수와 실수를 포함
• string: 문자열 타입
• boolean: 참, 거짓을 나타내는 불리언 타임
• null: 값이 없음을 나타내는 타입
• undefined: 값이 할당되지 않는 변수의 기본값인 타입

🔸객체 타입

• object: 객체를 나타내는 타입
• array: 동일한 타입의 요소를 가진 배열을 나타내는 타입
• tuple: 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입

🔸특수 타입

• any: 어떠한 타입이든 할당될 수 있는 타입 // 임시타
• unknown: 타입을 미리 알 수 없는 경우 사용되는 타입

타입스크립트 타입 명시

타입 명시

🔸변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정한다.

🔸타입추론을 하지만, 타입을 명시하면 명확해짐

let x: string = '나는 문자열이다.';

변수에 데이터 타입을 지정하는 방법

🔸변수 선언 시 데이터 타입을 지정한다.

🔸타입스크립트를 자바스크립트로 컴파일 할 때,

데이터 타입에 다른 값이 할당되면 오류를 발생시켜 개발자에게 알려준다.

🔸컴파일 타임에 에러를 일으켜서 에러메세지가 나는 것을 컴파일 에러라고 한다.

🔸대부분은 syntax에러가 났을때 컴파일 타임에 에러가 난다.

💢지금 함수에서 타입을 일일이 명시를 해줬더니 가독성도 떨어지고 일일이 타입을 나열해줘야하는 귀찮음이 생겼다. 이를 해결하기 위해 인터페이스를 사용하면 된다❗

타입스크립트 인터페이스

🔸인터페이스는 'string'이나 'number' 타입처럼 데이터 타입으로 사용 가능

🔸선택적 프로퍼티로 지정하려면 속성값 뒤에 ?(옵셔널기호)를 붙여준다.

🔸메소드도 인터페이스 내에서 선언 가능 -> 메소드 오버라이딩

🔸인터페이스를 클래스에 상속(구현: implements)할 수 있다.

🔸인터페이스는 ts파일에만 보여지고, js파일에서는 보여지지 않는다.

 

.ts

 

.js

열거형 (enum)

🔥실제 사용은 GenderType.Male || GenderType.Female 로 불러서 사용 할 수 있다❗

 

.js에서 구현되는 .ts 코드

 

🔥열거형 타입을 문자열로 설정할 수도 있다❗