README.md

TypeScript

$ mkdir ts-practice
$ cd ts-practice

npm install -g typescript

tsc --init

npm install --save typescript

TypeScript란?

타입스크립트는 자바스크립트의 확장된 언어로 자바스크립트에 "타입"을 부여한 언어다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다. (=컴파일)

TypeScript Handbook 한글 문서

왜 TypeScript?

타입스크립트는 특정 변수 또는 상수의 타입을 지정할 수 있고 사전에 지정한 타입이 아닌 값이 설정될 때 에러가 발생한다. 따라서 에러를 사전에 방지할 수 있다.

TypeScript 기본 타입

Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

Boolean

참과 거짓

let isLoggedIn: boolean = false;

Number

let num: number = 10;

String

let str: string = "hi";

Array

let arr: number[] = [1, 2, 3];

let arr: Array<number> = [1, 2, 3];

Tuple

배열의 길이가 고정되고 각각의 요소가 타입이 지정되어 있는 배열

let arr: [string, number] = ["hi", 10];

Enum

특정 값(상수)들의 집합을 의미한다.

enum Avengers {
  IronMan,
  Thor,
}
let hero: Avengers = Avengers.Capt;

Any

모든 타입에 대해 허용한다는 의미를 갖는다.

let str: any = "hi";

const product : any = {
  id: "1",
  name: "슬희",
  price: 129000,
  sizes: ["M", "L"]
};

const parsedProduct: {
  name: string;
  price: number;
} = JSON.parse(
  "{"name": "슬희", "price"; 12000}"
)

Void

변수에는 undefined와 null만 할당하고 함수에는 반환 값을 설정할 수 없는 타입이다.

let unuseful: void = undefined;
function notuse(): void {
  console.log("sth");
}

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.

function neverEnd(): never {
  while (true) {}
}

함수에서 타입 정의

타입스크립트를 사용할 때 배열의 내장함수를 사용할 때에도 타입 유추가 쉽다. 함수에서 아무것도 반환하지 않아야 한다면 반환 타입을 void로 설정하면 된다.

Interface

interface는 클래스 또는 객체를 위한 타입을 지정할 때 사용된다.

특정 조건을 준수해야 함을 명시할 때 interface를 사용한다. implements를 사용하여 해당 클래스가 특정 interface의 요구사항을 구현한다는 것을 명시한다.

일반 객체를 interface로 타입 설정하기

interface Person {
  name: string;
  age?: number;
}
interface Developer {
  name: string;
  age?: number;
  skills: string[];
}

Person과 Developer의 형태가 유사한 모습을 볼 수 있다.

interface Person {
  name: string;
  age?: number;
}
interface Developer extends Person {
  skills: string[];
}

이와 같이 extends해 상속 받을 수 있다.

물음표는 설정을 해도 되고 안해도 되는 값이라는 것을 의미한다.

React.FC

Don’t use FunctionComponent

/FC

type GreetingsProps = {
  name: string;
  children: React.ReactNode;
};

React.FC를 사용할 때 props 타입을 Generics로 넣어 사용한다. props에 기본적으로 children이 들어가 있는데 children이 있어야 하는 경우 없어야 하는 경우가 있다면 이에 대한 처리를 Props 타입 안에 children을 명시해야한다.

const Greetings: React.FC<GreetingsProps> = ({ name, mark }) => (
  <div>
    Hello, {name} {mark}
  </div>
);

Greetings.defaultProps = {
  mark: "!",
};

mark를 defaultProps로 넣었지만 오류가 뜬다.

const Greetings = ({ name, mark }: GreetingsProps) => (
  <div>
    Hello, {name} {mark}
  </div>
);

React.FC를 사용하지 않는다면 잘 작동한다.

이와 같은 이유로 현재는 React.FC를 사용하지 않는 것을 권장한다.

컴포넌트에 생략 할 수 있는 props 설정하기

component의 props 중 생략해도 되는 값이 있다면 물음표(?)를 사용한다.

type GreetingsProps = {
  name: string;
  mark: string;
  optional?: string;
};

컴포넌트에서 함수 타입의 props 받아오기

Greetings.tsx

type GreetingsProps = {
  name: string;
  mark: string;
  optional?: string;
  onClick: (name: string) => void; // 아무것도 반환하지 않는 함수
};

function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
  const handleClick = () => onClick(name);
  return (
    <div>
      Hello, {name} {mark}
      {optional && <p>{optional}</p>}
      <div>
        <button onClick={handleClick}>Click Me</button>
      </div>
    </div>
  );
}

App.tsx

const App: React.FC = () => {
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return <Greetings name="Hello" onClick={onClick} />;
};

Generics

제너릭은 타입스크립트에서 함수, 클래스, interface, type을 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법이다.

function merge<A, B>(a: A, b: B): A & B {
  return {
    ...a,
    ...b,
  };
}

const merged = merge({ foo: 1 }, { bar: 1 });

<타입 이름>을 넣어 사용하면 제너릭에 해당하는 타입에는 뭐든지 들어올 수 있고 사용할 때 타입이 깨지지 않는다.

Typescript에서 useState

useState를 사용할 때 제너릭을 사용하지 않아도 타입을 유추하기 때문에 생략 가능하다. 그러나 상태가 null일 수도 있고 아닐 수도 있을 때 제너릭을 사용하면 좋다.

type Information = { name: string; description: string };
const [info, setInformation] = useState<Information | null>(null);

---

enum

enum Job {
  Knight = "Knight",
  Archer = "Archer",
  Mage = "Mage",
  Priest = "Priest",
  Thief = "Thief",
}

enum Size {
  S = "S",
  M = "M",
  L = "L",
  XL = "XL",
}

let product: {
  sizes: Size[];
} = {
  sizes: [Size.M, Size.S],
};

타입 별칭

type Cart = string[];

const cart : Cart = {
  "슬희",
  "슬",
};

interface User {
  cart: Cart;
}

interface를 권장

Union 타입

~ 이거나 (|)

if문, in 연산자 활용 가능