Day to_day

[하루한끼_백엔드] 타입스크립트 기본 문법 본문

Project

[하루한끼_백엔드] 타입스크립트 기본 문법

m_inglet 2022. 10. 27. 21:03
728x90
반응형

TypeScript 문법


let 이름 : string = 'kim'
  • : 뒤에 타입을 지정해주어야한다.
  • 지정할 수 있는 타입의 종류
    • string
    • number
    • boolean
    • null
    • undefined
    • bigint
    • []
    • {}

 

 

 

let menu : string[] = ['coffee', 'tea']
  • 만약 array로 타입을 지정하고 싶다면 ‘arrary’라고 써주는 것이 아니라 ‘[]’ 이런식으로 적어준다.
  • 근데 array 안에 들어가는 구성 물품이 어떤 타입인지도 알려줘야한다. string[] 요런식으로 적어준다.

 

 

 

let menu : {drinks: string} = {drinks: 'coffee'}
let menu : {drinks?: string} = {}
  • object를 넣고싶을때 속성과 속성의 타입을 적어줘야한다.
  • drinks뒤에 ?가 붙으면 drinks속성이 있을 수도 있고 없을 수도있다. 그래서 뒤에 빈 값이 들어와도 에러를 내지 않는다.

 

 

 

 

let name :string | number = 'kim'
let name :string[] | number = 'kim'
  • 해당 변수에 문자열 혹은 숫자가 들어올때도 있으면 union type으로 정의해준다.
  • array혹은 number로도 타입을 지정해서 넣을 수도 있다.

 

 

 

type Name = string | number;
let 이름 :Name = 123;
  • 타입 자체를 변수에 담아서 쓸수있다.
    • 위의 예시의 경우 Name이라는 변수로 타입만 담아서 넣어주고, 두번째줄은 실제로 그 타입을 불러올 때 예시이다.
  • 보통 타입 자체를 선언할때는 보통 앞에 대문자를 많이 쓴다.

 

 

 

function 함수(x :number):number {
	return x*2
}
  • 함수 변수에도 들어갈 타입이 있어야한다.
  • 리턴할때도 어떤 타입인지 적어야한다.

 

 

type Member = [number, boolean];
let john: Member = [123, true]
  • array에 쓸수있는 tuple타입을 만들기
  • 첫번째는 number, 둘째는 boolean 이렇게

 

 

 

type Member = {
	name : string,
	hobby : string
}
let john : Member = {name : 'kim'}
----

type Member = {
	[key : string] : string
}
let john : Member = {name : 'kim'}
  • object에 타입지정해야할 속성이 너무 많을 때, [key : ]를 이용하면 된다.
  • key는 string이 들어오고, 모든 그 key 값에 해당하는 속성 타입은 string으로 한다. 라는 의미

 

 

 

class User {
	name :string;
	constructor(name :string) {
		this.name = name;
	}
}
  • class 타입지정하는 것도 다음과 같다.

 

이런 식으로 타입을 지정해준다. recipe_scraps는 recipe_id가 들어가는 array로 이루어졌다.

 

 

타입스크립트를 쓰면서 생각보다 문법자체는 어렵진 않았기 때문에 이전에 자바스크립트로 작성해둔 코드를 그대로 가져와서 쓰기도 좋았다. 타입 지정만 잘해주면 거의 대부분의 오류는 해결되었지만.. 그 중 나를 힘들게 했던 오류가 있었는데.. 그건 다음 포스팅에서!

 

728x90
반응형