[Typescript] #1 Overview of Typescript

#1 Why not JavaScript

Typescript를 사용하는 가장 큰 이유는 사용자에게 ‘안전성’을 제공하기 때문이다.

Javascript는 개발자를 최대한 도와주도록 (에러를 최대한 조금 보여준다) 되어있다.

예시를 통해 확인해보면,

[1, 2, 3, 4] + false
-> '1,2,3,4false'

Javascript는 위와 같은 경우를 허용한다! 숫자 배열에 boolean type를 추가하려고 하는데, 오류를 출력하지 않고 그대로 붙여서 문자열로 바꿔준다.

function divide(a, b){
return a / b
}

divide("xxxxxx")
-> NaN

divide의 인자로 숫자도 아닌, 문자열을 단 하나만 보냈는데도, javascript에서는 코드를 작성할 때 아무런 오류를 출력해주지 않고, 실행하더라도 단지 NaN을 반환해준다.

const jin = {name: "Jin"}

jin.hello()
-> Runtime error

위와 같이, hello() 함수를 선언하지 않는 객체에서 hello() 함수를 실행하려고 코드를 작성해도, 코드 작성 시에는 오류를 보여주지 않는다. 대신, 코드를 실행하게 되면, 그제서야 runtime error가 발생하여 error 코드를 보여준다. 이는 문제를 발생시킬 수 있다!

#2 How Typescript Works

보통의 C나 Java, Rust와 같은 언어는 컴파일러를 통해 컴파일하면, 컴퓨터가 해석할 수 있는 기계어로 바뀌게 된다.

하지만 Typescript는 컴파일하면 Javascript 코드로 바뀌게 된다.

Typescript가 Javascript로 컴파일되는 과정에서 여러 오류들을 처리하게 되고, 따라서 성공적으로 컴파일된 Javascript 코드에는 오류가 없게 된다.

#3 Implicit Types vs Explicit Types

Typescript에서 변수를 선언하는 방법에는 두 가지가 있다.

Type checker가 변수의 타입을 추론하게 하는 방법
```
let a = "hello"
```
Type checker가 a가 string이라는 것을 추론하게 한다. (”hello”를 선언했기 때문에 string이라고 추론)
Type checker에게 변수의 타입을 명시하는 방법
```
let b : boolean = false
```
Type checker에게 b가 boolean임을 명시해주는 typescript의 문법이다. 따라서 b에 false가 아닌 string이나 숫자를 선언했다면 오류를 표시해준다.

ex.
```
let c : number[] = []
c.push("1") 
```
c 배열에 아무 원소도 추가하지 않았지만, number 배열임을 명시해뒀기에 “1”이라는 문자열을 추가하는 것이 실패하게 된다.

변수의 타입을 명시하는 것은 써야되는 길이를 증가시키기에 최소한으로 줄인다! 웬만하면 type checker가 추론하도록 하는 것이 더 좋다.

#4 Types of TS (1)

Goal : player 객체를 선언, name은 필수, age는 옵션

const player : {
	name:string,
	age?:number
} = {
	name:"jin"
}

player를 object로 선언했다. name은 string이고 age는 number이여야 한다.

추가로, age뒤에 ?를 붙임으로써 age는 number이거나 undefined도 가능하도록 한다.

type Player = {
	name:string,
	age?:number
}

const jin : Player = {
	name:"jin"
}

const heo : Player = {
	name:"heo"
	age:20
}

위와 같이 Alias(별칭) type을 사용해서 코드를 좀 더 깔끔하게 만들 수도 있다.

function playerMaekr(name:string) : Player {
    return{
        name
    }
}

const jin = playerMaekr("jin")
jin.age=20

위에서 만든 Player를 활용하여 함수의 return object의 type도 정해줄 수 있다.

jin.age=20이 가능한 것은 Player 객체로 반환하는 것을 명시해주었기 때문이다.

const playerMaker= (name:string) : Player => ({name})

const jin = playerMaker("jin")
jin.age = 20

이렇게 playerMaker가 Player 객체를 반환하는 함수라는 것을 선언할 수도 있다.

핵심은 (변수) : (type) 형태로 선언하면 된다는 것을 기억하자!

#5 Types of TS (2)

readonly 속성을 추가할 수 있다. 말 그대로 읽기 전용으로 만드는 것이다. (JS에는 없다)

type Player = {
	readonly name:string,
	age?:number
}

const playerMaker= (name:string) : Player => ({name})

const jin = playerMaker("jin")
jin.name='heo' // error!

추가로 readonly를 사용하는 예시

const names: readonly string[] = ["jin", "heo"]
names.push("what") // error!

object에 대한 건 이쯤에서 마무리하고, 다른 데이터 type에 대해 알아보자.

Tuple이라는 것이 있다. Tuple은 array를 생성할 수 있게 해주는데, 최소 길이를 설정하고, 특정 위치에 특정 타입이 와야한다.

const plyer: [string, number, boolean] = ["jin", 1, true]
player[0]=1 //error - 배열의 0번째 요소는 string이어야 함.

tuple에 readonly를 추가할 수도 있다.

const plyer: readonly [string, number, boolean] = ["jin", 1, true]
player[0]='heo' //error!

Typescript에서는 추가적으로 javascript에서도 지원해주는 undefiend, null, any 등의 type를 지원해준다.

any는 어떠한 데이터 타입도 쓸 수 있는 설정이기 때문에 사실상 typescript의 보호장치를 무력화시키는 것이다. 즉, typescript에서 javascript로 돌아가는 것과 비슷하다. 따라서 typescript에서 any를 사용하는 것은 그다지 추천하지 않는다. (신중하게 써야한다.)

#6 Types of TS (3)

Typescript에서 가장 중요한 것은 Type checker와 소통하는 것이다!

우리가 type을 설정함으로써 Typescript에서는 우리가 이상한 행동을 하지 않도록 막아준다.

만약 어떤 타입으로 전송 받게 될 지 모르고 있는 상황에서 변수를 선언하려면 어떻게 해야될까?

let a:unknown

if(typeof a === 'number'){
    let b = a + 1
}

if(typeof a === 'string'){
    let b = a.toUpperCase()
}

unknown이라는 type이 있다. 말그대로 아직 type을 모르는 것이다. 따라서 위와 같이 typeof를 사용해서 type 검사를 강제해야 한다.

함수가 아무것도 return하지 않을 때는 ‘never’이라는 type을 사용하면 된다.

function hello() : never{
    throw new Error("xxx")
}

위의 hello 함수는 아무것도 반환하지 않고 오류를 출력하는 함수이다.

function hello2(name: string | number){
    if(typeof name === "string"){
        //type of name = 'string'
    } else if (typeof name === "number"){
        //type of name = 'number'
    }else{
        //type of name = 'never'
    }
}

위와 같이 name이 string아니면 number로 받는 함수에서 둘 다 아니라면 name은 never type이 된다.

** 본 글은 노마드코더의 ‘타입스크립트로 블록체인 만들기’ 강의를 바탕으로 작성했습니다. **