기억보다 기록을

[TypeScript] chap.2

 

 

 

추가 Narrowing

1. undefined & null 처리 narrowing

- && 연산자

1 && null && 3   // null이 남음
undefined && '안녕' && 100  // undefined 남음

&& 값은 and값 말고 true/false 대신 자료형을 넣게되면 falsy 값을 찾아주는데 falsy값이란 false와 비슷한 null, undefined, NaN 등의 값을 의미한다.

 

function printAll(strs: string | undefined) {
  if (strs && typeof strs === "string") {  
    console.log(s);
  } 
}

따라서, 해당 함수에서 strs 값이 undefined값이 나온다면 console.log()가 실행되지 않는다.

 

 

2. 여러가지 object자료 narrowing

- in 연산자

type Fish = { swim: string };
type Bird = { fly: string };
function 함수(animal: Fish | Bird) {
  if ("swim" in animal) { // fly도 in을 쓸 수 있다.
    return animal.swim
  }
  return animal.fly
}

해당 object의 유니크한 속성을 가지고 있다면 그 속성으로 narrowing을 할 수 있다. (해당 object의 키값 in 자료형)의 형태로 쓰면되고 서로 배타적인 속성이 있어야한다.

 

 

- instanceof

let 날짜 = new Date();
if (날짜 instanceof Date){
  console.log('참이에요')
}

어떤 클래스로부터 new 키워드로 생성된 object는 instanceof를 통해 부모 클래스가 누군지 검사할 수 있는데 그것으로 narrowing을 할 수 있다.

 

 

- literal type

type Car = {
  wheel : '4개',
  color : string
}
type Bike = {
  wheel : '2개',
  color : string
}

function 함수(x : Car | Bike){
  if (x.wheel === '4개'){
    console.log('the car is ' + x.color)
  } else {
    console.log('the bike is ' + x.color)
  }
}

typeof 연산자를 사용하면 같은 object 타입이기때문에 구분할 수 없고, in은 해당 타입에 배타적인 속성이 없기때문에 마찬가지로 구분할 수 없다.

 

이럴때 literal type을 사용한다. Car 타입의 wheel은 무조건 4개, Bike 타입의 wheel은 무조건 2개가 나온다. 이것을 가지고 narrowing이 가능하다.

 

 

 

Never

함수에서 사용되는 return 타입으로 never 타입이 있다.

 

1. 절대 return을 하지 않아야한다.

2. 함수 실행이 끝나지 않아야된다. (endpoint가 없어야 한다)

 

function 함수(){
  console.log(123)
} // never 붙일 수 없음 => return undefined

///////////////////////

function 함수() :never{
  while ( true ) { // 무한반복
    console.log(123)
  }
} // never 가능

function 함수() :never{
  throw new Error('에러메세지') // 에러 강제 발생
}// never 가능

 

 

- 파라미터가 never 타입이 되는 경우

function 함수(parameter: string) {
  if ( typeof parameter === "string"){
    parameter + 1;
  } else {
    parameter;
  }
}

함수에서 타입을 string으로 정해 놓았기 때문에 무조건 string 타입이 들어오기 때문에 if문으로 type 체크를 하여 string을 제외한 타입이 들어오는 경우는 일어날 수 없으므로 never 타입이 출력된다. never 타입은 일어날 수 없는 경우, 일어나면 안되는 경우를 보여줄 때 나타난다.

 

 

 

public & private

class 안에서 public이나 private 등의 접근제한자를 통해 데이터 사용 제한을 조정할 수 있다.

 

* public

class User {
  public name: string;

  constructor(){
    this.name = 'kim';
  }
}

let 유저1 = new User();
유저1.name = 'park';  //가능

public은 어디서든 마음대로 사용하고 수정이 가능하다.

 

 

* private

class User {
  public name :string;
  private familyName :string;  

  constructor(){
    this.name = 'kim';
    let hello = this.familyName + '안뇽'; //가능
  }
  
