1. Udemy(7)

TypeScript

• JavaScript를 기반으로 하는 프로그래밍 언어, JavaScript의 상위집합이며 정적타이핑을 지원한다
• TypeScript코드는 브라우저에서 실행되지 않는다 따라서 TypeScript를 JavaScript로 컴파일 해야하고 컴파일 과정에서 모든 유형주석이 제거된다
  • 설치 : npm install || yarn add typescript
  • 컴파일러 호출 : tsc || npx tsc(로컬 설치시)

Type Inference

• TypeScript는 타입을 추론한다 따라서 타입을 명시적으로 언급하지 않은 경우 어떤 타입이 사용되는지 확인하고 해당 타입을 사용한다
• 그렇기때문에 다른 유형을 할당하려고 하면 오류가 발생한다
• 타입 추론기능을 수용하는 것은 좋은 습관으로 간주되므로 불필요하게 유형을 지정하지 않아도 된다(중복)

// 예시

let age = 12;
age = "12"; // => Error! 타입을 추론해서 number타입을 사용했기때문에 오류발생

let age: number = 12;  // => 중복이기 때문에 불필요하게 유형을 지정할 필요없다

Union Type

• 파이프기호를 이용하여 다른 유형을 추가할 수 있다
• 타입 any를 사용하는 경우 마치 자바스크립트로 작성하는 것처럼 동작을 하고
  유니온 타입을 사용하면 타입스크립트의 이점을 살리면서 코딩을 할 수 있다

// 예시

let course : string | number = 'React - The Complete Guide';
course = 12345;

Type Aliases

• type 키워드를 사용하여 타입의 새로운 이름을 생성할 수 있고 프로그래머의 의도를 보다 명확하게 나타낼 수 있다
• custom type이라고 부르기도한다
• 별칭은 단순히 새로운 이름일 뿐이고 실제로 새로운 타입이 생성되는 것이 아니다 따라서 타입과 관련된 에러가 발생했을 시 타입 별칭을 보여주지 않고 실제 타입을 보여준다

// 예시

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

let person: Person;

Interface

• Interface 키워드를 사용하여 타입에 새로운 이름을 생성하는 점에서 Type Aliases와 비슷하다
• Interface는 동일한 이름으로 여러 번 선언해도 컴파일 시점에 합칠 수 있다 이런 동작을 선언 병합(Declaration Merging)이라고 한다
• interface는 실제로 새 타입을 생성하고 관련 타입 에러에는 인터페이스 쪽이 문제가 있다고 가르쳐준다
• interface는 extends 키워드로 확장할 수 있지만, 타입 별칭은 그렇지 않다.
• Type Aliases을 이용해서 기본타입, 배열과 튜플, 유니온 타입 등에 새로운 이름을 붙일 수 있지만 인터페이스는 불가능하다
• 공식 문서에서는 가능한 Interface 사용을 권장하고, 기본 타입 혹은 튜플 타입을 반드시 써야 되는 상황이면 Type Alias를 사용하도록 권장하고 있다

Generics Type

• 파라미터의 타입이 정해지지 않은 경우에 제네릭을 사용해 담기는 값에 따라 타입을 유추할 수 있다
• 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다
• 만약 여러가지 타입을 허용하고 싶다면 any를 사용하면 되지만 any는 타입 검사를 하지 않기 때문에 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지 알 수가 없다
• 제네릭에서 T는 Type의 약자로 제네릭을 선언할 때 관용적으로 사용되는 식별자로 타입 변수(Type variables) 또는 타입 파라미터(Type parameter)라고 한다

// 예시

function insertAtBeginning<T>(array: T[], value: T) {
  const newArray = [value, ...array];
  return newArray;
}

const demoArray = [1, 2, 3];

// 인수에 의해 타입 매개변수가 결정된다
const numberArray = insertAtBeginning(demoArray, -1); // [-1, 1, 2, 3]
const stringArray = insertAtBeginning(['a', 'b', 'c'], 'd');

React with TypeScript

• 설치 : npx create-react-app 프로젝트 이름 --template typescript
• 리액트에는 jsx문법을 사용하기 때문에 typescript를 사용할때 확장자명을 ts가 아닌 tsx로 사용한다 (컴포넌트를 생성하는게 아니라면 ts로 작성해도 된다)

React.FC

• props의 타입을 Generics 로 넣어서 사용한다
• React.FC를 사용하면 props에 기본적으로 children 이 들어가있고, 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다

// 예시

const Todos: React.FC<{ items: string[] }> = props => {
  return (
    <ul>
      {props.items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

// React.FC 사용 안했을 때
const Todos = (props: { items: string[] }) => {
  return (
    <ul>
      {props.items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

Non-null assertion operator

• 뒤에 느낌표를 붙이면 앞의 값이 확실히 null이나 undefined가 아니라는 걸 알린다
• null일 수 없다고 100% 확신하는 경우에만 사용한다