Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 Optional Type Members에 대해 알아봅시다! Optional Type Members 예전에 Optional Parameters를 포스팅할 때 이미 한 번 알아본 적이 있는 내용입니다. 바로!!! 물음표를 사용하는 것입니다!!! 스타크래프트의 유닛을 보면 이름, 체력, 공격력, 방어력은 반드시 가지고 있습니다. 하지만 마나나 스킬이 없는 경우는 있죠. (물론... 공격력이 없는 경우도 있는데 제외하겠습니다... ㅈㅅ 코드 다 쓰고 나니까 생각나서 ㅠㅠ ㅋㅋㅋ) 그래서 코드를 아래와 같이 써주었습니다. interface StarcraftUnit { name: string; hp: number; mp?: number; skill?: string; damage: n..

안녕하세요 동기 여러분! 오늘은 Index Signature에 대해 알아봅시다! Index Signatures 객체를 유형을 알아낼 때 가끔씩 객체의 프로퍼티의 이름을 알 수가 없는 경우가 있습니다. 특히, 우리가 밖의 데이터 source/API의 정보를 받아 올 때 그런데요, 아래의 코드를 보도록 합시다. { '오늘의': 2; '점심은': 53; '초밥이다': 12; '기분저아': 1; } 위 코드를 보면 '프로퍼티가 string이네, 값은 number구나!'라는 기본적인 사실은 알 수 있지만 프로퍼티의 이름을 알 수가 없습니다. 이런 경우, Index Signature를 활용하여 개발자들이 객체의 자세한 정보를 빠르게 알아차릴 수 있게 도와줍니다. Index Signature 생김새 interface..

안녕하세요 동기 여러분! 저번 시간에 알아본 Composed Interface는 뭔가 공통이 되는 부분을 프로퍼티의 값으로 당겨와서 인터페이스를 작성했는데 오늘은 알아볼 Extending Interface는 인터페이스와 다른 인터페이스를 합치는 방법에 대해 알아보겠습니다. 뭔가 합집합 같은 느낌이에요. Extending Interfaces extend를 영어사전에 찾아보면 '연장하다'라는 뜻이 있습니다. '오호 그럼 인터페이스를 연장하겠군!'이라 생각하며 아래의 코드를 봅시다. interface Baegopa { iWant: string; } interface NadoBaegopa { weWant: string; beverage: () => void; } const letsEat: Baegopa = { ..

안녕하세요 동기 여러분! 오늘은 중첩된 인터페이스 프로퍼티의 값을 다른 인터페이스에 옮겨 담아 코드를 깔끔하게 만드는 방법에 대해 알아봅시다! Composed Types 아래의 코드를 봅시당! interface Color { red: { blue: string; green: string; yellow: { orange:number; } } } 아주 복잡해 보이는 중첩된 인터페이스입니다. 컴포즈드 타입(Composed Type)을 이용하면 코드를 깔끔하게 정리를 할 수가 있습니다. interface Color { red: Red; } interface Red { blue: string; green: string; yellow: Yellow; } interface Yellow { orange:number; ..

안녕하세요 동기 여러분! 오늘은 중첩 메서드의 인터페이스를 작성하는 방법에 대해 알아봅시다! Deep Types 아래의 코드를 봅시다. interface Characters { heros: { blackWidow: { alias: string; gender: string; height: number; } } } class Marvel implements Characters{ heros = { blackWidow: { alias: 'Black Widow', gender: 'female', height: 170 } } } const infoBW = new Marvel(); console.log(infoBW.heros); 인터페이스 Characters라는 인터페이스를 만들고 hero안에 blackWidow안에..

안녕하세요 동기 여러분! 오늘은 타입 좁히기 마지막 시간으로 저저번 시간에 if문을 두 개 쓰다가 저번 시간에는 else로 바꿔서 코드를 깔끔하게 다듬어 줬는데 이번 시간에는 그 else도 없애버리겠습니다 ㅎㅎ Narrowing After a Type Guard 타입스크립트가 타입을 좁히는 방법이 조건문을 사용하여 변수가 특정한 타입인지 아닌지를 확인하고 이것을 우리가 타입 가드(Type guard)라고 부른다고 알아봤었습니다. 오늘의 제목인 Narrowing After a Type Guard(타입 가드 후 좁히기)인데요 → 아니 타입 가드를 했는데 그 후에 또 타입을 좁힌다고??? 이게 머선소리고? 아래는 세 번째 우려먹고 있는 코드입니다. 저번 시간에는 아래와 같이 함수에 if문과 else를 써준 깔..

안녕하세요 동기 여러분! 오늘은 커스텀 타입의 마지막 시간으로 제네릭 함수에 대해 알아봅시다! Generic Functions 제네릭을 이용해서 타입이 선언된 함수도 만들 수 있습니다. 제네릭 함수를 사용하는 이유 아래의 코드를 봅시다. function getSomething(something: string): string{ return something; } function getSomething(something: number): number{ return something; } function getSomething(something: boolean): boolean{ return something; } something을 리턴해주는 함수를 만들고 파라미터 something과 리턴값 모두에 타입을 ..

안녕하세요 동기 여러분! 오늘은 커스텀 타입의 다섯 번째 시간으로 함수 타입에 대해 알아봅시다! Function Types 자바스크립트에서 깔끔한 기능 중 하나가 바로 함수를 변수에 선언할 수 있다는 큰 장점이 있는데요, 아래의 코드를 보도록 합시다. let printFunction = console.log; printFunction('사골국물에 라면을 끓여 먹으면 참 맛있다'); 실행하면 변수에 선언해둔 출력문이 제대로 작동합니다! 타입스크립트에서 위의 방법을 활용하여 함수에 타입을 선언하는 방법이 있는데 그것을 함수 타입(Function Type)라고 합니다. 함수 타입 설정하기 type thisIsTypeFunc = (arg0: number, arg1: number) => string; 타입 에일리..

안녕하세요 동기 여러분! 오늘은 타입스크립트의 튜플과 자바스크립트의 전개 구문(Spread Syntax)의 환상적인 조화에 대해 알아봅시다! Spread Syntax 전개 구문은 ...을 붙힌 축약형이라 말할 수 있겠다. 아래의 코드를 보자. let arcaneChamps = ['바이', '징크스', '케이틀린', '제이스', '빅토르', '에코']; 리그 오브 레전드의 애니메이션 아케인의 챔피언들을 모아놓은 배열이다. 이걸 전개 구문으로 당겨오는데 방법이 상당히 깔끔하고 간단하다. let arcaneChamps = ['바이', '징크스', '케이틀린', '제이스', '빅토르', '에코']; let newAcaneChamps = [...arcaneChamps]; 앞에 ... 붙여서 가져오면 끝이다. 한번..

안녕하세요 동기 여러분! 오늘은 레스트 매개 변수(Rest Parameter)에 대해 알아보고 타입 선언을 하는 방법에 대해 알아보겠습니다! Rest Parameters 레스트 매개 변수는 매개 변수의 수의 정해 놓지 않고 사용자가 넣고 싶은 독립 변수의 수만큼 넣을 수 있도록 도와주는 기능입니다. 사용 방법 function whatISay(me, ...say) { let output = me; for(let i = 0; i < say.length; i++) { output = output.concat(say[i]); } return output; } ...say가 바로 레스트 매개 변수(Rest Parameter)입니다. 함수 whatIsay에 매겨 변수 me와 , ...say를 설정 매개변수 me를 ..