타입스크립트(TS) (1) 정의, 타입(종류/추론/단언/가드)

 

TS

- 자바스크립트의 슈퍼셋 프로그래밍 언어

- 정적 타입 (코드 작성 단계에서 타입 오류를 확인)

- 자바스크립트로 변환(컴파일)해야 브라우저나 node.js 환경에서 동작 가능

* JS: 동적 타입 (런타임에서 동작할 때 타입 오류 확인)

 

---

 

타입 종류

1) 문자

let str: string //값은 아직 없지만 이제 str에는 string 데이터만 할당 가능
let green: string = "Green" //큰따옴표 작은따옴표 템플릿 리터럴(``) 사용 가능
let yourColor: string = 'Your color is' + green

 

2) 숫자

let num: number
let integer: number = 6
let infinity: number = Infinity
let nan: number = NaN

 

3) 불린

let isDone: boolean = false

 

4) Null / Undefined

let nul: null
nul = null //null 타입 변수는 null만 받을 수 있음
let und: undefined //값을 명시하지 않으면 undefined가 들어감(사용을 위해서는 값 할당 필요)

 

5) 배열

const fruits: string[] = ['Apple', 'Banana', 'Cherry']
const numbers: number[] = [1, 2, 3, 4]
const union: (string|number)[] = ['Apple', 1, 2, 'Banana', 3]

 

6) 객체

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

const userA: {
	name: string
    age: number
    isValid: boolean
} = {
   	name: 'Cado',
    age: 5,
    isValid: true
}

인터페이스 파트에서 계속...

 

7) 함수

const add: (x:number, y:number) => number = function(x,y) {
  return x+y
}
const a: number = add(1,2)

//함수 자체에서 타입 명시
const add = function(x:number, y:number): number {
  return x+y
}

const hello: () => void = function() {
  console.log('Hello World')
}
const h: void = hello()

 

8) Any

//아무 타입 데이터나 할당 가능
let hello: any = 'Hello world'
hello = 123
hello = false

 

9) Unknown

//어떤 데이터가 할당될지 알 수 없음
const u: unknown = 123
const any: any = u //any 타입에만 할당 가능

 

10) Tuple

//배열에서 아이템 개수까지 명시
const tuple: [string, number, boolean] = ['a', 1, false]
//배열 안의 아이템이 tuple 타입 
const users: [number, string, boolean][]
  = [[1,'Cado',true], [2,'Nana',false], [3,'Wich',true]]

 

11) Void

//return 키워드가 없는 함수에서 반환되는 데이터 타입
function hello(msg: string): void {
  console.log(`hello ${msg}`)
}

 

12) Never

절대 발생하지 않을 값

 

13) Union

// 여러 타입을 버티컬바로 함께 지정
let union: string | number

 

14) Intersection

//객체 데이터의 속성을 하나로 통합
interface User {
  name: string,
  age: number
}
interface Validation {
  isValid: boolean
}
const cado: User & Validation = {
  name: 'Cado',
  age: 5,
  isValid: true
}

 

---

 

타입 추론(Inference)

- 타입을 명시하지 않아도 할당된 값을 통해 타입스크립트에서 타입을 추론해 지정

- 타입 추론 방법

1) 특정 데이터로 초기화된 변수

2) 기본값이 설정된 매개변수

3) 반환값이 있는 함수

 

타입 단언(Assertion)

단언 키워드: as

Non-null 단언 연산자: !

코드상의 오류는 없앨 수 있지만 실제 동작은 옳지 않은 방향일 수 있으므로 사용 시 주의 필요

//아래 상황에서 el은 html 요소이거나 null일 수 있음 -> 오류발생
//const el = document.querySelector('body')
//el.textContent = 'Hello world'

//타입 단언해주면 오류X
const el = document.querySelector('body') as HTMLBodyElement
el.textContent = 'Hello world'

//non-null 단연 연산자(!) 사용할 경우
//단 정말로 null이 들어가버리면 오류가 남 (코드상의 오류는 없지만...)
const el = document.querySelector('body')
el!.textContent = 'Hello world'

function getNumber(x: number | null | undefined) {
  return Number(x!.toFixed(2))
}

//type guard
function getNumber(x: number | null | undefined) {
  if(x) {
    return Number(x.toFixed(2))
  }
}

function getValue(x: string | number, isNumber: boolean) {
  if(isNumber) {
    return Number((x as number).toFixed(2))
  }
  return (x as string).toUpperCase()
}
getValue('hello world', false) //'HELLO WORLD'
getValue(3.1415926535, true) //3.14

 

 

할당 단언(Assertion)

//변수에 아무 값도 할당되지 않았지만 사용 가능
let num!: number

 

---

 

타입 가드(Guards)

function logText(el: Element) {
  console.log(el.textContent)
}

//찾은 요소가 HTMLHeadingElement 클래스의 instance일 때만 함수 호출
const h1El = document.querySelector('h1')
if (h1El instanceof HTMLHeadingElement) {
  logText(h1El)
}