라벨이 ts인 게시물 표시

TypeScript Type 선언9 - never

이미지
 안녕하세요 . 이번에는 새로운 타입인 never에 대해서 알아보겠습니다. never는 그 뜻에서 절대로라는 뜻입니다. 즉 return값이 없다는 것입니다. 그럼 아래 코드를 보도록 하겠습니다. // 에러를 임의로 생성하는 함수 function createError ( message : string , code : number ){ // throw를 이용하여 error를 임의로 준다. throw ({ message , errorCode : code }); } // createError를 사용하여 임의로 에러를 발생 createError ( 'server error' , 500 );  위 코드를 보면 'createError'는 2개의 변수를 받습니다. message와 code입니다. 하지만 출력은 없습니다. 단지 throw 구문을 이용하여 에러를 출력합니다.   마지막에 createError('server error', 500)을 이용하여 에러를 생성한 결과는 아래와 같습니다. 그렇다면 createError의 return값은 있을까요? 사실 없습니다. try,catch구문을 사용하지 않는이상 사실상 createError함수가 실행되면 다음에 나오는 코드들은 무시가 되고 바로 에러를 출력하게 됩니다. // 에러를 임의로 생성하는 함수 function createError ( message : string , code : number ) : never { // throw를 이용하여 error를 임의로 준다. throw ({ message , errorCode : code }); } // createError를 사용하여 임의로 에러를 발생 createError ( 'server error' , 500 );  'never'가 없으면 기본값으로 'void'가 출력 type으로 지정이 됩니다. 하지만 never가 더 정확합니다. 실제로 c...

TypeScript 변수 선언8 - unknown;

이미지
 안녕하세요. 이번에는 unknown이라는 타입을 알아보겠습니다. 한글로 해석하자면 "알수없음"이라는 뜻인데 말 그대로 무엇이 들어갈지 알수 없다는 뜻입니다. // input에 무엇이 들어올지 알수 없는 경우 let input : unknown ; input = 9 ; // input에 Number가 들어감 input = { object : "hello" } // input에 Object가 들어감 console . log ( input ); // 가장 마지막에 들어간 변수 출력 위 코드에서 input 변수에 type를 unknown으로 지정했습니다. 다음에는 숫자 9를 입력하고 다음 object를 지정했음에도 에러가 발생하지 않았습니다.  console.log에 출력된 결과를 보면 마지막에 입력이 된 object가 출력됬음을 알수 있습니다. 그렇다면 type이 지정된 변수도 저장이 가능할까요? // input에 무엇이 들어올지 알수 없는 경우 let input : unknown ; let str : string = "hello" ; input = 9 ; // input에 Number가 들어감 input = { object : "hello" } // input에 Object가 들어감 input = str ; // str변수의 문자열을 input에 입력 console . log ( input ); // 가장 마지막에 들어간 변수 출력 제대로 출력됨을 확인할수 있습니다. 

TypeScript 변수 선언7 - function(함수), callback function

이미지
  이번 글에는 저번과 조금 다르게 function에 콜백함수를 넣겠습니다. 콜백함수또한 TypeScript에서 타입을 지정을 할수 있습니다. // call back함수를 사용하는 함수 function addAndHandle ( n1 : number , n2 : number , cb : ( num : number ) => void ) : void { const result = n1 + n2 ; cb ( result ); // call back함수 사용 } 위 코드는 3개의 인자를 받습니다. 2개의 number와 1개의 콜백함수 입니다. 이제 이전 글에서와 같이 콜백함수에 대한 type도 정의할수 있습니다. 콜백함수는 1개의 인자(number)를 받을수 있고 return값은 void입니다. 코드를 확인하면 2개의 숫자를 더한후 콜백함수의 인자로 사용하는 것을 알수 있습니다. const app = ( num1 : number ) => { const result = num1 * num1 ; console . log ( "num1의 제곱근 : " , result ); } 이제 임의의 콜백함수를 만들었다. 위 코드에서 인자를 제곱한후 콘솔log로 출력한다. 간단하지만 addAndHandle의 콜백함수 타입과 같다. 위와 같이 node에서 실행하면 console.log로 출력되는 것을 확인할수 있습니다. // Arrow Function을 콜백으로 사용해도 동일한 결과가 나옴 addAndHandle ( 5 , 2 ,( result ) => { result *= result ; console . log ( "num1의 제곱근 : " , result ) })

nest js -4 member.controller.ts, member.module.ts app.module.ts coding

이미지
/* member.controller.ts 파일 */ // Controller를 구성하기 위한 method // Controller : nest js에서 컨트롤 구현시 필요 // Post : nest js에서 Client의 Post 구현시 필요 // Body : nest js에서 Client의 Body를 추출할때 필요 // Get : nest js에서 Client의 Get 구현시 필요 import { Controller , Post , Body , Get } from '@nestjs/common' ; // MembersService method를 참조 import { MembersService } from './member.service' ; // Controller의 시작부분 // ('members')일시 url은 root/members으로 요청이 와야 // 아래 Controller이 실행된다. @ Controller ( 'members' ) export class MembersController { // MembersService는 현재 class안에서만 사용할수 있다. // 동시에 읽기 전용이다. constructor ( private readonly membersService : MembersService ) { } // GET요청 URL : root/members @ Get () // 모든 members의 정보를 요청한다. getAllMembers (){ return { // Controller에서 membersService의 getMembers method // 에서 해당값을 요청. members : this . membersService . getMembers () } } // POST요청 URL : roo...

