2024.08.20(화) - 2일 차
오늘은 어제에 이어 인터페이스로 시작했습니다.
인터페이스란?
개체 타입을 지정할 때 사용하는 문법입니다.
쉽게 말하자면 우리만의 타입을 만들고 싶을 때 쓰는 기능입니다.
(무작정 객체 타입이라고 해서 인터페이스를 쓰는 건 아님)
인터페이스 작성 방법 ↓
// 관례상 타입명 앞에 I를 붙임
interface 타입명 {
속성: 타입;
...
}
인터페이스의 몇 가지 성질을 예시 코드를 통해 알아보겠습니다.
1. 병합
2. readonly
3. optional 프로퍼티
4. 상속
// interface 키워드 작성 후 변수명 { ... }
interface IUser{
readonly name: string; //readonly 속성으로 하면 값이 바뀌지 못하게 읽기전용으로 설정해줌
age: number;
}
// 인터페이스 병합 성질 : 똑같은 식별자의 인터페이스를 하나로 합쳐주는 것 -> 자동으로 됨
// 따라서 아래 user에 이메일을 추가해야 오류 나지 않음
// 인터페이스는 중복 오류를 내지 않는다. 고로 IUser 여러개 만들수 잇음 그리고 자동 병합해줌
// 따라서 사용에 유의해야함 의도치 않은 중복 작성으로 병합이 되버릴 수 있음
interface IUser{
email: string;
}
const user: IUser = {
name: 'john',
age: 20,
email: "jiwoo727@naver.com",
}
// 옵셔널 프로퍼티
interface IUser {
name: string;
age?: number;
}
// 인터섹션 오퍼레이터(&)를 사용하지 않고도 상속이 가능 -> extends 키워드 사용
// 기본 인터페이스 정의
interface IAnimal {
name: string;
age: number;
makeSound(): void;
}
// IAnimal 인터페이스를 상속 받는 Dog 인터페이스 정의
interface Dog extends IAnimal {
breed: string; // 추가적인 프로퍼티
bark(): void; //추가적인 메서드
}
const dog1: Dog = {
name: "누렁이",
age: 3,
breed: "시바견",
makeSound() {
console.log("멍멍");
},
bark() {
console.log("왈왈");
},
};
*참고*
인덱스 시그니처(Index Signature) : {[key : T] : U}형식으로 객체가 여러 Key를 가질 수 있으며 Key와 매칭되는 value를 가지는 경우 사용한다.
// 인덱스 시그니처 예시
interface IUser = {
[key : string] : string | number;
}
const user : IUser = {
name:'jiwoo',
age: 20,
}
그 다음으로는 타입별칭(type alias)에 대해 알아보겠습니다.
타입별칭은 type 키워드를 사용해 타입을 지정하는 방식입니다
// interface와 동일한 형태
type TUser = {
name: string;
age: number;
}
// 다른 사용 예시
type TOption = "A" | "B" | "C";
const option: TOption = "A";
Interface와 문법적 측면에서 거의 동일합니다.
그럼 무엇이 다를까?
바로 type은 interface와 다르게 해당 타입을 사용한 변수에 마우스를 호버하면
그 타입들이 보인다는 것입니다.
아 그럼 type이 더 좋네 type만 써야겠다. 생각하신다면 type은 interface와 다르게 자동 병합이 되지
않는다는 특징을 가지고 있습니다. (상속도 안됨!) 따라서 type을 병합하고 싶다면 인터섹션 오퍼레이터(&)를 사용해야 합니다.
따라서 적절한 상황에 필요에 따라 유연한 컨밴션을 가지는 것이 중요합니다.
그 다음으로는 enum(열거형)을 살펴보겠습니다.
타입스크립트의 enum은 열거형(enum)을 정의하는데 사용되는 데이터 타입입니다.
열거형은 관련된 상수 집합을 그룹화하여 코드의 가독성과 유지보수성을 높여줍니다.
열거형에는
1. 숫자형 열거 : 멤버는 자동으로 0부터 시작되는 숫자 값을 갖습니다.
2. 문자형 열거 : 각 멤버가 문자열 값을 가지도록 정의할 수 있습니다.
가 있습니다.
//열거형(enum)은
//숫자형 열거
enum Direction {
Up, //0
Down, //1
Left, //2
Right //3
}
//숫자 값을 사용하여 이름을 얻을 수 있음
console.log(Direction[2]) // 'Up'
//문자형 열거
enum Role {
Admin = 'admin', //0
User = 'user', //1
Guest = 'guest', //2
}
//숫자형 열거와 마찬가지로 숫자 값을 사용하여 이름을 얻을 수 있음
console.log(Role[1]); // 'user'
console.log(Role.Guest); // 'guest'
마지막으로 '이니셜라이즈된 열거형(Const Enum)을 알아보겠습니다.
다음과 같이 숫자를 상수로 지정해줄 수 있는 것입니다. 그다
타입스크립트 파트 마지막 주제는
"제네릭"
입니다
제네릭은 타입을 미리 정하지 않고 사용하는 시점에 타입을 정의해서 사용하는 타입스크립트 문법입니다.(물론, 다른 언어세도 제네릭이 존재하는 것은 알지만~..)
아래 예시 코드를 통해 제네릭을 알아보고 마지막에 참고로 타입 가드에 대해서도 짚고 넘어가도록 하겠습니다.
// 예시1
function getSize<T>(arr:T[]) {
return arr.length;
}
// 이 때 결정이 됨
getSize<number>([1,2.3]); // 정수 배열로 결정
getSize<string>(['a','b','c']); // 문자 배열로 결정
getSize<boolean>([true, false]); // 논리 배열로 결정
// 예시2
function getReturnValue<T>(arr: T[]): T[] {
return arr;
}
getReturnValue<number>([1,2,3]);
getReturnValue<string>(['a','b','c']);
//제네릭의 본질 꺾새 안에 있는 타입을 받아서 치환시킴!
//제네릭 활용 예시
function filterArray<T>(arr: T[], condition: (item:T)=>boolean): T[] {
return arr.filter((item) => condition(item));
}
const numberArray = [1,2,3,4,5];
const isEven = (num:number) => num % 2 === 0;
const evenNumbers = filterArray(numberArray, isEven);;
console.log(evenNumbers);
// ---------- 참고(type gard) ----------
const add = (n1:number, n2?:number) => {
// 타입 가드
// 일관 문법을 말하는 것이 아닌, 방식을 말하는것 -> 일종의 방법론
// 이렇게 코드 짠거를 타입 가드했다~ 라고한다.
if(typeof n2 !== 'undefined') return n1 + n2;
else return n1;
}
// 타입가드 추가예시
const getReturnValue = (n:number | string) => {
if(typeof n==="number") return n.toFixed(1);
return n;
};
console.log(getReturnValue(1));
—————————————————————
본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정