  changeSecret(){
    this.familyName = 'park';
  }

}

let 유저1 = new User();
유저1.name = 'park';  //가능
유저1.familyName = 456; //에러남

private은 오로지 class{} 안에서만 수정이 가능하다. 따라서 private 제한자가 붙은 필드를 수정한다면 class함수 안에서 수정하는 메서드를 만들어 사용하면 된다. (ex. changeSecret())

 

 

- 추가 기능

class Person { 
  name;
  constructor ( name :string ){  
    this.name = name;
  } 
}
let 사람1 = new Person('john')

////////////////////////////////////////

class Person { 
  constructor ( public name :string ){  
  
  } 
}
let 사람1 = new Person('john')

public이나 private같은 접근 제한자를 constructor에 쓰면 필드나 constructor안에 this.속성 등을 생략할 수 있다.

 

 

 

protected & static

* protected

class User {
  protected x = 10;
}

class NewUser extends User {
  doThis(){
    this.x = 20;
  }
}

class 간에 extends로 상속을 받았을 때, 상속 받은 class끼리 공유할 수 있는 속성이라면 protected를, 해당 class에서만 쓸 수 있는 속성을 만들고싶다면 private을 쓴다.

 

 

* static

class에 정의되는 필드나 메서드는 class로부터 생성되는 object(instance)에 부여되지만 static 키워드를 사용하면 class에 직접 변수나 함수를 부여할 수 있다.

class User {
  static x = 10;
  y = 20;
}

let john = new User();
john.x //불가능
User.x //가능

 

ex)

class User { 
  static skill = 'js'; 
  intro = User.skill + '전문가입니다'
}

var 철수 = new User();
console.log(철수); // js전문가입니다.

User.skill = 'python';
var 민수 = new User();
console.log(민수); // python전문가입니다.

class 안에 간단한 메모나, 기본 설정값을 입력하거나, class로부터 생성되는 object가 사용할 필요 없는 변수들을 만들때 사용한다.

 

 

 

import & export & namespace

* import & export

// (a.ts)
export var 이름 = 'kim';
export var 나이 = 30;

// (b.ts)
import {이름, 나이} from './a' // ts는 확장자를 안붙임
console.log(이름)

 

 

- type도 가능하다

// (a.ts)
export type Name = string | boolean;
export type Age = (a :number) => number;

// (b.ts)
import {Name, Age} from './a'
let 이름 :Name = 'kim';
let 함수 :Age = (a) => { return a + 10 }

 

 

* namespace

import와 export가 없을 때에 여러개의 파일을 첨부(<script src="...">)하는 방식으로 사용 했는데 변수명이 겹치는 문제로 인해서 namespace를 사용했다.

// (a.ts)
namespace MyNamespace {
  export interface PersonInterface { age : number };
  export type NameType = number | string;
}

// (b.ts)
/// <reference path="./a.ts" /> // import 대신 namespace에선 이게 필요하다
let 이름 :MyNamespace.NameType = '민수';
let 나이 :MyNamespace.PersonInterface = { age : 10 };

예전엔 namespace 키워드 대신 module 키워드를 사용했는데 namespace로 변경되었다.

 

 

 

 

 

Generic

타입스크립트는 unknown, any, union 타입이 들어왔을 때, 일련의 과정을 거칠 때 타입을 알아서 변경해주지 않기때문에 문제가 생긴다. 해결책은 1) narrowing을 하거나 2) 애초에 타입을 파라미터로 함수에 미리 입력하는 방법이 있다. 2)의 경우를 generic이라고 한다.

 

 

* generic

function 함수<T>(x: T[]) :T {
  return x[0];
}

let a = 함수<number>([4,2])
let b = 함수<string>(['kim', 'park'])

함수를 실행할 때, generic(<>)을 통해 실행하는 함수의 타입을 동적으로 지정할 수 있다. <T>와 같은 generic 타입은 여러개 선언도 가능하다.

 

