타입스크립트 기초 - 5

destructuring

destructuring(비구조화)을 알기위해선 먼저 structuring(구조화)에 대해 알아야한다.

structuring에 대해서 간단히 설명하면 여러 변수를 한개의 인터페이스나 클래스로 묶어서 새로운 타입으로 만드는것이다.

예를들어

let planeCompany = 'boeing'
let planeName = 747
let planeType = 400

위와 같은 코드가 있다고 하자
하지만 위코드는 변경하기도 어렵고 변수명도 겹쳐서 좋은 형태를 가지고 있지 않다.
이제 이런걸 우리는 클래스 혹은 인터페이스로 묶어줄 수 있다.

interface IPlane {
    company: string
    name: number
    type: number
}

이런식으로 묶어 줄수있다.
물론 세개 바꿔주는게 뭐가 힘드냐 생각할 수 있겠지만
이게 한두개일때는 문제가 안되는데 여러개로 늘어나면 고통받게된다.

export interface IPlane {
    company: string
    name: number
    type?: number
}

IPlane.ts

import { IPlane } from "./test";

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

console.log(B747,B777)

index.ts

실행결과
{ company: 'Boeing', name: 747 } { company: 'Boeing', name: 777, type: 300 }

이런식으로 사용할 수 있다.

그럼 destructuring에 대해서 보면
structuring은 구조화였으니 destuructring은 비구조화라고 할 수 있다.
MDN에서는 destructuring을 구조 분해 할당 이라고 부르고 있다.
말을 좀 어렵게 써놓는것 같다.

영어로 보는게 더 편하다 여러 변수와 요소들을 한개로 담아 한개의 타입으로 표현하는것을 structuring이라고 했다
그럼 de가 들어가니 반대로 해주면 된다. 한개의 타입으로 묶인 요소들을 다시 풀어주면 destructuring이라고 볼 수 있을것이다.

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)

실행결과
Boeing 747

destructuring을 한 모습이다 B747 객체의 요소들로 변수를 생성했다.

레스트 연산자

레스트연산자에 관한 내용은 예전에 자바스크립트 복습을 할때도 올렸었다.

https://velog.io/@stulta_amiko/jsr12

let address: any = {
    country: "Korea,Republic of",
    city: "Seoul",
    address1: "Seocho-gu",
    address2: "Banpo-dong",
    address3: "188, Sinbanpo-ro,Express Bus Terminal"
}

const{country,city,...other} = address
console.log(other)

실행결과
{
address1: 'Seocho-gu',
address2: 'Banpo-dong',
address3: '188, Sinbanpo-ro,Express Bus Terminal'
}

말 그대로 레스트는 나머지를 뜻한다. 나머지를 묶는 연산자라고 보면 된다.

스프레드 연산자

스프레드 연산자는 말 그대로 스프레드의 뜻을 생각하면된다.
넓게 편다는 의미랑 비슷하다.

let obj1 = {name: 'name'}
let obj2 = {company: 'comp'}
let obj3 = {city:'seoul', country:'korea'}
let spread = {...obj1,...obj2,...obj3}
console.log(spread)

실행결과
{ name: 'name', company: 'comp', city: 'seoul', country: 'korea' }

비구조화랑은 다르다
스프레드 연산자를 이용하는 모습이다.

타입변환

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

이 코드는 오류가난다.
object 타입으로 선언한 변수인데 object타입은 name속성을 가지지 않기 때문이다.

타입변환구문을 통해 오류를 해결할 수 있다.

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

실행결과
jack

이런식으로 하면 오류가 나지않는다

하지만 타입스크립트에서는 타입변환이란 말보다는 타입 단언이라는 말을 사용한다고 한다.

타입단언문에는 두가지 형태가 있다.

(<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)

실행결과
jack jack

이런식으로 변환하는 예제를 확인할 수 있다.

함수

기존의 자바 스크립트는 함수선언을 다음과 같은 방식으로 했다.

function function_name(parameter...){
    function_contents
  }

ES6 부터는 화살표함수(Arrow Function)를 사용가능하다.

const function_name  =   (parameter...) => {
    function_contents
  }

화살표함수는 익명함수이기 때문에 이런식으로 함수를 생성한다.

타입스크립트의 함수선언은 자바스크립트의 함수선언과 비슷하다

function function_name(parameter...:type):return_type{
    function_contents
  }

과 같은 방식으로 함수를 선언한다.

변수와 마찬가지로 반환값과 매개변수의 타입을 생략할수 있기는 하지만
이렇게되면 함수의 의도를 파악하기 어려울뿐더러 타입스크립트의 본질과 맞지 않게된다.

const func = (name:string,age:number):void => {
    console.log(`name: ${name} age: ${age}`)
}

func('jack',33)

실행결과
name: jack age: 33

다른 언어와 마찬가지로 함수의 리턴값이 없을때에는 void를 사용한다.

함수 시그니처

variable_type variable_name: (parameter...) => return_type

함수의 타입은 다음과 같이 표현한다.

type 키워드

type 키워드는 기존에 존재하는 타입을 이름만 바꿔서 사용할 수 있게 해준다.

