F.E/TypeScript

[TypeScript] TypeScript 시작하기 - 자료형

pinomaker 2022. 8. 2. 23:18

1. 타입 스크립트

타입 스크립트는 변수 뒤에 타입을 지정 할 수 있다.

변수 타입에 맞지 않는 값을 넣으면 에러 발생

const a : string = "Hello World"
const b : string = 123 // ERROR!

 

타입 스크립트의 타입 시스템

  • number : 숫자 자료형
  • string : 문자열 자료형
  • boolean : 참, 거짓 자료형
  • 배열, 객체, 함수 ...
const a : string = "Hello world"
const b : number = 123
const c : boolean = true
const d : string[] = ["a", "b"]
const e : {name : string, age : number} = {
    name : "피노키오",
    age : 22
  }

 

Optional

타입 스크립트는 자바와 같이 Optional을 사용할 수 있다.

const person : {name : string, age : number} = {
  name  : "김인후"
}
// ERROR : age가 없음

const person2 : {name : string, age ?: number} = {
  name : "김인후"
}
// Success -> ?로 age가 number || undefined 처리

 

Optional로 처리한 데이터는 사용할 때 Optional 처리를 해줘야한다.

const person : {name : string, age ?: number} = {
  name : "김인후"
}

console.log(person.age) // Error -> person.age가 undefiend 일 수도 있다.
console.log(person.age && person.age) // Success -> &&를 이용한 person.age가 있을 경우 실행

 

Type Alias

Type Alias를 이용하면 같은 타입을 지정할 때의 코드를 줄일 수 있다.

type Student = {
  name : string,
  age : number
}

const pino : Student = {
  name : "피노키오",
  age : 22
}

const pino2 : Student = {
  name : "피노키오2",
  age : 22
}

 

Function의 타입 지정

TypeScript에서는 함수의 반환형과 매개 변수의 타입을 지정할 수 있다.

type Student = {
  name : string,
  age : number
}

const createUser = (name : string, age : number) : Student => {
  return {
    name, age
  }
}

const pino = createUser("피노키오", 22)