데브코스 63일차 TIL : 타입스크립트 시작하기 및 Interface

데브코스 강의로 배우는 타입스크립트, 이전 프로젝트에서 한번 맛봤기 때문에 부담없이 들을 수 있었다!

타입스크립트 실행하기

create react-app 으로 타입스크립트 실행하기

npx create react-app "프로젝트명" --template typescript

yarn create react-app typescript-todo --template typescript

타입스크립트 live server로 실행하기

최상단 폴더에 tsconfig.json파일 생성

// tsconfig.json
{
  "include": ["src/**/*.ts"], //컴파일할 파일 경로
  "exclude": ["node_modules"], //컴파일 대상을 제외
  "compilerOptions": { // 실제 컴파일시 적용되는 옵션
    "module": "Commonjs", //모듈 방식
    "rootDir": "src", // 시작 루트폴더
    "outDir": "dist", // 컴파일 후 js파일이 생성될 폴더명
    "target": "es5", // 어떤 버전으로 컴파일 할 지
		"sourceMap": true // 개발자도구에서 확장자의 실제 소스코드(ts)를 볼 수 있도록
  }
}

이후 콘솔창에서 tsc 입력시, dist폴더와 함께 폴더 내에 js파일이 생성된다.

• tsc -w: ts파일 변경시마다 자동으로 컴파일
• tsc app.ts: app.ts파일을 컴파일한다.

Interface

선택속성(optional) ?:

?: 타입지정 시 있어도 되고 없어도 되는 값

interface ComPany {
  name: string;
  age: number;
  address?: string;
}

const dev: ComPany = {
  name: "devCorse, Inc",
  age: 3,
};

console.log(person?.age); // age가 없으면 자동으로 undefinded 출력
console.log(person?.age); // age가 없으면 자동으로 undefinded 출력

Generic

// Generic
interface Value<T> {
  value: T;
}
const value: Value<number> = {
  value: 1,
};
function logText<T>(text: T): T {
  return text;
}
console.log(logText("5")); // string
console.log(logText(5)); // number

// 같은 의미의 코드
let str: <T>(text: T) => T = logText; 
let string: { <T>(text: T): T } = logText;

넘긴 텍스트의 타입으로 제네릭 타입이 설정된다 (타입추론)

Partial, Required

interface User {
  id: number;
  name: string;
  age: number;
  address: string;
  createdAt?: string;
  updatedAt?: string;
}

Partial: 모든 필드 Optional const parial: Partial<User> = { createdAt: "2", };

Required: 모든 필드 Required

const required: Required<User> = {
  id: 1,
  name: "Lee",
  age: 0,
  address: "Seoul",
  createdAt: "필수",
  updatedAt: "필수",
};

Pick, Omit

Pick: 특정 필드만 사용

const pick: Pick<User, "name" | "age"> = { name: "", age: 3, };

Omit: 특정 필드만 제외하고 사용

const omit: Omit<User, "id" | "createdAt"> = { name: "", age: 3, address: "", };

Mixed

const mixed: Omit<User, "id" | "age" | "address"> & Pick<Partial<User>, "age"> =
  {
    name: "",
    age: 3,
  };

Mixed: Interface 여러개 동시 사용

extends

interface Time {
  hour: number;
  minute: number;
}

interface DateTime extends Time {
  month: number;
  day: number;
}

interface TimeFormat extends Pick<Time, 'hour'> {
  ampm: number;
}

extends: 인터페이스 상속