타입스크립트 복습 - 1

현재까지 타입스크립트 기초를 공부하면서 어려웠던점과 이해가 되지 않았던 점에 대해서 다시 한번 복습을 하려고 한다.

인터페이스 추상 상속

interface IPerson4{
    name: string,
    age: number,
}

class Person4 implements IPerson4{
    name: string
    age: number
}

https://velog.io/@stulta_amiko/tsb4#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%EA%B5%AC%ED%98%84
에서 다뤘던 내용이다.

인터페이스는 일반적인 객체 혹은 클래스와 같은 방식으로 다루며
클래스에서 사용을 하려고 할때에는 implements 키워드를 이용해서 사용한다.

추상은 다른 객체지향 언어에서도 볼 수있는 개념으로 abstract 키워드를
이용해서 작성한다.

abstract class class_name{
    abstract key : type
    abstract method_name( ) { }
}

상속은 extends를 사용하며 부모 클래스의 생성자는 super 키워드로 불러올 수 있다.

abstract class IPerson5{
    abstract name:string
    constructor(public age?: number) { }
}

class Person5 extends IPerson5{
    constructor(public name: string, age?: number){
        super(age)
    }
}

let jack5 : Person5 = new Person5('jack',43)
console.log(jack5)

위 코드는 추상클래스를 상속하는 코드이다.
위와같은 방식으로 이용할 수 있으며 부모클래스의 생성자 또한 super로 불러오는 모습까지 확인할 수 있다.

디스트럭처링

ECMAScript에서 부터 적용되기 시작한 기법? 방법? 중에 하나로 스트럭처링 즉 구조화의 반대되는 개념으로 알고있다.
아직도 이해가 안되서 다시 보도록 하면

구조화라는 개념은 이제 보통 여러개의 변수나 자료형을 하나로 묶는 행위를 뜻한다.
C언어에서 struct 키워드의 사용방법이라던지 그런것을 생각해보면된다.
혹은 자바스크립트의 객체라던지 다른 객체지향언어의 객체라던지 보면 전부 무언가를 하나로 묶는 행위를 하는데 이를 구조화라고 부르는것 같다.

그러면 디스트럭처링은 무엇인가? 하면 이제 구조화의 반대개념이라고 생각하면 쉬울것 같다.

구조화가 한개로 묶는 개념이라면 구조화되어있던 자료형 혹은 변수와같은 것들을 풀어서 각각의 변수로 할당해주는것을 뜻한다.

import { IPlane } from "./test";

let B747: IPlane = {company:'Boeing',name:747},
    B777: IPlane = {company:'Boeing',name:777,type:300}

let {company,name} = B747
console.log(company,name)

https://velog.io/@stulta_amiko/tsb5#destructuring
에서 봤던 예제이다.

예제를 보면 어떤느낌인지 바로온다 원래 객체인 B747과 B777 객체가있을때 company와 name 이라는 개별 변수로 B747의 값들을 다시 할당해 주는것을 디스트럭처링이라고 한다.

타입변환

let person:object = {name:'jack',age:33};
person.name

위와같은 코드가 있다. 객체의 값을 받아오려는 일반적인 코드로 보이지만
person은 object 타입으로 선언이 되있어서
만약 person.name을 불러오려고 한다면 오류가 발생할 것이다.

따라서 위와같은 코드처럼 어느 객체의 값을 가져오려고 한다면 그 값에 맞는 타입으로 변환을 시켜야한다.

let person:object = {name:'jack',age:33};
console.log((<{name: string}>person).name)

하지만 타입스크립트에서는 이를 타입변환이라고 부르지 않고

"타입단언"

이라고 부른다.
자바스크립트의 타입변환이랑 헷갈린다는 이유라나 뭐라나

하여튼 이 타입단언의 종류는 위에서 설명했던 <>를 이용하는 방법과 as를 이용하는 방법이 있다.

(<type> objcet)
(object as type)

위와같은 방법으로 타입단언을 한다.

interface Iname{
   name:string
};

let obj:object = {name:'jack'}

