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 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; ..

안녕하세요 동기 여러분! 오늘은 interface 키워드를 class에 적용하는 놀라운 일을 알아봅시다. Interfaces and Classes interface는 class(클래스)와 object(객체)에 타입을 설정하기 위한 아주 좋은 방법입니다. 생김새 interface 타입명 { 메서드명: (매개 변수: 타입) => 타입; } class 클래스명 implements 타입명 { 메서드명(매개 변수: 타입) { 메서드 내용; } } 해봅시다! 원을 CAD와 USD로 바꾸어 주는 클래스를 만들고 interface로 타입을 설정해보고 실행도 해봅시다. interface KoreanMoney{ caculatingCAD: (won: number) => void; } class WonToCADnUSD imp..

안녕하세요 동기 여러분! 오늘은 객체 타입 심화의 첫 번째 시간으로 Interface를 알아보고 Type과의 차이점은 무엇인지 알아보도록 하겠습니다. Interfaces and Types 아래의 type과 interface의 코드를 보도록 합시다. type StarcraftUnit = { name: string; HP: number; } const marine: StarcraftUnit = // 내용 interface StarcraftUnit { name: string; HP: number; } const marine: StarcraftUnit = // 내용 두 코드를 봤을 때 가장 눈에 띄는 차이점은 키워드(type, interface)가 다르다는 것과 type에는 있는 =(equal) 표시가 inte..

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

안녕하세요 동기 여러분! 오늘은 타입 좁히기의 두 번째 시간으로 in 연산자를 이용하여 프로퍼티(Property)가 객체(Object)나 프로토타입 체인(Prototype Chain)에 존재하는지 확인하는 방법에 대해 알아봅시다! Using in with Type Guards 여기서 in은 '~안에'라고 해석하면 코드를 읽기가 편해집니다. 사용방법 1. 타입 선언해주기 스타크래프트 테란의 바이오닉 체제와 메카닉 체제를 이용하여 타입을 선언해주겠습니다. 타입 바이오닉과 타입 메카닉를 타입 에일리어스로 선언해보겠습니다. type Bionic = { run: () => string; } type Mechanic = { drive: () => string; } 2. 타입에 맞는 변수 설정하기 바이오닉의 대표적인..

안녕하세요 동기 여러분! 오늘은 타입 좁히기의 첫 번째 시간 타입 가드에 대해 알아봅시다! 사실 이 내용은 여태껏 알아본 타입들의 맥락과 비슷하기 때문에 쉬울 것이라 예상합니다. Type guards 타입스크립트가 타입을 좁히는 방법은 조건문을 사용하여 변수가 특정한 타입인지 아닌지를 확인하는 것입니다. 이것을 우리가 타입 가드(Type guard)라고 부릅니다! 간단한 생김새 function whatever(what: string | number) { if (typeof what ==='string'){ // if문 내용 } } 함수 whatever을 선언하는데 매개 변수로는 what을 사용하고 what의 타입은 유니온으로 string과 number입니다. if문을 넣어서 what의 타입이 'strin..

다들 건강하신가요 동기 여러분! 오늘은 유니온 타입의 마지막 시간으로 리터럴 유니온 타입에 대해 알아봅시다. 영어를 사용하는 외국인들을 관찰(?) 아니.. 음 그들의 이야기를 잘 들어보면 A~~ , the a~~ , though, literally 라는 말을 엄청 많이 사용하는데 literally의 형용사형이 바로 literal입니다. 뜻은 '글자 그대로의'입니다. 뜻을 유념하며 오늘의 포스팅 시작합니다! Unions with Literal Types 리터럴 유니온 타입은 뚜렷한 상태를 프로그램으로 만들 때 상당히 유용합니다. 생김새와 사용방법 type DragoonQuotation = 'trained' | 'selected' | 'confirming order' | 'repeatedly selected..

안녕하세요 동기 여러분! 오늘은 유니온 타입의 네 번째 시간으로 유니온과 배열의 조합은 어떤지 알아봅시다! Unions and Arrays 유니온은 배열과 함께 조합되어 사용될 때 그의 진가를 볼 수 있습니다. 아래의 코드를 살펴봅시다. const dateNumber = Date.now(); const dateString = Date().toString(); 변수 dateNumber를 Date.now() 메서드로 선언하는데 Date.now()는 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환한 값입니다. 변수 dateString을 Date() 생성자와 .toString() 메서드로 선언하는데 Date()는 생성 순간의 날짜와 시간을 나타내는 D..