본문 바로가기

Web/TypeScript

[TypeScript] 기본 문법 - Type

Implicit Types

JavaScript처럼 변수만 생성하고 넘어가도 타입 추론 가능

let a = "hello"
a = "bye"
a = 1 # error

 

Explicit Types

데이터와 변수의 타입을 명시적으로 정의

let <변수 이름> : <변수 타입> = <값 할당>

let a = "hello"
let b : boolean = "x" # error

 

Object에 Type 선언

const player : {
    # 타입 선언
    name: string, # 반드시 필요
    age?:number   # ?를 붙이면 optional
} = { 
    # 실제 내용
    name:"seojin"
}

if(player.age < 10) {
    # age가 undefined일 수도 있다는 에러 띄워줌
} 

if(player.age && player.age < 10) {
    # error X
}

 

> player를 여러 개 만들고 싶다면

Alias 타입

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

const seojin : Player= {
    name:"seojin",
}

const kyung : Player = {
    name:"kyung",
    age:26
}
type Age = number;
type Name = string;
type Player = {
    name: Name,
    age?: Age
}

> 이렇게도 가능

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

const seojin = playerMaker("seojin")
seojin.age = 22

> 함수의 리턴 타입에도 적용

 

Readonly 특성 (JavaScript에는 없는 것)

type Player = {
    readonly name:Name # readonly 추가
    age?:Age
}

const seojin = playerMaker("seojin")
seojin.name = "las" # error

> readonly를 적용하면 변경 불가

const numbers: readonly number[] = [1, 2, 3, 4]
numbers.push(1) # error

const names: readonly string[] = ["1", "2"]
names.push() #error, map이나 filter는 가능

 

tuple(튜플)

항상 정해진 개수의 순서, 타입의 요소를 가져야 하는 배열을 지정할 수 있음

const player: [string, number, boolean] = ["seojin", 1, true]
player[0] = 1 # error, 첫 번째 인덱스틑 항상 string이어야 하니까

 

 

# JavaScript에도 있는 것

let a = undefined = undefined # 선택적 타입
let a : null = null

any #TypeScript의 보호장치로부터 빠져나오고 싶을 때 쓰면 됨, 아무 타입이나 ㄱㄴ
const a : any[] = [1, 2, 3, 4]
const b : any = true

a + b # ㄱㄴ

 

 

TypeScript에만 있는 것들; unknown, void, never

- Type Checker와 소통하는 것이 중요

let a:unknown; # 변수의 타입을 모를 때 사용

let b = a + 1 # error

# 타입 확인 작업 필요
if(typeof a === 'number') {
    let b = a + 1
}

if(typeof a === "string"){
    let b = a.toUpperCase();
}
function hello() { # void; 아무것도 리턴하지 않는 함수
    console.log('x')
}
# 함수가 절대 리턴하지 않을 때 사용
function hello():never{
    throw new Error("xxx")
}

'Web > TypeScript' 카테고리의 다른 글

[TypeScript] Interfaces  (0) 2024.07.07
[TypeScript] 객체지향 - Classes  (0) 2024.07.05
[TypeScript] 다형성(Polymorphism)  (0) 2024.07.05
[TypeScript] 기본 문법 - 함수  (1) 2024.07.05
[TypeScript] 를 쓰는 이유  (0) 2024.07.04