1/16 월 (TypeScript, 만나서 반갑소) TIL, TIT

(TypeScript 공부 중)

TypeScript를 처음 접했다. 이번 주는 계속 TypeScript를 공부하게 될 텐데 진도를 잘 좇아갈 수 있을지 걱정이다.

지난 노드 입문과 숙련 과제 해설 강의를 보고 있다. 내가 제출한 코드와 비교해보고 있는데, 내가 뭘 원하는지 모르겠다. 뭘 봐야하지? 어떻게 정리해보아야 할까…

방법 1: 입문과 숙련 강의 노트를 다시 보며 보충 자료도 읽어보며 총정리한다.

방법 2: 내 코드와 해설 코드를 통합해본다. 노트를 적고 싶으면 어떻게 정리하지?

(이곳과 이곳 보는 중)

이곳도:

https://typescript-kr.github.io/pages/interfaces.html

에러 TS2584: Cannot find name 'console'.

Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

타입스크립트를 처음 실행해보았는데 위와 같은 에러 메세지가 뜬다. console.log에서 console을 인식하지 못한다는 에러이다.

해결 ⇒ 안내 메세지 그대로 tsconfig.json 설정파일을 수정하면 된다.

console을 인식하지 못하던 에러가 사라진 모습:

타입스크립트

타입스크립트의 기본 타입 12가지 간단 묶음

타입 표기(Type Annotation) : 콜론(:)을 이용하여 자바스크립트 코드에 타입을 정의하는 방식.

1. let str: string = 'hi';
2. let num: number = 10;
3. let isLoggedIn: boolean = false;

4. Object

5. let arr: number[] = [1,2,3];
6. let arr: [string, number] = ['hi', 10];
7. enum Avengers { Capt, IronMan, Thor }
	 let heroNum: Avengers = Avengers.Capt; // 0
	 let hero: Avengers = Avengers[1]; // IronMan

8. Any
9. 10. 11. let unuseful: void = undefined;
					 function notuse(): void {
					   console.log('sth');
					 }
12. Never

함수

? ⇒ 이 파라미터는 있어도 없어도 됨.

function sum(a: number, b?: number): number {
  return a + b;
}

인터페이스

정의할 때 옵션 속성으로 정의하기 - “?”
```
interface 인터페이스_이름 {
  속성?: 타입;
}
```

옵션 속성의 장점
- 인터페이스에 정의되어 있지 않은 속성에 대해서 오류를 표시
  - 근데 이건 그냥 기본 타입스크립트 기능 아니었어? 굳이 인터페이스 사용하지 않더라도 말임.
    ⇒ 아! 타입스크립ㅌ의 기본 ‘객체’ 기능을 이용해서 인터페이스를 만들어서 인터페이스에 정의해놓지 않은 속성은 인수로 부를 수 없다 뭐 그렇게 사용하는 거군! 특별히 인터페이스만의 기능이라기 보다는, 기본 타입스크립트 기능 + 인터페이스라는 객체의 활용법의 콜라보라고 이해하면 될 듯 하다.

정의할 때 읽기 전용 속성으로 지정하기 - “readonly”

// 인터페이스 틀을 짜고
interface CraftBeer {
  readonly brand: string;
}

// 인터페이스로 객체를 선언한 후
let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};

// readonly 속성을 수정하려고 하면 오류가 남.
myBeer.brand = 'Korean Carpenter'; // error!

인터페이스에서 말고 그냥 배열 변수도 ReadonlyArray<number>같이 선언할 수 있다.
- Array —(더 엄격)→ Tuple —(더 엄격)→ 읽기 전용 배열

인터페이스 정의하지 않은 속성들을 추가로 사용하고 싶을 땐…

인터페이스는 선언을 병합할 수 있다. (=오버로딩 되지 않고 하나의 인터페이스로 병합된다는 의미)

인터페이스 정의하는 타입 3가지

객체 타입으로 (=객체 타입 인터페이스)

interface LabeledValue {
  label: string;
}

함수 타입으로 (=함수 타입 인터페이스)

// 일단 진짜 함수 껍데기만 만들어두고
interface login {
  (username: string, password: string): boolean;
}

// 변수 하나를 만들어서 타입 지정해준 후
let loginUser: login;

// 실제 함수를 만들어 붙여준다...
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