function 함수<T>(x: T) {
  return x - 1 // 에러
}

let a = 함수<number>(100)

함수를 generic으로 설정 했을 때, -1 연산을 하게되면 에러가 난다. 이유는 generic <T>에 들어가는 타입이 number 말고도 string 등 -1 연산이 불가능한 타입을 넣을 수 있기때문에 1) narrowing을 하거나 2) 타입을 미리 제한 해야한다.

 

 

* constraints

2)에 해당하는 generic 타입을 제한하는 것이다.

function 함수<T extends number>(x: T) {
  return x - 1
}

let a = 함수<number>(100) //잘됩니다

extends를 사용하면 generic 타입을 받아오는 부분을 입력한 형식으로 제한할 수 있다. (class나 interface에서 쓰는 extends 와는 살짝 다르다) 다른 extends는 상속, 복사의 역할을 하지만 여기서의 extends는 체크하는 역할을 한다.

 

또한 커스텀 타입도 extends 가능하다.

interface lengthCheck {
  length : number
}
function 함수<T extends lengthCheck>(x: T) {
  return x.length
}

let a = 함수<string>('hello')  //가능
let a = 함수<number>(1234) //에러남

length의 타입은 number이고 string의 length는 해당 문자열의 갯수를, array에서의 length는 배열의 갯수를 가져오기 때문에 사용할 수 있지만 number는 length를 사용할 수 없다.

 

 

 

react typescript

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

 

* .tsx

- ts랑 똑같은데 jsx문법을 지원한다. 함수, 컴포넌트, state, props 타입체크를 해야한다.

 

1. 일반 변수, 함수 타입지정

- 일반 타입스크립트처러 함.

 

 

2. JSX 타입지정

// 타입 지정
let 박스 :JSX.Element = <div></div>
let 버튼 :JSX.Element = <button></button>

// 더 정확히 타입 지정
let 박스 :JSX.IntrinsicElements['div'] = React.createElement('div'); // 함수
let 버튼 :JSX.IntrinsicElements['button'] = <button></button>; // JSX

HTML태그는 JSX.Element라는 타입을 쓰면되고 정확히 지정하려면 JSX.IntrinsicElements라는 타입을 사용하면된다.

 

 

3. function component 타입지정

type AppProps = {
  name: string;
}; 

function App (props: AppProps) :JSX.Element { // 생략해도 알아서 지정
  return (
    <div>{message}</div>
  )
}

props 파라미터가 어떻게 생겼는지 타입지정 하면되고 return은 JSX.Element 이지만 자동으로 지정된다.

 

 

4. state 문법 사용시 타입지정

const [user, setUser] = useState<string | null>('kim');

state 만들 땐 자동으로 타입이 할당되지만 나중에 타입이 변하는 경우가 생긴다면 generic을 통해 타입을 집어넣으면 된다.

 

 

5. type assertion 문법 사용시

let code: any = 123; 
let employeeCode = <number> code; //안됩니다

리액트에서는 컴포넌트와 혼동될 수 있으므로 <>는 안되고 as만 사용할 수 있지만 웬만하면 안쓰는게 좋다.

 

 

 

Redux

1. state와 reducer 만들어서 쓰는 방법 (전통 방식)

index.tsx에 설정하는 부분:

import { Provider } from 'react-redux';
import { createStore } from 'redux';

interface Counter {
  count : number
}

const 초기값 :Counter  = { count: 0 }; // 변수 타입 지정

function reducer(state = 초기값, action :any) { // 값 변경하는 부분 타입 지정
  if (action.type === '증가') {
    return { count : state.count + 1 }
  } else if (action.type === '감소'){
    return { count : state.count - 1 }
  } else {
    return initialState
  }
}

const store = createStore(reducer);

// store의 타입 미리 export 해두기 
export type RootState = ReturnType<typeof store.getState>

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

