Typescript

step 1. interface

interface를 사용해서 전달해주는 props의 type을 미리 정해준다

TextField.tst

props.person의 경우는 obj를 Person이라는 변수로 뺐는데 아래와 같이 바로 써줄 수도 있다.

interface Props {
	person: {
		firstName: string;
        	lastName : string;
        }
}

App.tsx
TextFied의 props로 text와 person이 전달된 모습이다.
person의 경우는 obj형태로 firstName과 lastName이라는 key를 가지므로 반드시 명시해줘야한다. 이외에도 props중에 ok , i , fn 이 있었는데 interface에서 선언해준 props가 쓰이지 않을 경우에는 에러메시지가 난다. 이럴 경우,나중에 사용할지 아닐지 애매한 = 꼭 필요한 props가 아닐 때엔, interface 선언에서 !를 : 앞에 붙여준다.
예를 들어 ok와 i는 전달을 안할지 모르는 props optional 형태라고 가정한다면,

ok !: boolean;
i !: number; 
이런 식으로 !: 을 해주면 된다.

const QuestionCard: React.FC<Props> =({위에서 정한 props들}) => ();

functional component의 경우는 React.FC< Props > 라고 써주고 받는 props들을 {}안에 써준다.
(여기서 FC는 Functional Componenet의 약자다)

---

step 2 (React Hooks). UseState

useState<state의 type>
<> 괄호 안에서 type을 정의한다
아래에서는 count 의 type을 number | null | undefined 로 정의했다. 만약 number로만 지정했다면 undefined로 setCount를 했을때 에러가 뜬다.

아니면 interface로 새로운 state에 들어갈 값을 지정해서 넣어주는 방법도 있다.

---

step 3. Arrow Function

< T >안의 T는 'type variable'로 함수에서 전달되는 인자의 type을 설명한다. < element > 로 해줘도 되고 원하는 이름을 붙이면 된다. 나중에 함수가 호출될 때 type이 지정되어 있으면 전달받는 인자와 결과값도 그 type을 가진다는 의미이다.

const fn명 = <Type> (arr: Type[]):Type => {
	return sth;
};


((아래의 코드를 참고하면))
const l2 = last<string> (["a","b","c"]);

Type이 string으로 지정받았고 인자인 []도 string array고 리턴값도 string 타입이 출력된다.

그래서 아래의 경우를 보면, 인자가 [1,2,3]인 number array이므로 number라는 타입이 함수에 전달되고 결과값도 number로 나온다는 의미다.

인자를 두개 전달했을 때, 각각의 인자는 T 와 Y 타입을 가진다. 그래서

const v3 = makeArr("a", 5);

는 첫번째 인자 "a"가 string을, 두번째 인자 5가 number 타입을 갖겠다고 정의된 것이다.

이렇게 정의해도 같은 의미가 된다.

const v3 = makeArr<string, number>("a",5);

---

Enum (Enumeration)

With enums, TypeScript lets you define similar types statically yourself.

비슷한 종류의 member들을 묶어놓은 객체라고 생각하면 편하다.
Enum member은 name과 value값을 가지는데 string, number 등이 될 수 있다.
value는 때론 생략될 수 있는데 number값을 가질 경우는 자동적으로 0부터 +1씩 더해지는 값이 부여된다.

string과 number가 섞인 enum => " Heterogenous enum "