카테고리 없음

TIL :: typescript

두캔두잇 2023. 8. 5. 19:12

타입스크립트를 하면서 dto 폴더를 만든뒤 

여기에 이런식으로 타입을 지정해줬다.

export interface CreateUserDto {
  name: string;
  content: string;
  age: number;
}

여기에서 다른 파일을 확장해서 쓰려고하면 

import { newUserDto } from './newUser.dto';

export interface NewMovieDto extends newUserDto {
  name: string;
  content: string;
  comment: string;
  stars: number;
}

이런식으로 extends를 사용해서 하면 newUserDto에 있는 key 값들도 사용 할 수 있게된다.

 

그리고 그 후에는 controller쪽 파일에서 

 @Get()
  Post(): string {
    return this.boardService.Post();
  }

이런식으로 Get메소드를 설정하고 

변수를 선언하고 string으로 설정한다. 밑에 this.boardService는 아키텍처형식으로 했기에 Service에 있는 Post에 접근하기 위해 적었다고 생각하면된다. 그리고 실제로 Service쪽 파일에 가서 보게되면,

 Post(): string {
    return '메모를 작성해주세요';
  }

이렇게 string으로 선언한뒤 return으로 받을 메세지를 string 형식으로 반환하면 끝이다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

위에서 한 방식은 Get 방식이고 이제는 Post 방식에 대해 알아본건데 살짝 다른 점들이 있다. 

위에서 말한 Dto 파일과 관련이 됐는데 Dto 파일에서 key값들을 설정해주고 타입을 설정을해서 불러오는 방식이다.

 

 @Post('1')
  resisterUser(@Body() resisterUserData: CreateUserDto): CreateUserDto {
    return this.boardService.resisterUser(resisterUserData);
  }

이게 Post method로 한건데 @Post() 안에는 URL의 주소나 파라미터값을 적어주면 된다.

그리고 변수를 선언해서 Body값에 들어갈 값들을 저렇게 @를 통해 선언해주고 매개변수(resisterUserData)를 만들어줬다. 그리고 콜론을 통해 뒤에는 Dto파일에서 만든 key값들을 불어오고 return을 한다.

export interface CreateUserDto {
  name: string;
  content: string;
  age: number;
}

그 이후에 Service쪽에서 확인을 해보면

resisterUser(resisterUserData: CreateUserDto): CreateUserDto {
    return resisterUserData;
  }

앞서말한 Get 과는 다르게 작성이 되는데 위에서 선언한 매개변수에 Dto에서 만든 key값들을 할당한 뒤 return으로 값을 

반환하면 된다.