state에는 기본적으로 타입을 지정한 변수를 받아오기 때문에 따로 타입 설정이 필요 없다. 변수(state 초기값)나 함수(reducer) 등에 타입을 지정하고 action은 값 변경하는 부분의 타입을 지정하면 된다.

 

App.tsx에 받아오는 부분:

import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { Dispatch } from 'redux'
import {RootState} from './index'

function App() {
  const 꺼내온거 = useSelector( (state :RootState) => state );
  const dispatch :Dispatch = useDispatch();

  return (
    <div className="App">
      { 꺼내온거.count }
      <button onClick={()=>{dispatch({type : '증가'})}}>버튼</button>
      <Profile name="kim"></Profile>
    </div>
  );
}

1) react-redux의 useSelector를 받아오는 부분의 타입을 지정한다. 받아오는 타입을 매번 손수 지정하기 귀찮으니 index.tsx에 있는 export해서 가져올 수 있다. (export type RootState = ReturnType<typeof store.getState> 부분)

2) useDispatch에서 데이터를 보내는데 dispatch의 타입으로 redux에서 import한 타입인 Dispatch를 사용해야한다. 안쓰면 에러남.

 

 

2. redux toolkit 쓰는 방법 (요즘 방식)

npm install @reduxjs/toolkit

신식 redux를 사용하려면 해당 툴킷을 설치하면 된다.

 

index.tsx에 설정하는 부분:

import { createSlice, configureStore, PayloadAction } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const 초기값 = { count: 0, user : 'kim' };

const counterSlice = createSlice({ // state + reducer 하는 부분
  name: 'counter',
  initialState : 초기값,
  reducers: {
    increment (state){
      state.count += 1
    },
    decrement (state){
      state.count -= 1
    },
    incrementByAmount (state, action :PayloadAction<number>){
      state.count += action.payload
    }
  }
})

let store = configureStore({ // slice로 만든 부분 저장
  reducer: {
    counter1 : counterSlice.reducer
  }
})

//state 타입을 export 해두는건데 나중에 쓸 데가 있음
export type RootState = ReturnType<typeof store.getState>

//수정방법 만든거 export
export let {increment, decrement, incrementByAmount} = counterSlice.actions

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

1) state 초기값 타입지정 하기

2) reducer 안의 action 파라미터 타입지정하기

 - action 타입은 PayloadAction이라는 Type을 import 해와서 해당하는 자료의 타입을 generic해서 타입지정 할수 있다.

 

App.tsx에 받아오는 부분:

import { useDispatch, useSelector } from 'react-redux'
import {RootState, increment} from './index'

function App() {

  const 꺼내온거 = useSelector( (state :RootState) => state);
  const dispatch = useDispatch();

  return (
    <div className="App">
      {꺼내온거.counter1.count}
      <button onClick={()=>{dispatch(increment())}}>버튼</button>
    </div>
  );
}

1) useSelector() 안에 파라미터에 타입지정 해서 가져오기

 - state의 타입을 따로 지정하거나 index.tsx에 해당 state의 타입으로 미리 만든 RootState라는 타입을 export해놓고 import해서 타입으로 사용한다.

2) useDispatch()에 타입 지정해서 보내기

 - 공식 문서에는 index.tsx에서 (export type AppDispatch = typeof store.dispatch)을 설정하고 App.tsx에서 (useDispatch<AppDispatch>()) 하는 방식을 권장하지만 (export let {increment, decrement, incrementByAmount} = counterSlice.actions) 부분에서 가져와서 사용해도 된다.

 

 

 

Tuple

array에 붙일 수 있는 타입으로 자료의 위치까지 정확히 지정할 수 있다.

let 멍멍이 :[string, boolean];
멍멍이 = ['dog', true]

 

 

- Tuple: rest parameter

function 함수(...x :[string, number] ){
  console.log(x)
}
함수('kim', 123)  //가능
함수('kim', 123, 456)  //에러
함수('kim', 'park')  //에러

