타입 조작하기

한 입 크기로 잘라먹는 타입스크립트 - 타입 조작하기


1. 타입 조작하기
기본타입, 별칭, 인터페이스로 만든 타입들을 타입스크립트의 특수한 문법을 이용하여 상황에 따라 다른 타입으로 변환하는 기능.

- 원래 존재하던 타입

interface {
    a: string;
    b: stirng;
    c: string;
}

 

- 새로운 타입

interface {
    a: string | number;
    b: stirng | number;
    c: string | number;
}

타입 조작하기 종류)
제네릭
V 인덱스드 엑세스 타입
V keyof 연산자
V Mapped(맵드) 타입
V 템플릿 리터럴 타입
조건부 타입

이번 섹션 8 에서 다룰 것들만 V 체크 표시.

1) 인덱스드 엑세스 타입
객체, 배열, 튜플 타입에서 특정 프로퍼티 혹은 요소의 타입을 추출하는 타입

2) keyof 연산자
특정 객체 타입으로부터 프로퍼티 키들을 모드 스트링 리터럴 유니온 타입으로 추출하는 연산자

3) Mapped(맵드) 타입
기존의 객체 타입으로부터 새로운 객체 타입을 만드는 타입

4) 템플릿 리터럴 타입
스트링 리터럴 타입을 기반으로 정해진 패턴의 문자열만 포함하는 타입


* 실습 환경설정
section8 폴더를 생성한 뒤, section7 폴더에서 사용했던 package-lock.json, package.json, tsconfig.json 파일을 복사하여 section8 폴더에 붙여넣는다.
이후 package.json 파일에서 'name' 부분 값을 'section8' 로 수정한다.

- package.json

{
  "name": "section8",
  ...
}

이후 터미널에서 'npm i' 명령어를 입력하여 package.json 의 'dependencies' 에 명시된 외부 패키지들을 일괄적으로 설치한다.

- Terminal

npm i

    added 2 packages, and audited 3 packages in 712ms

    found 0 vulnerabilities
    npm notice 
    npm notice New minor version of npm available! 10.2.3 -> 10.9.1
    npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.1
    npm notice Run npm install -g npm@10.9.1 to update!
    npm notice

이렇게 새로운 타입스크립트 프로젝트 세팅이 완료되었다.
이후 src 폴더를 생성하여 index.ts 파일을 만들어 제대로 동작하는지 테스트한다.
tsc 명령어를 이용하여 컴파일 후 컴파일된 자바스크립트 파일을 확인한다.

- index.ts

console.log('Hello TS');

- dist/index.js

console.log('Hello TS');
export {};

컴파일 결과를 node 로 실행하고 tsx 로 실행한다.

- Terminal

node dist/index.js
    Hello TS

tsx src/index.ts
    Hello TS

타입스크립트 패키지 초기설정을 완료했다.
실습 환경설정을 완료하였다.


참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런