[TypeScript] Type 요약

타입을 설정하는 방법

변수 옆에 :을 찍고 타입을 정하는것이 기본 형태입니다.

 

이 기본형태로 여러 데이터의 타입을 지정해 줄 수 있는데,

 

아래의 데이터타입 설정예시를보며 감을 익힙시다.

---

원시타입

타입스크립트는 자바스크립트에서 사용되는 데이터들의 데이터 타입을 엄격하게 검사해줍니다.

 

예를들어 변수선언 같은거 할때

 

"나 이 변수에는 숫자형 쓸거야" 라고 미리 얘기해두고 사용하는겁니다.

 

변수에는 :타입 처럼 사용해서 타입을 지정해 줄 수 있습니다. 아래 예시로 설명하겠습니다.

let userName: string = "steve";
let userAge: number = 23
let isMan: boolean = true

userName = 123 // 타입과 다른 값을 넣으면 에러가 납니다.

---

배열과 객체

let userName: string[] = ["Son", "Harry"];

let myInfo: { age: number } = { age: 27 };

 

배열은 타입 뒤에 []을 붙임으로서 배열임을 알려줄 수 있습니다.

 

객체 또한 객체를 만드는것과 동일하게 키와 값을 적어주고

 

값을 넣는 영역에다가 타입을 지정해주면 됩니다.

---

any타입

 

any타입은 어떤타입이든 다 들어 올 수 있다는것을 표기합니다.

 

실제로 데이터에 타입지정을 따로 해두지 않으면 any타입으로 명명됩니다.

 

그렇기때문에 any타입을 남발하면 타입스크립트를 사용하는 이유가 없기 때문에 잘 사용되지는 않습니다.

---

함수

 

함수의 경우 매개변수와 반환값의 타입을 설정해 줄 수 있습니다.

 

 

매개변수 표기

function fn(a:string){
console.log(`hello! ${a}!`)
}

fn(12) // 타입과 맞지 않으므로 에러가 납니다.

반환값표기

function fn():number(
return 32
}

fn()

 

반환값은 매개변수 뒤에서 표기하게됩니다.

 

이때, 반환값이 없다면 void라는 타입을 표기합니다.

 

void는 어떠한 값도 내보내지 않는다는 뜻입니다.

---

객체

앞서 객체를 표기하는 방법을 설명했습니다.

 

하지만 객체의 프로퍼티가 항상 고정적이지많은 않습니다.

 

프로퍼티가 선택적으로 들어가야 하는곳에는 옵셔널체이닝을 사용하여 더 유연하게 사용할 수 있습니다.

let user:{
    name:string,
    age:number,
    address?:string
} = {
    name:'kim;,
    age:20
}

---

Union Type

함수의 매개변수나 객체 프로퍼티의 값의 타입이 고정적이면 타입을 지정할 때

 

굉장히 곤욕스러울 것입니다.

 

그렇기 때문에 서로 다른 두개 이상의 타입을 사용하여 유니온타입이란 것을 사용할 수 있습니다.

 

사용은 | 를통해 사용하게 되는데 밑의 예시를 통해 익히면 좋습니다.

function fn(a:string[] | number){
    console.log(a)
}

fn([a,b,c])
fn(123)

let animal :{
    name : string,
    legs : number,
    tail : number|boolean
} = {
    name : 'PimPi',
    legs : 4,
    tail : true
}

---

Type Alias

Type Alias는 타입에 별명을 만들어 준다는 뜻 입니다

 

어떠한 데이터에 반환될 수 있는 타입이 많을 경우 Union타입을 사용할 수 도 있겠지만,

 

같은 타입을 재사용할 경우 번거로운 일이 되니 이런 경우에 Type Alias를 사용하면 되겠습니다.

• Type Alias는 'type 작명' 으로 사용합니다

• 이 때 작명은 앞글자를 대문자로 써주는것이 관습입니다.

• 재선언을 할시 오류가 납니다

type Datas = string | number | number[]

let data:Datas;

data = 123
data = 'hihi'
data = [1,2,3]

Type끼리 병합하기

• & 기호를 사용하여 타입끼리 병합이 가능합니다.
• type alias와 다르게 = 은 사용하지 않습니다.

type Animal = {
    wings : boolean
}

type Bird = Animal & {
    name:string
}

const bird:Bird={
    wings:true,
    name:'chicken'
}

---

Interface

• interface는 객체에 사용할 수 있는 Type Alias 같은 겁니다.

• Type alias와 같이 'interface 작명'으로 사용합니다

• 재선언이 가능합니다.

interface User {
 name : string,
 password : number,
}

let user:User = {
    name : 'mtm',
    password : 151252
}

interface 병합

• interface는 extends라는 것을 사용해 병합이 가능합니다.

interface Animal{
    wings:boolean
}

interface Bird extends Animal{
    name:string
}

let bird:Bird = {
    wings:false
    name : 'S. camelus'
}

---

타입 단언

때때로 type스크립트보다 개발을 하는 우리가 타입에 대해 더 잘 알 수있을 때가 있습니다.

 

이를테면 DOM을 조작할 때입니다. 이때는 타입스크립트가 오류를 뿜어내는데,

 

타입 단언을 통해서 더 구체적으로 명시해줄 수 있습니다.

• 타입 단언은 as문법이라고도 불립니다. 단언하고 싶은 코드 끝에 'as 단언할 타입' 을 붙입니다

const Button = document.getElementById('button') as HTMLBuuttonElement

 

 

타입 스크립트는 id가 정확히 어떤 HTML요소인지 잘 모르기 때문에 단언을 통하여 확실하게 정해주었습니다.

 

타입 단언의 경우 컴파일 할때 제거되므로, 단언에 관련된 검사는 런타임중에 이뤄지지 않습니다.

 

그러므로 타입 단언이 틀렸다 해도 예외가 발생하거나 null이 발생되지 않습니다.

---

리터럴 타입

리터럴 타입은 구체적인 값을 타입 위치에 지정하는 문법입니다.

 

리터럴 타입은 한번 지정한 값은 변하지 않는다는 면에서 const와 비슷한면도 있습니다.

 

let hi:'Hello' = 'Hello'

hi = 'hi' // 값이 Hello가 아니므로 에러가 나옵니다

 

하지만 타입에 따라 값이 하나만 나와야한다면 그닥 의미가 있지는 않을겁니다.

 

하지만 유니온 타입으로 지정해서 사용한다면 유의미해 질수 있겠네요.

 

let positon: 'left'|'center'|'right'