타입스크립트 사용법

📌 타입스크립트 레파지토리 생성하기

yarn create react-app [폴더명] --template typescript

📌 작성하는 모든 것에 타입 설정하기 (변수, 함수의 매개변수, 리턴값..)

✔ 기본 타입 ( boolean, string, number, Array, Tuple, Enum, Any, Object, Void, Never, Null and Undefined)

// 배열
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

// 튜플: 요소의 타입과 개수가 고정된 배열을 표현
let x: [string, number];
x = ["hello", 10]; // 성공
x = [10, "hello"]; // 오류

// 이넘: 특정 값(상수)들의 집합
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;
// 인덱스값으로 불러오기 가능, 특정 인덱스값 지정가능
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[3]; // IronMan

❓ enum과 객체의 차이
- 객체는 속성을 자유로이 변경할 수 있지만 enum의 속성은 변경할 수 없다.
- 객체의 속성은 리터럴의 타입보다 더 넓은 타입으로 타입 추론이 이루어지고, enum은 항상 리터럴 타입이 사용된다.
- 객체의 속성 값으로는 JavaScript가 허용하는 모든 값이 올 수 있지만, enum의 속성 값으로는 문자열 또는 숫자만 허용된다.

📍 같은 ‘종류’를 나타내는 여러 개의 숫자 혹은 문자열을 다뤄야 할 때, 각각 이름을 붙여서 코드의 가독성을 높이고 싶다면 enum을 사용. 그 외의 경우에는 상수, 배열, 객체 등을 사용하기

✔ 여러 개의 타입을 설정해야 할 경우 interface 이용하기 (이름 앞에 I를 붙여 interface 컴포넌트임을 표현)

export interface ITask{
taskName: string;
deadline: number;
}

✔ 부모컴포넌트로부터 props를 받아오는 경우, 자식 컴포넌트에서 타입 설정

interface Props{
task: string,
onChange(): void,
onRemove(deleteName:string): void
}

const ChildComponent = ({task, onChange, onRemove}:Props) => {...}

✔ 프로퍼티 선언 시 이름 끝에 ? 를 붙이면 선택적 프로퍼티, 필수입력값이 아니게 됨
✔ 이름 앞에 readonly를 붙이면 읽기전용 프로퍼티, 객체가 처음 생성될 때만 수정 가능

interface Props{
taskName?: string;
readonly deadline: number;
}

✔ 타입별칭(Type Aliases): 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수

type MyName = string;
const name: MyName = 'capt'; //사용예제
type Developer = {
  name: string;
  skill: string;
}

❓ type과 interface의 차이
- 인터페이스는 확장이 가능하지만 타입 별칭은 확장이 불가능
- 가능한 type 보다는 interface로 선언해서 사용하기

✔ 리터럴 타입, 유니언 타입, 타입별칭을 결합해서 사용 가능

type Easing = "ease-in" | "ease-out" | "ease-in-out";
Easing 값으로 "ease-in" || "ease-out" || "ease-in-out" 이 아닌 다른 값이 올 경우 오류발생

✔ 제네릭(Generics) : 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법

function wrap<T>(param: T) {
  return {
    param
  }
}
const wrapped = wrap(10);

📌 설정한 프로퍼티 이외에 다른 프로퍼티를 추가할 경우 발생하는 오류 방지하기

✔ as SquareConfig 추가하기

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

✔ - 문자열 인덱스 서명 추가하기

interface Props{
taskName?: string;
deadline? number;
[propName: string] : any;
}

📢 TypeScript Playground