let name1 = (<Iname>obj).name
let name2 = (obj as Iname).name

console.log(name1,name2)

이런식으로 타입단언을 이용할 수 있다.

함수 시그니처

함수 시그니처를 앞에서 다뤘는데 너무 빈약하게 다뤘던거 같아서 다시한번 복습할겸해서 적는다.

let func_ex: (string,number) => void = function(name: string,age: number): void{}

위와같은 형식으로 함수를 만드는데 프로그래밍을 어느정도 했다면 대충 뭔지 보일것이다.

함수의 이름을 적고 콜론뒤에 파라미터의 타입이 오며 arrow 뒤에 함수가 리턴할 타입을 보여주고 = 뒤에 함수라는것을 명시하고 파라미터에 이름을 적어주고 다시 콜론뒤에 반환 타입이 뭔지 알려주는 방식으로 선언을 하는 모습이다.

type 키워드

타입스크립트는 type이라는 키워드를 제공하고 이는 기존에 존재하는 타입을 단순히 이름을 바꿔서 사용할 수 있게하는 키워드이고 이를 타입별칭 이라고 부른다.

위에서 만들었던 (string,number) => void 와 같은 함수 시그니처를
stringNumberFunc 와같은 방식으로 타입별칭을 만들 수 있다.

type strnumFunc = (arg1:string,arg2:number) => void
let f:strnumFunc = function(a:string,b:number):void {}
let g:strnumFunc = function(a:string,b:number):void {}

이런식으로 타입별칭을 만들어주고 사용할 수 있다.
타입명을 적을때 타입별칭으로 설정한것을 적어주면 된다.

중첩함수

const calc = (value: number, cd:(number)=>void): void =>{
    let add = (a,b) => a+b;
    function multiply(a,b) {return a*b}

    let result = multiply(add(1,2),value)
    cd(result)
}

calc(30,(result:number) => console.log(`result is ${result}`))

실행결과는 90이다.
함수안에 함수가 있는것을 보고 중첩함수라고 한다.
위 코드를 처음부터 분해해보자

먼저 calc 함수는 value와 함수를 파라미터로 받는 함수이다.
그리고 add 함수는 파라미터를 서로 더해주는 역할을 하고
multyply함수는 파라미터를 서로 곱해준다.
result는 1과 2를 더한값을 calc의 인수로 들어온 value값을 곱해주는 역할을 결과적으로 하게된다.

고차함수

고차함수개념은 중간에 타입스크립트 기초 - 7에서 한번 배우고 넘어간적이 있고 그이후로 계속 개념이 나왔다.
처음에는 이해가 안됐지만 지금도 잘안된다.

다시한번 보도록하면 고차함수는 이제 함수형 프로그래밍에서 중요한부분을 차지하고있다고 하며

쉽게 보자면 우리가 아는 단하나의 함수가 아닌 함수와 함수가 연결되어 있는것을 고차함수라고 한다.

const add2 = (a:number): (number) => number => (b: number): number =>a+b

위와같은 코드를 고차함수라고 한다.
사용은

add(1)(2)

와 같은 방식으로 하는것이고 차수가 두번있었으므로 2차고차함수라고 불린다.

type NumberToNumberFunc = (number) => number
const add = (a: number): NumberToNumberFunc =>{
    const _add: NumberToNumberFunc = (b: number) =>{
        return a+b
    }
    return _add
}

위 코드를 한번 분해해 보자

먼저 타입별칭으로 NumberToNumberFunc 타입을 만들어 준다.
숫자를 그대로 반환하는 타입이다.
add함수는 1차로 a라는 파라미터를 받는다. 그리고 내부에 _add함수가 2차로 존재하게된다.

그리고 위에서 말했던 2차고차함수를 쉽게 표현한게 위코드이다.
이런식으로 구현을 했기 때문에 중간과정을 생략하고도 가능하다.

저걸 한번에 구현해서 만든게

const add2 = (a:number): (number) => number => (b: number): number =>a+b

이런식으로 되는것이다.