타입스크립트 문법(1)

목차

1. 변수선언

2. 기본타입   2.1 Number   2.2 String   2.3 Boolean   2.4 Null   2.5 Undefined   2.6 Any   2.7 Unknown   2.8 Never   2.9 Function   2.10 Object   2.11 자주 혼동하는 타입들

 

1. 변수선언

 

 

타입스크립트는 자바스크립트와는 다르게 변수 옆에 변수의 타입을 지정해줘야한다.

 

 

Javascript 변수선언

let num = 10
const str = "hello javascript"

 

Typescript 변수선언

let num: number = 10
const str: string = "hello typescript"

 

보통 숫자나 문자 타입은 타입 추론이 되기 떄문에 적지 않아도 무방하다.

 

변수의 타입에 따라서 해당 타입에 있는 메서드를 보여준다.(Javscript에서도 어느정도는 가능)

 

Typescript에서 보여주는 것이 아닌 에디터가 이를 인지하여 잡아준다.

 

 

기존의 Javascript의 타입과 함수의 리턴 등등에 대해서 잘 알고있다면 크게 어려운 부분은 없을 것이다.

 

---

2.  기본타입

 

 

기본적인 타입이며, Javascript를 착실히 공부했다면 크게 어려울 점은 없다.

 

다만 any | never | unknown 등의 타입은 기존의 Javascript에도 없으니 눈여겨 보도록하자.

 

---

2.1 Number

 

 

숫자 타입이다.

 

숫자, NaN, Infinity 모두 number 타입에 해당한다.

 

{
    const num: number = 10
    const float: number = 3.14
    const nan: number = NaN
    const infinity: number = Infinity
}

 

---

2.2 String

 

문자 타입이다.

 

일반적인 문자 타입이며 크게 어려울 것은 없다.

 

{
    const str: string = "Hello Typescript"
}

 

---

2.3 Boolean

 

불린 타입이다.

 

일반적인 불린 타입과 같다.

 

{
    const bool: boolean = true
}

 

 

---

2.4 Null

 

Null 타입이며,  값에 Null을 할당했을 때 사용할 수 있다.

 

{
    const nullValue: null = null
}

 

---

2.5 Undefined

 

Undefined 타입이다.

 

값이 Undefined일 경우에 사용한다.

 

{
    const undefinedValue: undefined = undefined
}

 

---

2.6 Any

 

만능문자 Any 타입이다.

 

어떤 타입에도 Any를 적어줄 수 있다.

 

즉, 어떤 타입이든 할당이 가능하다.

 

가장 큰 단점으로 타입 안전성이 보장 안된다는 점이 있다.

 

사용을 기피해야하는 타입이며, any의 특성은 타입스크립트를 사용하는 장점, 이유를 없애버린다.

 

{
    const a: any = 10
    a. // 타입 유추가 되지않아 메서드가 올바르게 나오지 않는다.
}

 

---

2.7 Unknown

 

any처럼 어떤 타입에도 할당할 수 있다.

 

하지만, any와 다르게 타입 안정성이 보장된다.

 

예를 한번 들어보자.

 

{
    const a: unknown = 10

    if(typeof a === 'number'){
        a.toString()
    } else if (typeof a === 'string'){
        a.split("")
    }
}

{
    const getValue = (value: unknown): string => {
        return value
    }

    const fn = getValue("hello world")
}

// ========================================================

{
    const getValue = (value: unknown): string => {
        if (typeof value === "string") return value
        return ""
    }
}

const fn = getValue(1)

 

위의 getValue 함수의 경우 인자값이 곧 함수 호출의 타입이 되는데,

 

강제로 ( ): string 같은 타입을 설정해도 에러가 난다.

 

우리가 봤을 때는 불가능하지 않게 보이나 코드상에서는 타입을 알지 못해 타입 에러를 표시해준다.

 

위의 두 번째 getValue 처럼 return값의 타입을 잘 지정해주면,

 

함수의 타입을 올바르게 지정할 수 있다.

---

2.8 Never

 

Never는 함수안에서 return을 만나지 못하고 무한루프를 돌거나

 

return을 만나지 못하고 다음으로 넘어가는 throw 같은 경우에 사용할 수 있다.

 

아래의 예제 코드를 보면 throwErr에서 never를 사용했는데, 

 

return을 만나지 못하고 넘어가기 떄문이다.

 

{
    const throwErr = (): never => {
        throw new Error("에러")
    }

    const repository = async(): number => {
        throwErr()
        return 10
    }

    const service = async(): string => {
        const result = await repository()
        return result + "hello world"
    }

    const controller = async(): void => {
        try{
            const result = service()
        } catch (e) {
            console.log(e)
        }
    }

    controller()
}

 

---

 

2.9 Function

 

 

함수와 관련된 기본적인 부분에 대해선 헷갈리기 때문에 좀 살펴봐야한다.

 

 

• 함수는 return이 없으면 undefine이로 출력이 되는데, 타입스크립트에서는 이 타입을 void라고 명시해줘야한다.
• return에 대한 타입은 호출부분(소괄호)에 명시해줘야한다.
• 함수명이 적힌 부분은 Function 타입이며, 따로 지정해주지 않아도 된다.
• 일반적으로 void는 함수에서만 사용한다.
• 매개변수에도 타입을 반드시 지정해주어야 한다.
• 호출시 타입이 올바르지 않으면 타입에러표시가 나타난다.

 

{
    const print = (): void => {
        console.log('hello typesript')
    }
}

{
    function print(): void {
        console.log('hello typesript')
    }
}

{
    const print = (str: string): void => {
        console.log(`${str}`)
    }

    print(1) // 에러
    print("hello typescript")
}

{
    const sum = (a: number, b: number):number => a + b
    
    sum("a", "b") // 에러
    sum(1, 2)
}

 

---

2.10 Object

 

 

있다는 것만 알아두고, 사용하지는 않으니 그냥 보고 지나치도록 하자.

 

{
    const obj:object = {}
    const arr:object = []
    const func:object = () => {}
}

 

 

---

2.11 자주 혼동하는 타입들

 

 

never - 무한루프를 돌거나 반환할 수 없는 타입

void - 반환값이 없는 (undefined)

undefined - 값이 할당되지 않는 것

null - 그냥 값이 없을 때

unknown - any와 진짜 비슷하지만 단 타입의 안정성만 보장

any - 사용하지 말 것

 

 

기본적인 타입은 여기까지 알아보고 정말 중요하고 헷갈리는 내용들은 다음 글에서 설명하도록 하겠다.