[타입스크립트] 타입스크립트 기초문법 13가지

1. 원시형 데이터에 타입 지정

변수에 타입 지정하는 기본 문법

: 타입

let a : number = 1
let b : string = 'hello world'
let c : boolean = true
let d : undefined = undefined
let e : null = null

원시형 데이터(number, string, boolean, undefined, null 등)를  변수에 할당할때는 타입을 지정하기 보다는 타입스크립트가 자동으로 타입을 추론하도록 두는 것이 낫다. 아래의 코드를 타입스크립트에서 사용하면 a, b, c가 어떤 데이터 타입을 사용해야하는지 타입스크립트는 이미 알고 있으므로 코드의 가독성을 위해 타입 지정을 하지 않는 편이 좋다.

let a = 1
let b = 'hello world'
let c = true

데이터가 하나 이상의 타입을 가진다면 | 기호를 이용해 or 연산자를 표시해준다

let age : string | number = '한살';

 

2. 배열에 타입 지정

배열 안에서 사용할 데이터 타입 지정

let a : number[] = [1]
let b : string[] = ['hello world']
let c : boolean[] = [true]

 

3. 객체에 타입 지정

객체 안에서 사용할 데이터 타입 지정

const member : {
  name: string,
  age: number
} = {
  name: 'maple'
  age: 1
}

 

4. 선택적 타입 (optional)

기본문법

선택적 타입을 지정하면 해당 데이터는 지정한 타입 또는 undefined가 될 수 있다.

? : 타입

데이터를 포함할 수도 있고 포함하지 않을 수도 있는 경우를 만들때는 물음표를 추가해준다. member라는 객체에서 name 데이터는 필수적(required)이지만 age 데이터는 선택사항(optional)이다.

const member : {
  name: string,
  age?: number
} = {
  name: 'maple'
}

에러발생

age 데이터는 선택사항이기 때문에(age가 undefined일 수 있기 때문에) 에러발생

const member : {
  name: string,
  age?: number
} = {
  name: 'maple'
}

if(player.age < 10) { ... }

정상코드

선택사항인 데이터 age를 사용해 로직을 짤때는 객체에 해당하는 데이터가 있는지 확인하는 작업을 거쳐야한다.

const member : {
  name: string,
  age?: number
} = {
  name: 'maple'
}

if(player.age && player.age < 10) { ... }

 

5. 타입 별칭(alias) 지정하기

member1, member2 객체에 같은 타입이 지정되고 있다.

const member1 : {
  name: string,
  age?: number
} = {
  name: 'maple'
}

const member2 : {
  name: string,
  age?: number
} = {
  name: 'syrup'
}

같은 타입이 여러번 반복되는것을 방지하기 위해 타입 별칭을 지정해준다.

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

const member1 : Member = {
  name: 'maple'
}

const member2 : Member = {
  name: 'syrup'
}

type도 별칭을 사용할 수 있다.

type Name = string
type Age = number

type Member = {
  name: Name,
  age?: Age
}

const member1 : Member = {
  name: 'maple'
}

const member2 : Member = {
  name: 'syrup'
}

 

6. 일반 함수에 타입 지정

일반 함수에 타입 지정하는 방법

function myFunc(파라미터: 파라미터 타입) : 리턴값 타입 {
  return 리턴값
}

memberMaker 함수는 리턴값으로 age라는 데이터가 숫자 형태로 올 수도 있도록 설정하였다.

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

function memberMaker(name: string) : Member {
  return {
    name
  }
}

memberMaker.age = 12

 

7. 화살표 함수에 타입 지정

화살표 함수에 타입 지정하는 방법

const myFunc = (파라미터: 파라미터 타입) => : 리턴값 타입 {
  return 리턴값
}

예제

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

const memberMaker = (name: string) : Member => ({ name })

 

8. readonly 속성 추가 (불변성)

요소를 읽기 전용으로 만들 수 있는 속성. readonly 속성을 가진 데이터를 수정하려고 하면 에러가 발생하며 수정이 불가하다.

