패스트캠퍼스 메가바이트스쿨 Day 45 (10주차 화요일) - TypeScript 기초

TypeScript 기초

Today Topic

✅ 함수에 타입 지정하기
✅ void, parameter, narrowing, assertion
✅ type 키워드를 이용해서 미리 타입을 지정해주기

---

1.함수에 타입 지정

🚀 함수에 타입 지정하기

function 내함수(x :number) :number { 
  return x * 2 
} 

• 인자의 타입지정은 인자 우측에 :type
• return 값의 타입지정은 함수명() 우측에 :type

---

2.void, parameter, narrowing, assertion

🚀 void

function 내함수(x :number) :void { 
  return x * 2 
} 

• void는 리턴을 하지 않는 함수를 타입지정해주고 싶을 때 사용이 가능함
• 그 말은 함수의 타입을 void로 지정을 했는데, return이 있으면 에러가 난다는 뜻

🚀 parameter가 옵션일 때

function 내함수(x? :number) { 

}
내함수(); //가능
내함수(2); //가능

• 만약 parameter가 들어갈수도 있고, 아닐수도 있다면 인자 옆에 ?를 붙이고 타입을 지정해주면 에러가 안뜬다
• 물음표는 x : number | undefined 이거랑 똑같은 의미임.

🚀 parameter를 확실히 지정해주지 않으면

function 내함수(x? :number) :number { 
  return x * 2 
}  

• 위의 코드는 에러가 나옴
• 왜? return값이 undefined이면 number가 아니기 때문이다.

🚀 type이 아직 하나로 확정되지 않았을 경우 narrowing을 쓸 것

function 내함수(x: number|string) {
  if(type of x === 'string') {
    return x + '1'
  } else {
    return x + 1
  }
}

  function 다른함수(x: number|string) {
	let array : number[] = [];
  	if (typeof x === 'number') {
    	array[0] = x;
    } else {
    	return 
    }
}

• 어떤 변수가 타입이 아직 불확실하면 if문등으로 narrowing 해줘야 조작이 가능함

🚀 assertion

  function 다른함수(x: number|string) {
	let array : number[] = [];
    array[0] = x as number;
}

• type이 여러개가 있을 때 narrowing을 하기 위한 용도로만 as로 들어온다.
  즉, 그냥 타입이 문자열로 지정이된 값에 as 문법을 사용할 수 없음
• 무슨 타입이 들어올지 100% 확실할 때만 사용해야함. 그래서 왠만해서는 if 문으로 narrowing을 해야함

---

3. type으로 미리 타입을 지정

type Square = { color: string, width: number}
let 네모 :Square = { color:'red', width:100}
>
interface Square { 
  color: string, 
  width: number
}
let 네모 :Square = { color:'red', width:100}

🚀 interface를 쓰는 이유는 extends가 가능함

interface Student {
  name: string
}
interface Teacher {
  name: string
  age: number
}
let 학생 : Student = {name:'kim'}
let 선생 : Teacher = {name:'kim', age: 20}

interface Student {
  name: string
}
interface Teacher extends Student {
  age: number
}
let 학생 : Student = {name:'kim'}
let 선생 : Teacher = {name:'kim', age: 20}

• object에 타입을 지정하고 싶을 때
• type 타입명 = type도 가능하지만, interface로도 타입 지정이 가능함
• interface의 가장 큰 장점은 extends가 가능해서 타입의 추가에 용이함.
• interface는 중복선언이 가능함. 자동으로 extends 가 된다고 생각하면 됨.
• 그런데 일반 type은 중복 선언이 안된다. 그 부분에서 차이가 많이 남.
• 협업을 하거나 라이브러리를 할 때는 보통 interface를 써서 나중에 추가를 해줄 수 있도록 함

🚀 & 기호로 타입지정해주기

type Animal = {name: string}
type Cat = {age: number} & Animal 

type Animal = {name: string}
type Cat = {name: number} & Animal 

• & 기호로 비슷하게 타입을 지정해줄 수 있음 이렇게 하면 animal도 만족해야하는 cat이 가능
• 물론 두 타입은 전부 만족하는 타입이라는 뜻이기 때문에 엄연히 말하면 extends랑은 다름
• & 쓸 때 중복송성이 발생하면 미리 에러가 안나서 주의해야함. 따라서 interface가 안전한 편임