[유데미x스나이퍼팩토리 프로젝트 캠프] Next.js 3기 Day 2

0. Type Script로 함수 타입 정의하는 간단 예제

//1. 함수 표현식으로 푼 두 숫자를 더하고 결과를 반환하는 함수
const add = (n1: number, n2: number) : number => n1+n2;

const add: (n1:number, n2:number) => number = (n1, n2) => n1+n2;

function add(n1:number, n2:number): number {
    return n1+n2;
}

//2.문자열을 받아서 문자열을 반환하는 함수
const greet = (name : string): string => `Hello, ${name}`;

//3. 불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수 (void 반환)
const isLogin = (status:boolean): void => {
    console.log(status ? "login success" : "login falied");
};

//4. 문장에서 가장 긴 단어를 반환하는 함수 (string , 배열아님)
const getLongestString = (value : string) => {
    return value.split(" ").sort((a,b) => b.length - a.length)[0];
}
console.log(getLongestString("a bdc dfe gklf"));

 

1. Type Operator

: Typescript에서 사용할 수 있는 연산자

- 산술 연산자, 할당 연산자, 비교 연산자..

 

(1.1) 유니온 타입을 이용한 예제

? 여기서 유니온 타입이란 ,

OR(||) 연산자와 같은 역할을 하는 타입스크립트 오퍼레이터(|)로 여러 개의 타입을 결합한 타입

const returnValue = (value: string | number) => value;
console.log(returnValue("A"));
console.log(returnValue(10));

 

(1.2) 인터섹션 & AND

? 인터섹션이란, AND(&&) 연산자와 같은 역할을 하는 타입스크립트 오퍼레이터(*)를 사용하여 2개 이상의 타입을 결합한 타입

let user1: {name : string } & { age: number } & { gender: string }= { //양쪽 모두 만족해야 함(name, age)
    name: "John",
    age : 20,
    gender : "male"
};

let numAndString: number & string;

 

* 유니온 타입을 사용했을 때, 그 함수 내부에서 유니온 타입의 매개 변수를 사용하면 타입을 좁혀주는 과정이 필요하다.

typeof 와 instanceof로 좁혀준다.

const add = (n1:number | string ,n2: number| string): number| string =>{
    if ( typeof n1 === "number" && typeof n2 === "number") return n1 + n2;
    else if (typeof n1 === "string" && typeof n2 === "string") return n1+ n2;
    throw new Error("Prameter not vaild");
};
const res1 = add(10,20);
const res2 = add("A", "B");
console.log(res1, res2);

위와 같은 typeof 예시가 있다.

 

 

(1.3) Add 함수

 

 

2. 타입 별칭(type alias) : 유지보수가 편리함

type Point = {
    x: number;
    y: number;
} 

const point1: Point = {
    x : 10,
    y : 20,
};

const point2: Point = {
    x:20,
    y:30,
};

 

 

익명함수와 화살표 함수로 바꾸면

 

 

3. 인터페이스 타입

: 인터페이스는 개체 타입을 지정할 때 사용하는 문법

* 기본 뼈대

interface 타입명{
  속성:타입, 
  ...
}

 

*변수에 인터페이스 적용

interface IUser {
  name: string;
  age: number;
  introduce: () => string;
}

const user: IUser = {
  name: "sucoding",
  age: 20,
  introduce() {
    return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
  },
};

 

type와 interface의 차이

type은 모든 타입을 선언할 때 사용할 수 있고, interface는 객체에 대한 타입을 선언할 때만 사용할 수 있다.
또한 확장 불가능한 타입을 선언하고 싶다면 type을 사용하면 되고, 확장 가능한 타입을 선언하고 싶다면 interface를 사용하면 된다.

 

 

4. 이넘(enum)

: 열거형을 정의하는 데 사용되는 데이터 타입

(4.1) 숫자 열거

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

console.log(Direction.Down);
console.log(Direction.Up);
console.log(Direction.Left);
console.log(Direction.Right);

 

(4.2) 문자형 열거 : 값이 명확하고 예측가능하므로 더 직관적이다.

enum CarColor {
    Red = "red",
    White = "white",
    Black = "black",
}
console.log(CarColor.Red);
console.log(CarColor.White);
console.log(CarColor.Black);

type Car = {
    name : string;
    speed : number;
    color: "red"| "white" | "black"; //CarColor로 스위치
};

const car1:Car = {
    name : "s class",
    speed :  200,
    color : CarColor.Black,
};

 

 

5. 제네릭 : 타입을 미리 정하지 않고, 사용하는 시점에서 타입을 정의해서 쓸 수 있는 문법

* 기본 뼈대

// 제네릭 함수
function identity<T>(value: T): T {
  return value;
}

console.log(identity(42));       // 42
console.log(identity("hello"));  // hello

 

* 응용한 예제

interface Mobile<T>{
    name: string;
    color: string;
    option: T;
}

let mobile1: Mobile<string> = {
    name: "Galaxy S21",
    color: "white",
    option: "없음",
}

type Option = {bell : string};
let mobile2: Mobile<Option> = {
    name: "Galaxy S21",
    color: "white",
    option: {
        bell: "3개월",
    },
}

Mobile 인터페이스는 제네릭을 사용해 option 필드의 타입을 유연하게 설정할 수 있게 합니다.

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 3기 과정(B-log) 리뷰로 작성 되었습니다.

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정