TypeScript - 타입 종류

 

목차

• TypeScript의 타입들
• string
• number
• boolean
• Null / Undefined
• 배열
• 객체
• 함수
• Any
• Unknown
• Tuple
• Never
• Union
• Intersection

 

TypeScript의 타입들

 

타입스크립트에서 변수에 값이 할당될 때 : (콜론) 기호로 변수에 할당될 값을 고정시킬 수 있다.

 

let age: number = 30
let name: string = 'Mike'

 

 

string

 

// string 

let str: string   // 지금은 undefined가 할당되어도 나중에는 string 타입이 와야한다는 의미
let red: string = "Red"
let blue: string = "Blue"
let templateStr: string = `I have color ${red} and ${blue}`
let attachStr: string = red + " and " + blue

 

number

 

// number

let num: number // 지금은 undefined가 할당되어도 나중에는 number가 온다.
let integer: number = 6   // 변수명만 integer일뿐 정수가 아닌 number도 할당 가능
let float: number = 3.14  // 변수명만 float일뿐 실수가 아닌 number도 할당 가능
let infinity: number = Infinity
let nan: number = NaN

 

boolean

 

// boolean

let isBoolean: boolean
let isTrue: boolean = true
let isFalse: boolean = false

 

 

Null / Undefined

 

// Null / Undefined

let isNull: null
let isUndefined: undefined
console.log(isNull) // isNull이 할당되기 전에 사용되었다고 오류가 발생함
console.log(isUndefined)

 

배열

 

// 배열

const fruits: string[] = ['Apple', 'Pear', 'Strawberry']
const numbers: number[] = [1, 2, 3, 4, 5, 6, 7]
const union: (string|number)[] = ['Apple', 1, 'Pear', 2, 3]
const array: [] = [1, 2, 3] // 오류 발생. 빈 배열만 가능. 데이터를 넣고 싶으면 반드시 데이터 타입을 선언해주자

 

객체

 

// 객체

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

const userA: {
  name: string
  age: number
  isAmerican: boolean
} = {
  name: 'Mike',
  age: 20,
  isAmerican: true
}

const userB: {
  name: string
  age: number
  isAmerican: boolean
} = {
  name: 'Neo',
  age: 25,
  isAmerican: true
}

// 위 예시처럼 user 객체 속성의 데이터 타입은 동일하다.
// 이를 interface로 통일시킬 수 있다.
interface User { // 일반적으로 인터페이스는 다른 변수와 구분하기 위해 대문자로 시작한다.
  name: string
  age: number
  isAmerican: boolean
}

const userC: User = {
  name: 'Amy',
  age: 15,
  isAmerican: false
}

const userD: User = {
  name: 'Cate',
  age: 20,
  isAmerican: true
}

 

함수

 

// 함수
// 함수의 매개변수 타입과 반환값의 타입을 정할 수 있다.
// add 함수는 number 타입의 값 두개를 x, y 매개변수로 전달받고 number 타입의 값을 반환하는 함수
const add: (x: number, y: number) => number = function(x, y) {
  return x + y
}

// 다른 버전. 위 함수와 동일한 형식
const add2 = function (x: number, y: number): number {
  return x + y
}

const a: number = add(1, 2)

// '() => void ' 부분이 타입스크립트
const hello: () => void = function () {
  console.log("Hello world~")
}

// 다른 버전
const hello2 = function(): void {
  console.log("Hello world~")
}

const h: void = hello()

 

Any

 

변수에 어떠한 데이터 타입의 값도 할당 가능하다는 뜻.

 

하지만 변수에 어떠한 데이터 타입도 할당 가능하면 TypeScript를 사용하는 의미가 없어지므로 가능하면 사용하지 않는것이 좋다.

 

// Any
let hello: any = 'Hello world'
hello = 123
hello = false
hello = null
hello = {}
hello = []
hello = function() {}

 

Unknown

 

변수에 어떤 데이터 타입을 적용할지 모르겠다라는 의미.

 

any 타입의 변수에는 unknown 타입의 값을 할당 가능하나 다른 타입 (boolean, number, string 등등)의 변수에는 unknown 타입의 값을 할당할 수 없다.

 

// Unknown
// 아직은 어떤 데이터 타입이 할당될지 모르겠다는 의미
const u: unknown = 123

// 모두 오류 난다.
const boo: boolean = u
const num: number = u
const arr: string[] = u
const obj: {x: string, y: number} = u

 

데이터 타입을 모르겠다면 Any타입 대신 Unknown을 사용할 것.

 

 

Tuple

 

배열 데이터에서 원소에 순서가 있는 경우 사용 가능

 

// Tuple
const tuple: [string, number, boolean] = ['a', 1, false]
const users: [number, string, boolean][]
  = [[1, 'Neo', true], [2, 'Evan', false], [3, 'Lewis', true]]

 

 

Void

 

함수가 반환하는 값이 없는 경우 반드시 void 타입을 정해주어야만 한다.

 

// void
function hello(msg: string): void {
  console.log(`Hello ${msg}`)
}

 

 

Never

 

배열에 타입이 지정되지 않아 어떤 데이터도 넣을 수 없다는 의미

 

const nev: [] = []
nev.push(3) // 오류 발생

 

 

Union

 

하나 이상의 타입을 할당할 수 있게 된다.

 

// Union
let union: string | number
union = 'Hello type!'
union = 123
union = false // 오류 발생

 

 

Intersection

 

두 개 이상의 인터페이스를 합칠 수 있다.

 

// Intersection
interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const inter: User & Validation = {
  name: 'Mike',
  age: 25,
  isValid: false
}