x에 들어오는 파라미터는 array 형태로 담겨오기 때문에 array처럼 타입을 지정한다. 튜플을 이용하면 rest parameter를 엄격하게 사용할 수 있다. 일반 파라미터를 2개 넣고 설정해도 되는데 자료형의 차이가 있다.(array이거나 다른 타입이거나)

 

 

- Tuple option

type Num = [number, number?, number?];
let 변수1: Num = [10];
let 변수2: Num = [10, 20];
let 변수3: Num = [10, 20, 10];

해당의 형태로 자료를 만들 수 있는데 '?' 옵션은 항상 마지막에만 붙일 수 있고 앞의 자료가 같은 '?' 옵션이 붙어있어야 여러개가 사용 가능하다.

 

 

- Tuple: spread 연산자

let arr = [1,2,3]
let arr2 :[number, number, ...number[]] = [4,5, ...arr]

let arr3 :[number, number, ...number[]] = [4,5,6,7,8,9,10]

tuple 타입에 rest parameter 처럼 사용한다. 

 

 

 

declare & ambient module

타입스크립트에서 외부 자바스크립트 파일을 이용할 때 에러가 발생한다.

// (data.js)
var a = 10;
var b = {name :'kim'};

// (index.ts)
console.log(a + 1);

// (index.html)
<script src="data.js"></script>
<script src="index.js"></script>  //index.ts에서 변환된 js 파일

해당 결과는 제대로 잘 나오지만 index.ts 파일에서 a가 정의가 되어있지 않다고 에러가 난다.

 

 

* declare

declare를 사용하면 이미 정의된 변수나 함수를 재정의(override) 할 수 있고 타입도 지정할 수 있다.

- 자바스크립트로만 작성된 외부 라이브러리를 쓸 때 유용하다.

// (data.js)
var a = 10;
var b = {name :'kim'};

// (index.ts)
declare let a :number;
console.log(a + 1);

data.js에 a라는 변수가 있으니 index.ts에서는 에러를 내지말라고 하는 뜻. declare가 붙은 코드는 js로 변환되지 않는다.

 

 

* Ambient Module 

전역으로 쓸 수 있는 파일을 ambient module이라고 한다.

// (data.ts)
type Age = number;
let 나이 :Age = 20;

// (index.ts)
console.log(나이 + 1) // 가능
let 철수 :Age = 30; // 가능

타입스크립트에서 let name 이라는 이름의 변수생성이 안되는 이유를 여기서 찾을 수 있습니다. 어떤 기본 ts 파일이 let name 이미 쓰고있음.

 

 

- import & export

// (data.ts)
export {};
type Age = number;
let 나이 :Age = 20;

// (index.ts)
console.log(나이 + 1) // 불가능
let 철수 :Age = 30; // 불가능

import나 export 키워드가 적어도 하나라도 있다면 그 파일은 로컬 모듈이 된다. 거기에 있는 모든 변수는 export를 해야 다른 파일에서 사용 가능하다.

 

 

* declare global

import나 export가 있는 로컬 모듈에서 전역 변수를 만들고 싶다면 ?

declare global {
  type Dog = string;
}

로컬 파일에서 이런 코드를 적는다면 Dog라는 타입을 전역으로 이용 가능하다. 일종의 namespace라고 보면 된다.

 

 

 

 

 

d.ts

파일명.d.ts 형식의 파일은 타입만 따로 import 하기위한 타입저장용 파일이거나 프로젝트에서 사용하는 타입을 정리해놓은 레퍼런스용 파일이다. (d => definition이며 자바스크립트로 컴파일 되지 않는다.)

 

1. 타입만 따로 정의하기

export type Age = number;
export type multiply = (x :number ,y :number) => number
export interface Person { name : string }

정의 해둔 타입은 export해서 써야한다. d.ts파일은 ts파일이 아니기때문에 global ambient module이 되지 않는다. 쓰려는 ts파일에서 import해서 써야한다.

 

 