type new_type = Previous type

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 {}

책에서는 arg1 이나 arg2를 안쓰는데 안쓰게되면 오류가난다.
이런식으로 타입을 명시해두면 타입을 헷갈리는일이 없게된다.

undefined 관련

undefined는 최하위 타입이기때문에 각각다른타입의 파라미터로 undefined를 넣어도 눈으로 보기에는 오류가 발생하지않는다.
하지만 실제로 구동하게 되면 오류가 나기때문에 따로 처리를 해줘야한다.

interface Iname{
    name: string
}
function getName(o:Iname){return o.name}

let n = getName(undefined)
console.log(n)

이런식으로 해도 눈으로 보기엔 오류가 안생긴다.

하지만 실행하게 되면 오류가 발생한다.
이와같은 실수를 방지하기 위해서 undefined를 미리 걸러주는 코드를 짜야한다.
짜야하는데..

interface Iname{
    name: string
}
function getName(o:Iname){
    return o != undefined ? o.name : 'unknown' 
}

let n = getName(undefined)
console.log(n)

이러면 되야하는데 안된다.
사실 undefiend는 누가 고의로 넣어서 발생하는값이 아니다
오류를 처리해야하는데 왜 안될까

분명 책에서는 undefined가 최하위값이여서 자식타입으로 간주한다고 되어있는데

interface Iname{
    name: string
}
function getName(o:Iname){
    return o != undefined ? o.name : 'unknown' 
}

const a:Iname = {name: undefined} 
let n = getName(a)
console.log(n)

아무리 해도 오류가 난다.
그냥 처리하는 코드는 이런식으로 짜두는걸 기억하자
버전이 바뀌면서 강제로 넣는건 안되는거같다.

interface Iname{
    name: string
}
function getName(o:Iname){
    return o != undefined ? o.name : 'unknown' 
}

const a:Iname = {name: undefined} 
let n = getName(a)
console.log(n)

실행결과
undefined

골때린다.
원래대로라면unknown이 떠야하는데
undefined가 뜬다 억지로 넣으려고 했던 나의 잘못인가 싶어서
코드를 바꿔서 해봤더니 정상적으로 unknown이 출력된다.

interface Iname{
    name: string
}
function getName(o:Iname){
    return o != undefined ? o.name : 'unknown' 
}

const a:Iname = {name: undefined} 
let n = getName(a)
console.log(getName(undefined))

실행결과
unknown

문제는 이거였다.
tsconfig가 있는곳에서 실행한것이 아니여서 책과 다른결과를 출력했던것이고
name값에 억지로 undefined를 할당해줘서 삼항연산자는
name이 undefined 로 판단해서 그냥 출력해 준것같다.

그야말로 삽질을 한 셈이다.
역시 책에있는거에서 벗어나면 안되는거같다.
사람은 삽질을 좀 해봐야한다.

선택적 매개변수

function func(par1: type, par2?: type): return_type {      }

선택적 매개변수는 다음과 같이 ?를 붙이면 된다.
그러면 넣어도되고 안넣어도된다.
만약 두번째 파라미터가 선택적 파라미터여서
값을 넣지 않았을때 값을 출력하려고 하면
undefined를 출력한다.

함수 표현식

함수는 객체라고한다.

let add = new Function('a','b','return a+b')
let result = add(1,2)
console.log(result)

이 코드는 좀 특이하다
변수선언문 형태로 함수를 선언했기때문이다.

위 코드는 다음과 같다.

let add2 = function(a,b) {return a+b}
result = add2(1,2)
console.log(result)

function(a,b) {return a+b}와 같은 코드를 함수 표현식이라고 한다.

일등함수

함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다.

MDN은 일등 함수를 위와같이 설명하고 있다.
그래서 일등함수가 뭐인가 하니 함수와 변수를 구분하지 않는다는것을 말한다.
일등함수 기능이 있는 언어를 함수형 프로그래밍 언어 라고한다.

계산법

컴파일러는 표현식을 만나면 계산법을 통해서 어떤 값을 만들어내는데
조급한 계산법과 느긋한 계산법이 있다고한다.
1+2라는 표현식을 만나면 조급한 계산법을 통해서 3이라는 결과를 출력하게된다.
만약 위에 올린 코드와 같이 function(a,b) {return a+b}와 같다면
a와 b의 값이 알수 없어서 일단 보류하고 나중에 값을 알게된 후에 계산하게 되는데 이를 보고 느긋한 계산이라고 한다.

함수 호출 연산자

어떤 변수가 함수표현식을 가지고있따면 변수이름뒤에 호출 연산자를 붙여서 호출할 수 있다. 위에서 본 화살표함수의 사용방법에서 볼수있는 방식과 비슷하다.

const func = function(a:number,b:number) {return a+b}
console.log(func(2,3))

위와같이 표현할 수 있다.

익명함수도 위와같다.

const func = (function(a,b) {return a+b})(1,2)
console.log(func)

실행결과
3

함수호출 연산자는 연산자의 우선순위가 매우 높기때문에 함수표현식의 시작과 끝부분을 알 수 있도록 소괄호로 묶어줘야 한다.