본문 바로가기
WebDev/항해99

typescript 기본 문법

by S.AHA_dev 2023. 8. 1.
728x90
반응형

string

//다른거 들어오면 에러
let a:string = '안녕'

number

let a:number = 3

boolean

let a:boolean = true

 

array

let e:string[] = ["a","v"]
let v:number[] = [1,2]

//두가지 타입이라면?
let v:(string|number)[] = [1,2,"hihi"]

 

function

function addNum(a:number, b:number):number {
 return a+b 
}
//매개변수에 지정해주고 리턴값도 지정해줌 
//리턴값은 매개변수 괄호 옆에

null(x)

undefined(x)

object(x)

-----------------

any(x) 지양하자

never(x)

tuple

let a:[string, boolean, number] = ["hi", true, 1]
//순서에 맞게

let a:[string, boolean, number][] = [["i", true, 2],["hi", false, 1],["hi", true, 1]]

void

function hi(msg:string):void {
	console.log("hello", msg)
}
const hihi: void = hi("SAHA")

//리턴키워드가 없을 때

union

let some: string|number

some=123
some="hi"
//두가지 이상도 가능

타입 정의

데이터가 이렇게 있다면
let data = {
  name:'식당',
  category: 'western', 
  address: {
    city: '부산',
    detail: 'somewhere',
    zipCode:2323
  },
  menu: [{name: 'jjajang', price: 2000, category:'china'}]
}

//이런식으로 타입정의가 가능
export type Resto = {
  name: string;
  category: string;
  address: Address;
  menu:Menu[]
}
export type Address = {
  city: string;
  detail: string;
  zipCode: number;
}
export type Menu = {
  name: string;
  price: number;
  category: string;
}
//그렇다면 타입을 이렇게 정의하면 됨
let data:Resto = {
  name:'식당',
  category: 'western', 
  address: {
    city: '부산',
    detail: 'somewhere',
    zipCode:2323
  },
  menu: [{name: 'jjajang', price: 2000, category:'china'}]
}

//스테이트에 넣고 싶다? 제네릭 쓰자(<타입>)
 const [resto, setResto] = useState<Resto>(data)

 

 

반응형

'WebDev > 항해99' 카테고리의 다른 글

var, let, const의 차이점  (0) 2023.08.03
useEffect는?  (0) 2023.08.02
버츄얼돔과 리얼돔의 차이  (0) 2023.08.01
상태관리의 필요성  (0) 2023.07.28
클론 코딩 마무리 피드백 고쳐야 할 것  (0) 2023.07.27