Typescript

지니씨·2023년 8월 2일
0

프론트엔드

목록 보기
85/87

쉽게 시작하는 타입스크립트 (https://joshua1988.github.io/ts/intro.html)

  • any라는 타입은 타입 검사를 하지 않음(어떤 타입이 사용되는지 추적 불가), 사용 지양

Interface

  • 옵션속성
    interface 인터페이스_이름 {
      속성?: 타입;
    }

Union Type, Enum, Intersection Type
Union Type

  • 변수의 값이 여러 타입을 가지는 경우 주로 사용
  • 주로 문자열 리터럴에서 사용
  • 컴파일 타임에만 존재
  • 모든 타입의 열거형
type Color = "Red" | "Black" | "White";
console.log(Color); // error

열거형(enum)

  • 특정 값들의 집합을 의미하는 자료형
  • 컴파일 타임, 런타임에 존재
  • 문자열 또는 숫자의 열거형
enum Color {
  Red,
  Green,
  Blue,
}

console.log(Color); // no error

Intersection Type

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer; // { name: string; age: number; skill: string; }

제네릭(Generics)

function logText<T>(text: T): T {
  return text;
}

타입추론

  • 타입 스크립트가 코드를 해석해 나가는 동작

타입호환

  • 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미

타입별칭

  • 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수
  • 확장이 불가해 가능하면 type보다는 interface로 선언하여 사용하는 것 권장

타입단언

  • 개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식
  • 타입스크립트 컴파일러보다 개발자가 더 해당 타입을 잘 알고 있을 때나 자바스크립트 기반 코드에 점진적으로 타입스크립트를 적용할 때 사용
  • as 키워드 사용

Usage
https://joshua1988.github.io/ts/usage/modules.html => ING


https://www.typescriptlang.org/docs/handbook/intro.html

tsconfig

tsconfig 파일 분리

  • Vue.js 프로젝트의 경우 애플리케이션 코드와 노드 서버 코드가 분리되어 있어서, 이 두가지 환경에서 서로 다른 TypeScript 설정이 필요할 수 있음
  • 빌드 시간 최적화

compilerOptions.moduleResolution
TypeScript 컴파일러가 모듈을 해석하는 방법을 설정하는 옵션입니다.
이 옵션은 주로 모듈을 찾는 방식과 관련하여 사용됩니다.

profile
하루 모아 평생 🧚🏻

0개의 댓글