nest js -3 member.service.ts, members.module.ts coding

 먼저 members.module의 틀을 작성하도록 하겠습니다. /* 회원가입시 유저가 입력해야하는 정보 name : 이름 (string) password : 비밀번호 (string) email : 이메일 (string) age : 나이 (number) 위 members.module을 만드는 방법은 2가지가 있습니다. */ // 1번째 cless를 이용하여 지정 export class Member_ver1 { id : string ; // DB저장시 PR키 name : string ; password : string ; email : string ; age : number ; constructor ( id : string , name : string , password : string , email : string , age : number ) { this . id = id ; this . name = name ; this . password = password ; this . email = email ; this . age = age ; } } // 2번째 public를 이용하여 지정 export class Member_ver2 { // 위쪽 코드와 동일함 constructor ( public id : string , public name : string , public password : string , public email : string , public age : number ) { } } 2가지 경우를 모두 사용하기 위해 class 명칭을 각...

nest js -2 테스트 및 폴더 구성

이미지
   일단 'nest new [project name]'을 실행하고 생성된 폴더와 파일들이 제대로 동작되는지 확인하기 위해서 'npm start'를 실행합니다. 위 Postman을 이용항여 localhost:3000에 GET요청을 할때 Respone으로 "Hello World!"가 온것을 확인할수 있습니다.  참고로 'Hello World!'문자열의 app.service.ts에서 getHello() method의 'Hello World!'문자열이 return 한 값입니다. 전체적이 구조를 이해할려면 이전 글(nest js -1 Structure) 을 참고해 주시기 바랍니다. 이제 src경로에 'members'폴더를 만든다. 이 폴더는 members의 controller, module, modules, service의 ts파일이 저장된다. 이제 폴더와 파일이 완성되었다. 다음 글서부터는 ts파일 작성법에 대해서 글을 쓰도록 하겠습니다. 

TypeScript 변수 선언6 - function(함수), 변수 선언 및 에러

이미지
 안녕하세요. 이번에는 이전시간때 배웠던 함수를 사용할때 발생할수 있는 오류와 이를 해결하는 방법에 대해서 알아보겠습니다. // 2개의 수를 받아서 합친 값을 return 한다. function addTwoNumber ( num1 : number , num2 : number ) : number { let result : number ; result = num1 + num2 ; return result ; } // 한개의 숫자를 받아서 "Result : [num]"으로 출력 function printString ( num : number ) : string { console . log ( "Result : " , num ); return ( "Result : " + String ( num )); } // addFunction을 선언한다. let addFunction ; // addFunction에 addTwoNumber를 지정한다. addFunction = addTwoNumber ; console . log ( addFunction ( 3 , 4 )); // 7로 정상출력 위 코드는 2개의 간단한 함수와 addFunction이라는 변수를 사용하는 예제입니다. 위 예제에서 addFunction은 addTwoNumber로 선언이 되고 2개의 인자가 입력되면 정상적으로 결과가 나오는 것을 알수 있습니다.  // addFunction을 선언한다. let addFunction ; // addFunction에 addTwoNumber를 지정한다. addFunction = addTwoNumber ; addFunction = 5 ; // 에러발생 : number 5로 선언 console . log ( addFunction ( 3 , 4 )); // 에러 발생 이제 'addFunction = addTwoNumber;' 아래쪽에 코드를 하나 더 추가...

TypeScript 변수 선언5 - function(함수), void, undefined

이미지
안녕하세요. 이번에는 TypeScript에서 함수를 사용할때를 설명해 드리게습니다. // function의 원소들을 우너하는 변수 형태로 선언할수 있다. // function의 return값도 선언이 가능하다. function add ( num1 : number , num2 : number ) : number { // return할 result를 number로 선언 let result : number ; // 각각, num1, num2는 number이다. // 두 number의 합은 result의 결과이다. result = num1 + num2 ; // number인 result return return result ; } // console.log의 출력은 두수의 합의 결과다. console . log ( add ( 1 , 3 )); 위 코드에서 num1, num2에 변수 속성을 각각 선언한 것을 알수 있습니다. 가장 오른쪽의 number는 function add의 return값의 속성을 지정한 것입니다. 하지만 add함수의 return값을 string로 지정을 하면 에러가 발생합니다.   따라서 함수의 return값의 속성을 정확하게 지정을 해야 TypeScript에서 에러가 발생하지 않는다.  // console.log의 출력은 두수의 합의 결과다. // console.log(add(1,3)); // function을 void로 선언 function testVoid ( num : number ) : void { console . log ( "Test Void : " , num ); // function이 void로 선언되면 return값이 // 없음 } testVoid ( 77 ); JavaScript에는 void라는 속성이 없습니다. 대신 undefined라는 속성이 있는데 이것 또한 TypeScript에서 사용할수 있습니다. TypeSc...

