Typescript from 코딩애플 : Part2-2

8. React + Typescript

파일 확장자 .tsx 로 작업한다.

JSX 문법 타입지정

let 박스 :JSX.Element = <div></div>

//또는 좀 더 정확하게 표현하고자 할때에는

let 박스 : JSX.IntrinsicElements['div'] = <div></div>

Component 타입지정

function App(){
  return (
    <div>
      <h4>안녕하십니까</h4>
      <Profile/>
    </div>
  )
}

function Profile () :JSX.Element {
  return (
    <div>프로필입니다.</div>
  )
}

Props 타입지정

function App(){
  return (
    <div>
      <h4>안녕하십니까</h4>
      <Profile name='철수'/>
    </div>
  )
}

function Profile (props : {name : string}) :JSX.Element {
  return (
    <div>프로필입니다.</div>
    <div>{props.name}입니다.</div>
  )
}

useState 타입지정

function App(){

  let [user, setUser] = useState('kim') 
  // 자동으로 타입지정
  // 또는 useState<string | number >('kim') 
  
  return (
    <div>
      <h4>안녕하십니까</h4>
      <Profile name='철수'/>
    </div>
  )
}

function Profile (props : {name : string}) :JSX.Element {
  return (
    <div>프로필입니다.</div>
    <div>{props.name}입니다.</div>
  )
}

9. React + Typescript + Redux

const 초기값 :{count:number}  = { count: 0 };

function reducer(state = 초기값, action :{type:string}) { 
  if (action.type === '증가') {
    return { ...state, count : state.count + 1 }
  } else if (action.type === '감소'){
    return { ...state, count : state.count - 1 }
  } else {
    return initialState
  }
}

const store = creatStore(reducer)

// 하기 타입을 export 해서 useSelectort에서 편하게 가져다 쓴다.
// store의 타입이 자동으로 나온다.
export type RootState = ReturnType<typeof store.getState>

function App() {
  const 꺼내온거 = useSelector( (state :RootState) => state );
  
  // 코드 상단에서 
  // import {Dispatch} from 'redux'; 추가해서 쓴다.
  const dispatch :Dispatch = useDispatch(); 

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

redux toolkit

1. 함수라 보기 좋다.
2. 복사본을 따로 안만들어도 된다.
3. 설치 npm install @reduxjs/toolkit

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

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

const counterSlice = createSlice({
  name: 'counter',
  initialState : 초기값,
  reducers: {
    increment (state){       // return 을 따로 안써줘도 된다.
      state.count += 1
    },
    decrement (state){
      state.count -= 1
    },
    incrementByAmount (state, action :PayloadAction<number>){
      state.count += action.payload
    }
  }
})

let store = configureStore({
  reducer: {
    counter1 : counterSlice.reducer
  }
})

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

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

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>
  );
} 

10. tuple type

let 멍멍 : (string | boolean)[] = ['dog', true]

// 위치, 타입도 지정하는 방법 => tuple type
let 멍멍 : [string, boolean] = ['dog', true]

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

let 멍멍 : [string, boolean?, number] = ['dog', true] // 에러 발생

function 함수 (...x : number[]) {
  console.log(x)     // [1,2,3,6,3,4]
}

//tuple type 사용
function 함수 (...x : [number, string]) {
  console.log(x)     // [111,'222']
}

함수(111,'222')

rest 문법 + tuple type

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

11. declare

.js에 있는 변수를 .ts에서 이용하고 싶을 때

// data.js 파일
var a = 10
var b = {name : 'kim'}

// index.ts 파일
console.log(a+1) // 에러 발생, but 실행은 된다.

declare let a : number; // 위의 에러를 지우는법, 변수 a를 재정의해준다.

// index.html 파일
<script src="data.js"></script>
<script src="index.js"></script>

.ts에 있는 변수를 .ts에서 이용하고 싶을 때

모든 ts 파일은 ambient module(글로벌 모듈) 에 의하여 공유되어 있다.
즉, 사실은 export, import를 해줄 필요가 없다.

but, 구별을 하고 싶다면 export, import 가 한개라도 있다면 로컬 모듈로 변경된다.

// data.ts 파일
export var a = 10

// index.ts 파일
import {a} from './data'

console.log(a+1)

로컬 모듈에서 글로벌 변수를 만들고 싶다면

declare global {
  type Dog = string;
}

export {}.   // 로컬 모듈 파일임을 명시하기 위하여