[타입스크립트] 타입(type)작성 / 코드 재사용

타입스크립트

타입스크립트가 제공하는 보호장치는 타입스크립트 코드가 자바스크립트로 변환되기 전, 변환된 자바스크립트에서 에러가 일어난다면 컴파일 하지 않음 -> 타입스크립트에서는 타입을 지정해서 이를 보호함

Optional  타입 / 코드 재사용 / Allias

하나의 객체가 여러개의 타입을 가지고 있을 때, 작성하는 방법

// student라는 객체가 여러개의 타입을 가지고 있을 경우
// 학생 중에는 이름만 있고, 학번을 가지고 있지 않은 경우 > studnetNumber에 ?를 붙임 
 const student : {
 	name : string,
    studentNumber? : number
 } = {
 	name :"woodi"
    }
    
   
 // if문을 작성할 경우 
 // student.studentNumber가 존재하는지 확인을 해야 함 
 // student.studentNumber 를 조건문에 추가 
 // 위 조건을 지우면 타입스크립트는 undefined로 추론함
  if(student.studentNumber && student.studentNumber =1011){
   }
  
 // 객체의 같은 조건을 여러번 반복하는 경우 별칭(Allias) 설정 가능
 // 아래와 같이 타입을 지정해주고 type Student
 type Student = {
 	name :string, 
    studentNumber : number
    }
 
 // Student 타입을 적용해줌으로서
 // 코드를 재사용할 수 있도록 함
 const student : Studnet ={
 	name :"woodi"
    }
    
 // 이러한 타입 재사용은 객체뿐만이 아닌 다른 타입에서도 사용 가능함 
 // type Age = number;로 정의하고 
 // 위 코드의 age? = Age 로 넣어줄 수 있음

 

Object의 타입의 명시적 지정 

1) 변수를 선언 : 타입을 작성  ex) let a : boolean
2) 인수에서 이름 : 타입을 쓰거나
3) 함수 :  타입을 사용  -> 함수와 함께 하는 return 타입이 무엇인지 알 수 있는 기능 

// 아래와 같이 타입을 설정한 경우
type student = {
 	name :string, 
    studentNumber : number
    }

// age없이 name만  return 
// 타입스크립트는 객체를 return하는 것만 알고 있음 
// 타입이 string인 name이 들어 있는 객체 뒤에 : student작성 
function Studnet(name:string) : studnet{ // (이름 : 타입) 
	return {
    name :name
    }
}

// 위 함수에 : studnet  타입을 return 하면
// 위 함수에서는 name만 선언했지만 :Student를 선언했기 때문에
// 타입스크립트는 woodi의 name 과 age를 바꾸도록 허용함 
const woodi = Student("woodi")
woodi.age = 12

// 화살표 함수를 사용해 타입 지정하기 
const Student = (name :string) : student => ({name})