2. 레퍼런스로 사용하기

// (tsconfig.json)
{
    "compilerOptions": {
        "target": "es5",
        "module": "es6",
        "declaration": true, // 이 부분
    }
}

declaration 옵션을 true로 바꿔준다. 그럼 ts파일마다 d.ts파일이 생성되고 타입 정의만 정리되어서 담긴다.

 

// (index.ts)
let 이름 :string = 'kim';
let 나이 = 20;
interface Person { name : string } 
let 사람 :Person = { name : 'park' }


// (index.d.ts)
declare let 이름: string;
declare let 나이: number;
interface Person {
    name: string;
}
declare let 사람: Person;

 

 

- d.ts 파일 글로벌 모듈 만들기

{
    "compilerOptions": {
        ...
        "typeRoots": ["./types"] // d.ts 파일 글로벌 모듈화 하기
        ...
    }
}

프로젝트 내에 types/common 이라는 폴더를 만들고 해당 경로에 d.ts 파일을 넣으면 된다. 하지만 이 경우엔 d.ts 자동생성 기능을 끄고 기존 ts파일명과 겹치지 않도록 작성하는게 좋다. 그러므로 웬만하면 중복을 피하기 위해서 import export를 사용하는게 좋다.

 

 

- 유명한 라이브러리 d.ts

jquery나 bootstrap과 같은 잘 알려진 라이브러리는 d.ts 파일을 제공한다. Definitely Typed 이라는 사이트에 주로 쓰는 라이브러리가 모여있어서 찾아쓰거나 타입스크립트 공식 홈페이지 Type Search 에는 npm으로 라이브러리 설치 시 타입스크립트로 정의된 버전이 node_modules/@types 의 경로에 설치되거나 d.ts파일(타입 부분)만 따로 설치할 수 있다. (typeRoots 옵션이 있을경우 제거하거나 node_modules/@types 폴더를 추가해야 한다.)

 

 

 

implements

class 타입을 확인할 때 interface 문법을 사용하는데 implements를 통해 사용한다.

interface CarType {
  model : string,
  price : number
}

class Car implements CarType {
  model : string;
  price : number = 1000;
  constructor(a :string){
    this.model = a
  }
}
let 붕붕이 = new Car('morning');

interface는 object의 타입지정할 때도 쓰지만 class의 타입을 확인할 때도 사용한다. Car 클래스가 model과 price 속성을 다 가지고 있는지 확인 할때 implements를 사용한다.

 

interface CarType {
  model : string,
  tax : (price :number) => number;
}

class Car implements CarType {
  model;   ///any 타입됨
  tax (a){   ///a 파라미터는 any 타입됨 
    return a * 0.1
  }
}

implements는 class의 타입을 체크하는 용도이지 할당하지는 않는다.

 

 

 

object index signatures

object 자료에 타입을 미리 만들 때

1. object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우

2. 타입지정할 속성이 너무 많은 경우

index signatures를 사용한다.

 

 

* index signatures

interface StringOnly {
  [key: string]: string
}

let obj :StringOnly = {
  name : 'kim',
  age : '20',
  location : 'seoul'
}

[모든 string으로 들어오는 key값에 할당되는 value는 string이다]라는 말이 된다.

 

따라서,

interface StringOnly {
  age : number,   // 에러
  [key: string]: string,
}

interface StringOnly {
  age : string,   // 가능  
  [key: string]: string,
}

위의 코드를 가능하게 하려면

 

interface StringOnly {
  age : number,   ///가능
  [key: string]: string | number,
}

이런 형식으로 작성해야 한다.

 

 

- array

interface StringOnly {
  [key: number]: boolean,
}

let obj :StringOnly = {
  0 : 'kim'
  1 : '20',
  2 : 'seoul'
}

[] 안의 key 값의 타입을 number로 지정할 수도 있다. array처럼 쓰고싶은 object가 있으면 이렇게 타입지정도 가능하다.

 

 

 