TypeScript 변수 선언4 - union

이미지
안녕하세요. 이번에는 여러 속성을 정의할수 있는 union에 대해서 설명 드리겠습니다. let input : number ; // input은 number로 선언 input = 5 ; // input에 number 5 입력 console . log ( input ); // input출력 위 코드를 보면 input변수에는 Number type의 데이터만 들어갈수 있음을 확인할수 있습니다. let input : number ; // input은 number로 선언 input = "Hello" ; // input에 number 5 입력 console . log ( input ); // input출력 위 코드를 보면 input는 number외의 다른 속성을 입력하게 되면 TypeScript에서 에러 표시를 할거라는 것을 알수 있습니다. let input : number | string ; // input은 number로 선언 input = "Hello" ; // input에 string Hello 입력 console . log ( input ); // input출력 '|'을 사용하여 새로운 type를 선언할수 있습니다. 위 코드에서는 string을 추가로 선언하여 더이상 TypeScript에 에러가 사라졌습니다. 이처럼 2개 이상의 속성을 선언하는 것을 union이라고 합니다. 하지만 함수를 선언할때에 union을 사용했음에도 TypeScript에서 에러가 걸리는 경우가 있습니다. // // 보통 하나의 속성을 정의하지만 // // union은 복스의 속성을 정의한다. function combine ( input1 : number | string , input2 : number ){ const result = input1 + input2 ; return result ; } const combineValue = combine ( "Hello" , 77...

TypeScript 변수 선언3 - tuple, enum

이미지
변수 예시 설명 자바스크립트에 존재? number 3,2,-7,0.4 JavaScript의 모든 숫자(정수,소수) O string "Hello", 'World' 모든 문자열 O boolean true, false 참, 거짓 O object { name : "Alex"} Object(객체)를 지칭함 O array [0,1,2,3,4,5] 원소의 변수에 따라 배열의 타입이 정해진다 O tuple [0,"Hello], ["World", 1] 고정된 길이와 속성의 배열 X enum [APPLE = 0, BANANA=1] 변수명에 따른 식별코드 부여 X   이제 이표의 마지막 2개에 대해서 설명해 드리겠습니다. tuple, enum는 JavaScript에 존재하지 않습니다.  let tuple1 :[ number , string ]; // tuple발생 tuple1 = [ 0 , "Hello" ]; // tuple선언 console . log ( tuple1 ); 위 ts코드를 동작할때 tuple1변수는 오직 2개의 원소와 각각 숫자와 문자를 가지도록 하용이 되어 있습니다.  위 사진에서 tuple1배열에 인덱스 2의 위치에서 숫자 1을 입력할려고 할때 TypeScript에서 경고를 보냅니다. 첫번째로 tuple1의 인덱스 2는 존재하지 않다는 것입니다. 두번째는 인덱스 2가 존재하지 않으니 undefined상태고 이곳에 숫자 1을 입력할수 없는 것입니다.  let tuple1 :[ number , string ]; // tuple발생 tuple1 = [ 0 , "Hello" ]; // tuple선언 tuple1 . push ( 1 ); console . log ( tuple1 ); 하지만 tuple1에 push를 하게 되면 TypeScript의 문법을 피할수가 있습니다. 물론 추천을 드리지 않지만 이런 방법이 있다는 것도 참고해 주시기 바랍니다.  ...

TypeScript 변수 선언2 - boolean, object, array

이미지
안녕하세요. 이번에는 TypeScript의 boolean, object, array에 대한 설명을 하도록 하겠습니다.  변수 예시 설명 자바스크립트에 존재? number 3,2,-7,0.4 JavaScript의 모든 숫자(정수,소수) O string "Hello", 'World' 모든 문자열 O boolean true, false 참, 거짓 O object { name : "Alex"} Object(객체)를 지칭함 O array [0,1,2,3,4,5] 원소의 변수에 따라 배열의 타입이 정해진다 O tuple [0,"Hello], ["World", 1] 고정된 길이와 속성의 배열 X enum [APPLE = 0, BANANA=1] 변수명에 따른 식별코드 부여 X 위 표를 볼때 boolean, object, array또한 JavaScript에서 사용할수 있는 변수로 알수 있습니다. 하지만 TypeScript에서 변수 선언을 명확하게 하고 에러를 줄이기 위해서 옆에 변수 속성을 적게 되어있습니다. let bool : boolean ; // 불리언 타입만 넣을수 있음 bool = true ; if ( bool === true ){ console . log ( "Hello World" ); } else { console . log ( `bool is ${ bool } ` ); } 위 코드의 변수 bool은 boolean타입의 값만 입력할수 있습니다. bool값이 true이면 console.log에서 "Hello World"가 출력되고 false시 "bool is false"라고 출력 됩니다. let bool : boolean ; // 불리언 타입만 넣을수 있음 bool = "Alex" ; if ( bool === true ){ console . log ( "Hello World...