[타입스크립트] 타입스크립트 기본개념 + 병합연산자

 

타입스크립트

자바스크립트의 확장판

 

자바스크립트는 타입시스템이 존재하지 않기에 변수에 여러 타입이 할당가능함

->  변수에 잘못된 타입(값)이 할당 되었을 때, 코드를 실행해야만(=런타임 환경에서만) 에러가 발생했음을 알 수 있음

그러나 타입스크립트는 이러한 자바시스템에 강한 타입시스템을 적용해

코드 작성환경(컴파일 단계 혹은 이전)에서 에러를 확인할 수 있음

const plus = (a, b) => a + b

  자바스크립트

const plus = (a:number, b:number) => a + b

  타입스크립트

 

함수 인자들이 타입화되었음

실제론 저렇게 사용X. 컴포넌트 생성 후 prop 보내주면 된다.

 

-

0. 인터페이스는 변수, 함수, 클래스에 타입 체크를 위해 사용 됨. 자바스크립트 리액트의 propType과 유사

 

1. Optional props =>  prop name 뒤 ?

interface CircleProps {
  bgColor: string;
  borderColor?: string;
  text?: string;
}

 

2. state에서 초기값이 두 가지 타입 모두 가능하게 만드려면

const [counter, setCounter] = useState<number|string>;
setCounter(2)
setCounter("string")
//
모두가능

그러나 보통 state type은 그대로 간다.

 

3.

e: React.FormEvent<HTMLInputElement>

와 같이 요상한 이벤트리스너는 구글링, doc에서 찾는수밖에 없다.

+ ts는 target이 아닌 currentTarget을 사용한다.

 

 

--

?? (Null 병합 연산자: Nullish coalescing operator)

??앞에 값이 null이거나 undefined이면 오른쪽 값을, 그렇지 않으면 왼쪽 값을 반환하는 논리연산자

null ?? "hello" // "hello"
undefined ?? "hello" // "hello"
"hi" ?? "hello" // "hi"

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN

// 병합연산자 이외 JS ES6 구문을 사용해 function ff( { text = "default text" } ) {} 를 사용하는것도 가능.