클래스 타입으로 (=클래스 타입 인터페이스)

// 일단 클래스 껍데기를 만들어두고
interface CraftBeer {
  beerName: string; // 변수 = 속성 = 필드
  nameBeer(beer: string): void; // 함수 = 메소드
}

// 막상 클래스를 정의할 땐 impelemnts로 상속(?) 시켜준다.
class myBeer implements CraftBeer {
  beerName: string = 'Baby Guinness';
  nameBeer(b: string) {
    this.beerName = b;
  }
  constructor() {}
}

함수 타입으로 정의할 도 그렇고, 이미 타입을 지정한 껍데기를 만들었는데 실제 함수나 클래스를 만들 적에도 꼭 타입 표기를 해줘야 하는가? (안 해줘도 돌아가는 것 같긴 한데)

constructor() {}는 뭐지

그 밖에

인덱서블 타입 (Indexable Types)

하이브리드 타입 (Hybrid Types)

클래스를 확장한 인터페이스 (Interfaces Extending Classes)

인터페이스 다중 확장 타입

이 있다. (참고: https://typescript-kr.github.io/pages/interfaces.html)

인터페이스 다중 확장(=다중 상속 비슷한)

interface ButtonInterface {
  readonly _type:string;
  width?:number;
  height?:number;
  onInit?():void;
  onClick():void;
}

interface ButtonSizeInterface {
  readonly _size:number;
  small():void;
  medium():void;
  large():void;
  onChangeSize?():void;
}

// ButtonInterface, ButtonSizeInterface를 다중 확장하는 ImageButtonInterface
interface ImageButtonInterface extends ButtonInterface, ButtonSizeInterface {
  readonly _url:string;
  getUrl():string;
  setUrl?(url:string):void;
  onChangeUrl?():void;
}

// 마침내, 인터페이스 ImageButtonInterface를 확장한 클래스
class ImageButton implements ImageButtonInterface {
  readonly _type:string;
  readonly _url:string;
  readonly _size:number;
  onClick(){}
	// onClick():void;
  getUrl() { return this._url; }
  small() {}
  medium() {}
  large() {}
}

⇒ 새 interface에 정의된 필수 속성들이 모두 구현된 것을 볼 수 있다.

⇒ interface를 정의할 떄는 변수고 함수고 모두 타입 표기로만 마쳤지만, class로 구현할 땐 함수를 타입 표기로 끝내면 에러가 난다. 함수는 꼭 구현을 마쳐줘야 한다.

ZEP 굴욕 스샷
그렇다. 이제 Zep이 뒤로 구르다 앞으로 뒤집어졌다 하는 삽질 퍼레이드를 수집하기로 했다.
2023/1/16 월
한 번 단체로 튕기더니 5분쯤 지나 저런 에러가 뜨면서 아예 Node.js 4기 방에서 튕겼다. 아예 방에서 나가지는 것은 처음이기도 하고 저 ‘방을 찾을 수 없습니다’ 문구가 엊그저께 배운 웹소켓 관련된 코드인 것 같아 반가움에 스샷을 남긴다.

헐 아니 잠깐만…
지금 보니까 Zep 주소 자체가 아예 Socket.IO에서 따끈따끈하게 막 배운 namespace 기법이랑 똑같은데?!
⇒ https://zep.us/play/8rQJOd = Node.js 4기 캠프장 앞 모닥불 방
⇒ https://zep.us/play/8lgm9o = B반으로 들어왔을 때 주소.
허허 raw url이 zep.us이고, namespace가 ‘play’이고, 거기서 나뉘는 방들 id(=이름)가 바로 ‘8rQJOd’ 같은 애들이라고 하면 정말 딱 맞아 떨어진다. 나… Zep도 만들 수 있을 것 같은데..? 대강 채팅정도만 구현한다고 하면.
짙은 회색 회의실 지대는 어떻게 구현한 걸까. ‘방’을 또 ‘더 작은 방들’로 나눌 수 있는 게 아니라면… 어떻게 묶었지.

Uploaded by N2T

에러 TS2584: Cannot find name 'console'.

타입스크립트

타입스크립트의 기본 타입 12가지 간단 묶음

함수

인터페이스

인터페이스 정의하는 타입 3가지

티스토리툴바