함수에서 readonly 속성 추가

name 데이터는 수정할 수 없는 readonly 속성을 가졌으므로 maple.name = 'syrup'에서 에러가 발생한다.

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

const memberMaker = (name: string) : Member => ({ name })

const maple = memberMaker('maple')
maple.name = 'syrup' // 에러발생
maple.age = 1

배열에서 readonly 속성 추가

numbers라는 변수에는 배열 안에 숫자형 데이터만 올 수 있으며 해당 데이터는 읽기전용이므로 새로운 데이터를 추가하려는 코드에서 에러가 발생한다.

const numbers: readonly numbers[] = [1, 2, 3]
numbers.push(4) // 에러발생

 

9. Tuple로 배열 생성하기

Tuple로 생성한 배열은:

• array의 길이가 지정되어 있다
• 특정 위치에 특정 타입이 있어야 한다

아래 예제에서 member라는 변수에는 배열안에 3개의 데이터가 문자열, 숫자, 불리언 데이터가 차례로 온다.

const member: [string, number, boolean] = ['maple', 1, true]

member[0] = 1 // 에러발생: 첫번째 값은 반드시 문자열 데이터가 와야한다

 

10. any

• 타입의 종류중 하나로 모든 타입을 허용하고 싶을 때 사용한다
• any 타입을 적용하면 타입스크립트의 보호에서 벗어나 자바스크립트 코드와 같아지게 된다 (타입의 탈출구)

변수 a에는 배열 데이터가 들어오고 배열 안에 있는 데이터의 타입은 any다. 즉 특정 타입을 지정하지 않았으므로 데이터에 모든 타입 적용을 허용하게 된다.

const a : any[] = [1, 'hello', false, undefined]

any 적용과 비적용의 차이점

any 비적용: 타입스크립트가 a에는 숫자형 데이터만 올 수 있게 자동으로 지정해준다.

const a = [1, 2, 3]
a.push('hello') // 에러발생

any 적용: a에는 데이터 타입이 지정되어 있지 않으므로 어떤 데이터든 올 수 있게 된다. (일반 자바스크립트와 같다)

const a : any[] = [1, 2, 3]
a.push('hello') // 가능

 

11. unknown

unknown 어떤 타입인지 정해지지 않은 데이터를 의미한다. unknown 키워드가 붙은 데이터를 사용해 코드를 짤때는 해당 변수의 타입을 먼저 확인하는 과정을 거쳐야한다. 변수의 타입을 미리 확인할 수 없어 확인작업(타입체크)를 가져야 변수를 사용한 코드가 동작한다.

let a:unknown

// 데이터 a는 unkown이므로 type의 경우의 수를 나눈 후 작업할 수 있다
let b = a + 1 // 에러발생: Object is of type 'unknown'

// a의 타입이 숫자형 데이터일때 할 작업
if(typeof a === 'number') {
  let b = a + 1
}

// a의 타입이 문자형 데이터일때 할 작업
if(typeof a === 'string') {
  let b = a.toUpperCase()
}

 

12. void

아무것도 리턴하지 않는 함수에 자동으로 부여되는 타입이다. void를 따로 지정해줄 필요는 없다.

// void는 return 값이 없는 함수에 자동으로 부여되므로 void 타입을 지정해줄 필요는 없다
function sayHi(): void {
  console.log('Say Hi')
}

// 올바른 예시
function sayHi() {
  console.log('Say Hi')
}

 

13. never

함수에서 데이터의 타입을 never로 지정하면 해당 데이터는 절대 return되지 않는다.

sayHi 함수는 타입이 never이므로 return 값이 작동하지 않는다.

function sayHi(): never {
  return 'say Hi'
}

name이라는 데이터는 string과 number 모두 가능하므로 typeof를 사용해 경우의 수를 나눠준다.

function sayHi(name: string | number) {
  if(typeof name === 'string') {
    name // string 타입
  } else if(typeof name === 'number') {
    name // number 타입
  } else {
    name // never 타입 (절대 리턴되지 않을 타입)
  }
}