[TS] typescript 공부하기_2

해달·2022년 3월 13일

인프런 캡틴판교님의 타입스크립트 입문 - 기초부터 실전까지 강의를 들으며 공부한 내용입니다.

promise를 return 하는 함수의 경우에는 아래와 같이 제네릭을 이용하여
타입을 지정해준다
<반환하는 값에 대한 타입>

function fetchItems: Promise<T>{
  ...,
}

function fetchItems: Promise<Contact[]>{
  ...,
}

리턴이 없는 함수

function fetchDate: void

enum사용

enum PhoneType{
  Home = 'home',
  Office = 'office',
  Studio = 'studio'
}

  findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] { // enum사용
    return this.contacts.filter(
      contact => contact.phones[phoneType].num === phoneNumber
    );
  }

타입추론

변수를 선언하거나 초기화 할 때 추론된다.
이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때도 타입추론이 일어난다

제네릭의 값을 타입스크립트 내부적으로 추론해서 그 변수에 필요한 속성들의 타입까지 같이 보장해준다 가 타입추론의 기본적인 방식이다
//타입 추론 기본 2

interface Dropdown<T> {
  value: T;
  title: string;
}

var shopppingItem: Dropdown<string> = {
  value: 'abc',
  title: 'hello'
}

타입 추론 기본 3

넘긴 <string> 이 extends에 K로도 전달되고 tag의 K도 전달된다

interface Dropdown<T> {
  value: T;
  title: string;
}

interface DetailedDropdown<K> extends Dropdown<K> {
  description: string;
  tag: K;
}

var detailedItem: DetailedDropdown<string>

타입 가드

타입가드를 이용해서 정확하게 어떤것인지 확인 할 수 있으면 불러올 수 있는 값을 명확하게 알 수 있다

interface Developer{
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

if((tony as Developer).skill) { // (tony as Developer) 단언하는 부분
  var skill = (tony as Developer).skill
  console.log(skill)
} else if ((tony as Person).age){
  var age = (tony as Person).age;
  console.log(age)
}

복잡하게 사용되는 코드 아래와 같이 사용할 수 있다

// 타입 가드 정의
function isDeveloper(target: Developer | Person): target is Developer { // 유니온으로 디벨로퍼랑 펄슨을 동일하게 받을 수 있게 한다 타입이 2개다 포함되어있기때문에 유니온으로 적용
  return (target as Developer).skill !== undefined;
}

if(isDeveloper(tony)) {
  tony.skill // 바로 조회가능 , age 자동완성 x
} else {
  tony.age // skill 자동완성 x
}

타입호환

반환타입 자체가 많은 옵션들을 가져가는 함수는 구조적으로 크다
더 넓은 범위에 있는 함수는
더 좁은 범위의 함수는 충분히 넓은 범위의 함수에서 호환이 가능하다

TS 모듈

js 와 같이 import , export를 통해 사용할 수 있다

//export
export interface Todo {
  title: string;
  checked: boolean;
}

// import
import { Todo } from './types'

var item: Todo = {
  title: '할일 1',
  checked: false,
}