React with TypeScript - 타입 지정

1. 기존의 React 프로젝트에 TS를 추가하는 방법
   $ npm i typescript @types/node @types/react @types/react-dom @types/jest
   $ yarn add typescript @types/node @types/react @types/react-dom @types/jest

2. 처음 react프로젝트를 시작할 때 TS와 함께 시작하는 방법
   $ npx create-react-app my-app --template typescript
   $ yarn create react-app my-app --templage typescript

이 때도 동일하게 npm start/yarn start로 구동시킬 수 있지만, ts를 따로 컴파일하지 않아도 되게끔 TS컴파일링이 자동으로 포함되어 구동된다.

npx tsc (파일명.ts) => typescript 컴파일

types
원시타입: number, string, boolean, null, undefined
객체타입: array, function, object

*** number <-> Number
number: 타입
Number: 객체

let age: number;
let userName: string;
let isTrue: boolean;
let hobbies: string[]; // "hobbies는 요소가 문자열로 이루어진 배열이다"

객체 타입 정의(객체의 구조 정의)

let person: {
  name: string;
  age: number;
};

let people: {
  name: string;
  age: number;
}[]; //"people은 이러한 구조의 객체로 이루어진 배열이다"

타입 추론
typescript는 타입을 명시해주지 않아도 최대한 어디에 어떤 타입이 들어가야 할지 추론해서 알려준다.

let userName = 'yoyongjin'; // 할당까지만 해줘도 userName은  string타입으로 정해진다.

Union
하나의 변수에 여러가지 타입을 할당 가능하게 할 수 있다.

let userName: string | number = 'yoyongjin'; // "userName에는 string or number 타입의 값이 들어갈 수 있다."(3개 이상도 가능) ex) string | string[] | number ...

Type Alias
type 키워드를 사용해 앞으로 만들 값의 type을 미리 변수처럼 지정해줄수있다.

type Person = {
  name: string;
  age: number;
};

let person: Person;
let people: Person[];

function & types

const add = (a: number, b: number) => {
  return a + b; // 여기서 return값의 타입도 number로 유추한다.
};

void

const logOutput = (value: any) {
  console.log(value);
};

VSCode에서 logOutput 함수에 커서를 올려보면 void라는 단어가 보인다. void는 함수에 반환값이 없다는 것을 의미한다. 따라서 void는 함수와 함께 쓰이는 null이나 undefined로 생각하면 된다.

Generics
타입들관의 관계?를 나타낼 수 있다.

  const insertFront<T>(array: T[]), value: T) => {
    const newAray = [value, ...array];
    return newArray;
  }; // array와 value에 타입을 명시해주지는 않앗지만 두 가지 값이 '같은'타입을 갖는다는 것을 명시해줄 수 있다.
const demoArray = [1, 2, 3];
const updatedArray = insertFront(demoArray, -1); // [-1, 1, 2, 3]
const stringArray = insertFront(['a', 'b', 'c'], 'd');

updatedArray[0].split('');

여기에서 는 타입들관의 관계에 대해 typescript에게 알려주었기 때문에 array와 value 둘 중 하나의 값에 대한 타입 추론이 가능해질 때, 로 설정되어있는 타입을 가지는 모든 변수와 그들로 인한 결과물 등에 대한 타입 추론이 가능해 진다.
*** Array 타입은 그 요소에 대한 타입도 설명되는 경우에만 의미가 있으므로 Array 타입도 엄밀히 말하면 Generic 유형이다.

React.FC

const Todos: React.FC = (props) => {};

type FC<P = {}> = FunctionComponent

;

const Todos = (props) => {
  return ( 
  	<ul>
      {}
  	</ul>
  )  
};

react 에서는 이런 식으로 Functional Components에 props가 전달되고, 그 자식들은 props.children의 형태로 나타낼 수 있다. 하지만 타입스크립트에서는 props에 대한 타입을 명시해주어야 하고, 모든 props를 전달받는 components에 타입지정을 해야되는 번거로운 일이 생긴다. 이를 보완하기 위해 react-typescript는 React.FC Generic Type을 제공한다.

const Todos: React.FC = (props) => {
	return(
	  <ul>
        {}
	  </ul>
  )
}

이렇게 type을 React.FC로 지정해주면 react-typescript 는 props를 리액트에서처럼 사용할 수 있도록 준비해준다.(커서를 올려보면 props의 프로퍼티로 children이 자리하고있다!) - React.FC는 Generic 타입이다.

Typescript에서는 변수 뒤에 느낌표(!)를 붙여 "Null이 아닌 어선셜 연산자(Non-null assertion operator)" 또는 "확정 할당 어선셜(Definite Assignment Assertions)" 용도로 사용할 수 있다.
Non-null assertion operator는 피연산자가 null값이 아니라고 컴파일러에게 전달해 일시적으로 Null 제약조건을 완화한다.(값이 무조건! 할당되어있다고 컴파일러에게 알려준다.)
Definite Assignment Assertions도 비슷하게 컴파일러에게 특정 변수에 값이 무조건 할당되어있다고 알려주고, 값이 없어도 변수 또는 객체를 사용할 수 있게 해준다.

TS type는 컴파일 중에 확인되고, JS 타입은 런타임중에 확인된다.