타입스크립트 강의 기본문법 정리

TypeScript/22.09.02 기본문법.md

@@ -98,7 +98,7 @@ const Odirection = {
     Down: 1,
     Left: 2,
     Right: 3,
-} as const; // 이 값을 상수로 이용하겠다.
+} as const; // key에 해당하는 value를 자료형이 아닌 값으로 그대로 이용하겠다
 
 const Odirection: { Up: 0, Down: 1, Left: 2, Right: 3} = {
     Up: 0,
@@ -109,4 +109,11 @@ const Odirection: { Up: 0, Down: 1, Left: 2, Right: 3} = {
 
 const a = Odirection.Up;
 const b = Odirection.Left;
-```
+
+const obj = { a: '123', b: 'hello', c: 'world' }
+type Key = keyof typeof obj;
+// type Key = 'a' || 'b' || 'c'
+type Direction = typeof Odirection[keyof typeof Odirection]
+// type Direction = number
+```
+

TypeScript/22.09.08 type alias와 인터페이스의 extends.md

@@ -0,0 +1,37 @@
+
+##### type Alias와 인터페이스의 extends
+```ts
+type Animal = { breath : true };
+type Mammalia = Animal & { breed: true };
+type Human = Mammalia & { think : true };
+
+const jihun: Human = { breath: true, breed: true, think: true }; // 모두 있어야 한다
+```
+
+```ts
+interface A {
+    breath: true
+}
+
+interface B extends A {
+    breed: true
+}
+const b: B = { breath: true, breed: true };
+```
+
+```ts
+interface A {
+    talk: () => void;
+}
+
+interface A {
+    eat: () => void;
+}
+
+interface A {
+    shit: () => void;
+}
+
+const a: A ={ talk() {}, eat() {}, shit() {} };
+```
+interface는 같은이름으로 선언할 수 있다. 여러개로 선언한다면 하나의 타입으로 합쳐지는데 이말은 라이브러리내에 interface로 선언된것들을 내가 확장할수있다고 할수있다.

TypeScript/22.09.08 union과 intersection.md

@@ -0,0 +1,32 @@
+##### union(|)과 intersection(&)
+
+```ts
+type A = { a: string };
+const a: A = { a: 'hello' };
+
+interface B = { a: string };
+const b: B = { a: 'hello' };
+```
+
+둘중에 어느방식이 맞는지는 선택에 따라 갈리는데, 간단하게 이용하고 싶은 경우에는 type, interface는 상속이나 다른 방식들도 같이 이용하고싶을때 선택하자.
+
+```ts
+function add(x: string | number, y: string | number): string | number { return x + y }
+const result = add(1, 2)
+// const result: string | number
+const result2 = add('1', '2')
+// const result: string | number
+```
+
+```ts
+type A = string & number;
+const a: A = 1; // (x)
+
+type B = { hello: 'world' } & { jihun : 'hong' };
+const b: B = { hello: 'world', jihun: 'hong' } // (o)
+const b2: B = { hello: 'world' } // (x)
+
+type C = { hello: 'world' } | { jihun : 'hong' };
+const c: C = { hello: 'world', jihun: 'hong' } // (o)
+const c2: C = { hello: 'world' } // (o)
+```

TypeScript/22.09.08 unknown과 any.md

@@ -0,0 +1,30 @@
+##### unknown과 any
+
+```ts
+interface Human {
+    talk: () => number;
+}
+
+const human: Human = {
+    talk() { return 3 }
+}
+
+const a: any = human.talk();
+a.charAt();
+// (o)
+```
+
+any는 타입선언을 포기한 경우에 쓰이며 intelisense의 기능을 이용할 수 없다.
+
+unknown은 '알 수 없는 형식'으로 지금 당장 내가 이 타입이 뭔지를 알수없을때 이용한다.
+
+나중에 다른 타입으로 무엇인지 지정하자.
+
+```ts
+try {
+
+}catch(error) {
+    // catch 부분의 error는 unknown이다.
+    (error as Error).message
+}
+```

TypeScript/22.09.08 void의 두가지 사용법.md

@@ -0,0 +1,84 @@
+##### void의 두가지 사용법
+```ts
+function a() {
+}
+// a: void
+
+const b = a();
+// b: void
+```
+
+함수의 리턴값이 없다면 void로 타입이 정해진다. => undefined가 리턴되는것도 void에 속한다. (null은 불가)
+
+```ts
+interface Human {
+    talk: () => void;
+}
+
+const human: Human ={
+    talk() { return 'abc'; } // (o)
+}
+```
+
+맨위에서 살펴봤던 void를 그대로 이용했는데 위에서는 리턴값이 있음에도 void 형식이 가능하다.
+
+두 예제의 차이점은 함수에서의 void와 method로 이용할때의 void가 다르며, 매개변수로 이용되는 함수의 void도 다르다.
+
+```ts
+function a(callback: () => void): void {
+
+}
+
+a(() => {
+    return '3';
+});
+```
+
+- method와 callback으로 이용되는 매개변수의 void는 리턴값이 있더라도 가능하다
+    - method와 callback에서의 void의 의미는 그 method와 callback에서의 리턴값을 '사용하지 않겠다'는 의미이다. 
+- function에서의 void는 리턴값이 없다는 의미이다.
+
+```ts
+function forEach(arr: number[], callback: (el: number) => undefined): void;
+// (x) => Function implementation is missing or not immediately following the declaration.(2391)
+// 구현부가 없다
+let target: number[] = [];
+forEach([1,2,3], el => target.push(el));
+```
+
+구현부를 빼놓고 이용하고싶을때는 declare를 function 앞에 붙여주자.
+
+```ts
+declare function forEach(arr: number[], callback: (el: number) => undefined): void;
+// (o)
+declare let c: number;
+
+c = 4;
+let target: number[] = [];
+forEach([1,2,3], el => target.push(el));
+// (x) => push는 리턴값이 number이기 때문에 undefined와 대응되지 않는다.
+```
+
+```ts
+declare function forEach(arr: number[], callback: (el: number) => void): void;
+let target: number[] = [];
+forEach([1,2,3], el => target.push(el));
+// (o) => 매개변수 callback에서 쓰이는 void는 실제 리턴값이 무엇이든 상관하지 않겠다와 같다는 의미이다.
+```
+
+```ts
+interface A {
+    talk: () => void;
+}
+
+const a: A= {
+    talk() { return 3; }
+}
+
+const b = a.talk();
+// b: void
+
+const c: number = a.talk() as unknown as number;
+const d = <number><unknown>a.talk();
+// jsx의 태그와 헷갈리기때문에 이렇게는 피하자.
+```