* Recursive Index Signature

interface MyType {
  'font-size' : {
    'font-size' : {
      'font-size' : number
    }
  }
}

let obj :MyType = {
  'font-size' : {
    'font-size' : {
      'font-size' : 14
    }
  }
}

object 안의 object 형태로 되어 있는 object의 타입은

 

interface MyType {
  'font-size': MyType | number
}


let obj :MyType = {
  'font-size' : {
    'font-size' : {
      'font-size' : 14
    }
  }
}

이렇게 사용할 수도 있다.

 

 

 

keyof & in

- keyof

keyof 연산자는 object 타입이 가지고 있는 모든 key 값을 union type으로 합쳐서 보내준다. object의 key를 뽑아서 새로운 타입을 만들고 싶을 때 사용한다.

interface Person {
  age: number;
  name: string;
}
type PersonKeys = keyof Person;   //"age" | "name" 타입됩니다
let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //불가능

/////////////////////////////////////////////////////////

interface Person {
  [key :string]: number;
}
type PersonKeys = keyof Person;   //string | number 타입됩니다
let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //가능

 

 

- Mapped Types

type Car = {
  color: boolean,
  model : boolean,
  price : boolean | number,
};

type TypeChanger <MyType> = {
  [key in keyof MyType]: string; // [ 자유작명 in keyof 타입파라미터 ] : 원하는 타입
};

type 새로운타입 = TypeChanger<Car>;

let obj :새로운타입 = {
  color: 'red',
  model : 'kia',
  price : '300',
}

object 안에 있는 속성들을 다른 타입으로 한번에 전부 변환되어진 타입을 만들 수 있다.

 

 

 

조건문 타입 & infer

type Age<T> = T extends string ? string : unknown;
let age : Age<string> //age는 string 타입
let age2 : Age<number> //age는 unknown 타입

삼항 연산자를 통해 type을 지정해줄 수 있다.

 

ex)

type FirstItem<T> = T extends any[] ? T[0] : any 

let age1 :FirstItem<string[]>;
let age2 :FirstItem<number>;

 

 

- infer

조건문을 사용할 때 infer 키워드를 사용하면 지금 입력한 타입을 변수로 만들 수 있다.

type Person<T> = T extends infer R ? R : unknown; 
type 새타입 = Person<string> // 새타입은 string 타입입니다

1) infer는 조건문 안에서만 사용가능

2) infer 우측을 자유롭게 작명하면 타입을 T에서 유추해서 R이라는 변수에 집어넣는다

3) R을 조건식 안에서 맘대로 사용 가능하다.

 - 타입파라미터에서 타입을 추출해서 쓰고싶을 때 사용하는 키워드이다.

 

ex)

// array 안에 있던 타입이 어떤 타입인지 뽑아서 변수로 만들 수 있다
type 타입추출<T> = T extends (infer R)[] ? R : unknown; 
type NewType = 타입추출< boolean[] > // NewType 은 boolean 타입입니다 

// 함수의 return 타입이 어떤 타입인지 뽑아서 변수로 만들 수 있다
type 타입추출<T> = T extends ( ()=> infer R ) ? R : unknown; 
type NewType = 타입추출< () => number > // NewType은 number 타입입니다

타입을 추출하는 식이라고 생각하면 된다. 이 작업을 대체하는 ReturnType<>이런 예약 타입이 있는데 여기에 함수타입을 대입하면 return 타입만 알아서 뽑아준다.

 

type Age<T> = T extends [string, ...any] ? T[0] : unknown;
let age1 :Age<[string, number]>;
let age2 :Age<[boolean, number]>;

type 타입뽑기<T> = T extends (x :infer R) => any ? R : any;
type a = 타입뽑기<(x :number) => void> //이러면 number가 이 자리에 남음
type b = 타입뽑기<(x :string) => void> //이러면 string이 이 자리에 남음