본문 바로가기

TypeScript

TypeScript 기본 사용법

type Age = number;
type Player = {
   name : string,
   age?: Age,
   see?:true
}

const plaMak = (name:string) : Player =>({
   name
})

/*
function plaMak(name:string) : Player {
   return{
      name : name
   }
}
*/

const harim = plaMak("harim")
harim.age = 12
harim.see = true

함수에서 타입스크립트사용법은 위와 같다

type 쪽 함수는 엘리언스함수로 재사용이 쉽게 만들어둔 타입스크립트의 타입함수 다른함수에서 사용이가능하다

오브젝트 안에 이름 뒤에 ? 붙은경우는 이 오브젝트가 있을수도 있고 없을수도있다고 알려주는것이다.

 

기본구조.

const test : 타입 = 값.

.엘리언스 함수타입을 사용 안할시 직접적으로 오브젝트 안에 타입을 정해준다. (재사용이 피곤해지고 보기가 안좋다.)

const test = {

       name : string,

       age : number

}

 

주의할점.

화살표 함수는 자바스크립트에서만 사용하면

const plaMak = () => {}

중괄호를 사용하지만

 

타입스크립트에서는

const plaMak = () => ({})

소괄호로 감싸줘서 리턴해줘야한다.

()가 있으면 return 을 하게된다. 이유는 그안에 있는게 객체인지 함수 본연의 값인지 구분이 안되기때문에 

타입스크립트오류가 뜬다 그래서({}) 묶어줘서 리턴 값이 객체임을 확실 히 하는것이다.

 

readonly

리드온리는 불변성을 지켜준다

 

readonly name : Name,
const numbers: readonly number[] = [1,2,3,4]

이런식으로 사용하며 불변성을 지켜준다 

첫번째의 경우에는 위쪽에 plaMak 에서 저렇게 받아와서 사용하는경우에는 사용가능 Name가 바뀐건아니니까 속성일뿐.