TIL

---

1) Typescript 를 배우는 이유

1. 타입스크립트는 자바스크립트의 슈퍼셋.

2. 자바스크립트는 자유도가 높다는 장점이 존재. 하지만 프로젝트 규모가 커질수록 정확한 규칙을 요구하기에 이는 단점으로 바뀌게됨.

3. 결론은 타입스크립트는 보다 가독성 좋고 효율적 메모리를 위해 배운다!

2) Typescript 를 직접 써보자

자바스크립트는 함수의 인수를 정해놓고, 함수 실행 시 특정 인수를 넣지 않으면 다음과 같은 결과가 나온다.

const name = "Yongho",
age= 23,
gender= "male";

const sayHi = (name, age, gender) => {
    console.log(`Hello ${name}, you are ${age}, your gender is ${gender}`)
}

sayHi(name, age)

// Hello Yongho, you are 23, your gender is undefined

내가 실수를 해도 캐치하지 못하고 그냥 undefined 라고 내뱉는 모습이다.
반면 Typescript 에서는 어떨까?

const name = "Yongho",
age= 23,
gender= "male";

const sayHi = (name, age, gender) => {
    console.log(`Hello ${name}, you are ${age}, your gender is ${gender}`)
}

sayHi(name, age, gender)

// 3개의 인수가 필요한데, 2개를 가져왔습니다. (컴파일 안됨)

위의 에러를 내며 실행 자체가 안된다.
하지만 다음과 같은 경우는 컴파일이 가능하다.

const name = "Yongho",
age= 23,
gender= "male";

const sayHi = (name, age, gender?) => {
    console.log(`Hello ${name}, you are ${age}, your gender is ${gender}`)
}

sayHi(name, age)

// Hello Yongho, you are 23, your gender is undefined

gender 인수 옆에 ? 를 붙여줬다.
저 물음표의 의미는 "gender 인수는 있어도 되고 없어도 됩니다." 라는 의미이다.

다음은 각 인수에 타입을 정의한 모습이다.

const sayHi = (name: string, age: number, gender: string):void => {
    console.log(`Hello ${name}, you are ${age}, your gender is ${gender}`)
}

sayHi("Yongho", 23, "MALE")

void 의 의미는 "아직 정의하지 않음" 이라고 보면 된다.
만약 해당 함수를 실행했을 때의 결과가 문자열을 나타낸다면 void 를 string 으로 변경해줘야 한다.
안한다면 역시 타입스크립트는 "string 형식은 void 형식에 할당할 수 없습니다." 라고 외칠 것이다.