[Typescript] Type

Type

 

종류

• string
• number
• boolean
• null / undefined
• array

const arr : (string|number)[] = ['Apple', 1, 2, 'Banna', 3]

• object : 속성의 타입을 명시하는 것으로 보통 사용함

const user: { name : string age : number isValid : boolean } = { name : 'Hamo' age : 83, isValid : true }

object라고 타입 지정하는 것은 별로 권장되지 않는 사용법

 

 

• interface

  interface User {
  	name : string
  	age : number
  	isValid : boolean
  }
  
  const userA : User {...}
  const userB : User {...}
  

  객체의 재사용성을 높이기 위해 사용함
• funcition

const add = function(x : number, y : number) : number { 
	return x + y 
} 
const a : number = add(1,2) 
const hello = function() : void { 
	console.log('Hello World') 
} 
const h : void = hello()

• any : 하지만 이는 typescript의 특징을 전혀 못살리는 것, 보통 사용하지 않음 재할당을 통해서 타입을 아무거나 사용할 수 있다
• unknown : 어떤 데이터가 할당될 지 아직 알수없을 때 사용
• tuple

const t : [string, number, boolean][] = [['a', 1, false], ['b', 2, true]]

• void : return 키워드를 작성하지 않는 함수 안에서 반환되는 타입
• never

  const nev : [] = [] //typescript에서 자동으로 never 타입 할당
  

• 아무것도 할당 할 수 없는 타입. 보통 사용하지 않음
• union

  let union : string | number
  

• 여러개의 타입을 할당하고 싶을 때 사용
• intersection

  interface User {
  	name : string,
  	age: number
  }
  interface Validation {
  	isValid : boolean
  }
  const Hoho : Uer & Validation {
  	name : 'hhoo',
  	age : 5,
  	isValid : false
  }
  

• 여러개의 객체 타입을 사용하고 싶을 때 사용

 

타입 추론(Type Interence)

typescript는 기본적으로 타입 추론을 제공하고 있음

어떤 타입인지 명시해두지 않아도 됨

1. 초기화된 변수

let num = 12

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

3. 반환 값이 있는 함수

function add(a : number, b = 2) { return a+b }

 

타입 단언(Type Assertion)

1. 단언 키워드 as
2. Non-null 단언 연산자 !

 

💡 하지만 함부로 타입 단언을 했다가는 코드 상에서 오류가 없더라도 랜더링 후 오류가 발생될 가능성이 있음 ❗

 

const el = document.querySelector('body') **as HTMLBodyElement //단언 키워드 사용**
el.textContent = 'Hi'

const el = document.querySelector('body') **//단언 연산자 사용**
el**!**.textContent = 'Hi'

if(el) { **//타입 가드**
	...
}

➡️ body 키워드는 무조건 HTMLBodyElement로 존재할 것이라고 단언해줌

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

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

getNumber(3.1231241)
getNumber(null)

➡️ 이런식으로 타입 단언을 해도 에러가 발생될 수 있음

 

타입 가드(Type Guard)

코드 상에서 방어하는 것

function getNumber(x : number | null | undefined) {
	if(x) { //x가 number이면 truthy 데이터이므로
			return Number(x.toFixed(2)
	}
}

getNumber(3.1231241)
getNumber(null)

➡️ 따라서 타입 가드를 사용

 

 

 

 

타입 별칭(Type Alias)

유니온 혹은 intersection을 사용하여 타입을 부여할 때 재사용을 위해서 사용

type 키워드 사용

type TypeA = string
type TypeB = string | number | boolean
type User = { **//객체 혹은 tuple 타입**
	name : string
	age: number
	isValid : boolean
} | [string, number, boolean]

const userA : User = {
	name : 'IU',
	age: 12,
	isValid : true	
}
const userB : User = ['Evan', 23, false]

function Func(param : TypeB) : TypeA {
	switch(typeof param) {
		case 'string':
			return param.toUpperCase()
		case 'number':
			return param.toFixed(2)
		default:
			return 'boolean'
	}
}

 

type vs interface

특별한 사용법은 없지만…interface를 사용하는것이 좋을것

하지만 큰 차이 없음!