🔗 Type

자바스크립트 데이터 값의 유형

어떤 value가 갖고있는 property나 function을 추론 할 수 있는 방법으로 개발환경에서 에러를 잡는 것을 도와주고 타입지정을 사용해 코드를 분석 할 수 있다.

🔗 type annotation

데이터 타입 명시

const five : number = 5
const ten : number = 10
// " : " annotate 지정
// " number " data type

function func1(props: { message: string; color: string }) {}
// 부모가 넘기는 인자를 받을 때 인자 타입 명시 가능

function func2(props: { color?: string }) {}
// " ? " 옵션 : 인자가 없어도 되고 있어도 되며 " ? " 없으면 필수로 받아야한다.

type func1 = {
  message: string
  color?: string
}
// 타입별칭 : 타입에 이름을 붙힐 수 있다.

🔗 type inference

타입스크립트가 알아서 타입 추론

const five = 5 // number type

타입을 지정하지 않아도 초기값에 지정되는 값에 따라 타입이 정의된다.

🔗 자바스크립트의 타입을 상속

• Primitive type
  • string
  • number
  • boolean
  • null
  • undefined
  • symbol

• Object type
  • object
  • array
  • class
  • function

Boolean

let boolean: boolean
let falseBoolean: boolean = false

Number

let number: number
let num: number = 123
let pi: number = 3.14

String

let string: string
let firstName: string = "sumin"

Array

// 한가지 타입
let names1: string[] = ["sumin", "mango"]
let names2: Array<string> = ["sumin", "mango"]

// 여러 타입
let array1: (string | number)[] = ["sumin", 1, 2]
let array2: Array<string | number> = ["sumin", 1, 2]

// any
let someArray: any[] = ["sumin", 1, {}, [], false]

// 읽기 전용 배열 (readonly, ReadonlyArray)
let strArr: readonly string[] = ["A", "B"]
let numArr: ReadonlyArray<number> = [1, 2]

strArr.push("c") // 값을 추가할 수 없음
numArr[0] = 3 // 값을 할당할 수 없음

Object

let obj: object = {}
let arr: object = []
let nul: object = null // 자바스크립트에서는 에러가 아니지만 타입스크립트에서는 에러

const obj1: { id: number; name: string } = { // 속성의 타입을 개별적으로 지정
  id: 1,
  name: "sumin",
}

Function

// 함수는 매개변수와 리턴값 타입을 지정
let func1: (arg1: number, arg2: number) => number 
func1 = function (x, y) {
  return x * y
}

// 리턴하는게 없을 땐 void타입을 지정
let func2: () => void 
func2 = function () {
  console.log("Hi")
}

🔗 TypeScript 추가 제공 타입

Tuple

배열의 인덱스와 타입을 지정할 수 있다.

let tuple1: [string, number]
tuple1 = ["a", 1]
tuple1 = ["a", 1, 2] // 타입에러, 2개만 허용
tuple1 = [1, "a"] // 타입에러, 순서가 다르기 때문에

let users: [number, string][] // 배열안에 배열 (2차원배열)
users = [
  [1, "sumin"],
  [2, "mango"],
]

let tuple2: [string, number]
tuple2 = ["a", 1]
tuple2.push(2) // 값을 넣는 것은 가능!
tuple2.push(false) // 지정되지 않는 타입을 넣으면 타입에러

Union

변수 또는 함수 매개변수에 대해 둘 이상의 테이터 유형을 사용할수있다.

let union : string | number // "|"또는 을 의미
union = 123 
union = "abc"
union = true // 타입에러

Enum

열거형 타입(enumerated type)을 의미, 값들의 집합을 명명하고 이를 사용할 수 있도록 한다.

// 열거된 news는 값이 설정되지 않은 경우 기본적으로 0부터 시작
enum news {
  newsPaper1, // 0
  newsPaper2, // 1
  newsPaper3, // 2
  newsPaper4  // 3
}
let mediaType: number = news.newsPaper4 // 3

enum news {
  newsPaper1 = 1,
  newsPaper2 = 58, 
  newsPaper3 = 79, 
  newsPaper4 = 79+1
}
let mediaType: number = news.newsPaper4 // 80
let type: string = news[55] // "Megazine"
// number 값을 통해 enum값의 키 이름 출력 가능

객체와 비슷해보이는 enum의 차이점은 enum은 선언 이후에 변경할수 없고 enum의 속성 값으로는 문자열과 숫자만 허용한다.

Any

어떤 유형이 들어와도 괜찮은 유형으로 모든걸 다 퉁쳐서 사용할수있기 때문에 최대한 쓰지 않는 것이 좋다!

let something: any = "hello"
something = 23
something = true
something = []

Void

타입이 없는 상태이며 any와 반대의 의미를 가진다. 함수가 값을 반환하지 않으면 반환 유형으로 void를 지정하여 주로 함수의 리턴이 없을 때 사용된다.

function sayHi(): void {
  console.log('hi')
}
let say: void = sayHi()
console.log(say) // undefined

Never

어떤일이 절대 일어나지 않을 것이라고 확신할때 사용한다. 일반적으로 함수의 리턴타입으로 사용되는데 never가 사용 될 경우, 항상 에러를 리턴하거나 리턴 값을 절대로 내보내지 않음을 의미한다.

function throwErr(): never {
  throw new Error("error")
}

function keepProcessing(): never {
  while (true) {
    console.log('무한루프')
  }
}

void와 never의 차이

void 유형은 값으로 undefined, null 값을 가질 수 있지만 never는 어떠한 값도 가질 수 없다.

let something: void = null
let nothing: never = null // 타입에러