3. TYPESCRIPT

TypeScript?

• strongly-typed : 프로그래밍 언어가 작동하기 전에 type을 확인한다. JavaScript ⇒ 에러 발생 X, 오류를 바로 확인하기 어렵다.

  const user = {
    firstName: "Angela",
    lastName: "Davis",
    role: "Professor",
  }
   
  console.log(user.name) // undefined

  TypeScript ⇒ 타입 명시 필요, 오류 발생시킴

  const user = {
    firstName: "Angela",
    lastName: "Davis",
    role: "Professor",
  }
   
  console.log(user.name) // error!

TypeScript 설치하기

1. 새로 설치하기

2. 기존 js 코드에서 설치하기

   1. npm install --save typescript @types/node @types/react @types/react-dom @types/jest
   2. 파일 확장자 .js → .tsx로 변경
   3. 만약 오류 Can’t resolve ‘./App’ 발생 시 root에 tsconfig.js 다음과 같이 추가

   {
     "compilerOptions": {
       "target": "es5",
       "lib": [
         "dom",
         "dom.iterable",
         "esnext"
       ],
       "allowJs": true,
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "noFallthroughCasesInSwitch": true,
       "module": "esnext",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "react-jsx"
     },
     "include": [
       "src"
     ]
   }

TypeScript에서 type을 주는 방법

• 자동완성 기능

1. interface 설정 : object 형식을 정의해줌

2. div에 props 주기(마찬가지로 Interface 생성)

   import React from 'react';
   import styled from 'styled-components';
   
   interface ContainerProps {
   	bgColor: string;
   }
   
   const Container = styled.div<ContainerProps>`
   	width: 200px;
   	height: 200px;
   	background-color: ${(props) => props.bgColor};
   `;
   
   interface CircleProps {
   	bgColor: string;
   }
   
   function Circle({ bgColor }: CircleProps) {
   	return <Container bgColor={bgColor} />;
   }
   
   export default Circle;

   +) 연습

   interface PlayerShape {
   	name: string;
   	age: number;
   }
   
   const sayHello = (playerObj: PlayerShape) => `Hello ${playerObj.name} you ar ${playerObj.age} years old.`;
   
   sayHello({ name: 'lim', age: 23 });

Optional Props ⇒ 없을 수도 있는 props

interface CircleProps {
	bgColor: string;
	borderColor: string;
}

function Circle({ bgColor }: CircleProps) {
	return <Container bgColor={bgColor} />;
}

→ 위 코드는 오류 발생. borderColor is not defined

⇒ interface에서 ?를 붙여주면 선택적 props가 된다.

interface CircleProps {
	bgColor: string;
	borderColor?: string;
}

function Circle({ bgColor }: CircleProps) {
	return <Container bgColor={bgColor} />;
}

default 값 설정 ⇒ 설정값 ?? deault값

function Circle({ bgColor, borderColor }: CircleProps) {
	return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />;
}

+) props 안에서 default 설정도 가능하다

interface CircleProps {
	bgColor: string;
	borderColor?: string;
	text?: string;
}

function Circle({ bgColor, borderColor, text = 'default text' }: CircleProps) {
	return (
		<Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>
			{text}
		</Container>
	);
}

State

TypeScript는 useState()의 default 값을 가지고 자동으로 형을 알 수 있다

자동으로 number로 형 설정

타입 커스텀 방법

⇒ useState<원하는타입1 | 원하는타입2>()

• value의 타입이 number 또는 string이 될 수 있도록 설정해보자

  function Circle({ bgColor, borderColor }: CircleProps) {
  	const [value, setValue] = useState<number|string>(0);
  	return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}></Container>;
  }

• 리액트 이벤트 모음 합성 이벤트(SyntheticEvent) - React
  

Form

(event: React.FormEvent<HTML이벤트가발생하는요소Element>) ⇒ {}

1. onChange event

   import React, { useState } from 'react';
   
   function App() {
   	const [value, setValue] = useState('');
   	const onChange = (event: React.FormEvent<HTMLInputElement>) => {
   		const {
   			currentTarget: { value }
   		} = event;
   		setValue(value);
   	};
   	return (
   		<div>
   			<form>
   				<input value={value} onChange={onChange} type='text' placeholder='username' />
   				<button>Log in</button>
   			</form>
   		</div>
   	);
   }
   
   export default App;

2. onSubmit event

   function App() {
   	const [value, setValue] = useState('');
   	const onChange = (event: React.FormEvent<HTMLInputElement>) => {
   		const {
   			currentTarget: { value }
   		} = event;
   		setValue(value);
   	};
   
   	const onSubmit = (event: React.FocusEvent<HTMLFormElement>) => {
   		event.preventDefault();
   		console.log('hello', value);
   	};
   	return (
   		<div>
   			<form onSubmit={onSubmit}>
   				<input value={value} onChange={onChange} type='text' placeholder='username' />
   				<button>Log in</button>
   			</form>
   		</div>
   	);
   }

TypeScript와 Styled Component를 연결하기 ⇒ 테마 설정하기

1. styled.d.ts 파일 생성하기 (src 폴더 내부)

   ⇒ DefaultTheme 안에 초기 테마를 설명

   // import original module declarations
   import 'styled-components';
   
   // and extend them!
   declare module 'styled-components' {
   	export interface DefaultTheme {
   		textColor: string;
   		bgColor: string;
   	}
   }

2. theme.ts 파일 생성하기 (src 폴더 내부)

   import { DefaultTheme } from 'styled-components';
   
   export const lightTheme: DefaultTheme = {
   	bgColor: 'white',
   	textColor: 'black',
   	btnColor: 'tomato'
   };
   
   export const darkTheme: DefaultTheme = {
   	bgColor: 'black',
   	textColor: 'white',
   	btnColor: 'teal'
   };

3. index.tsx 설정

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { ThemeProvider } from 'styled-components';
   import App from './App';
   import { lightTheme } from './theme';
   
   ReactDOM.render(
   	<React.StrictMode>
   		<ThemeProvider theme={lightTheme}>
   			<App />
   		</ThemeProvider>
   	</React.StrictMode>,
   	document.getElementById('root')
   );

4. App.tsx 설정

   import React, { useState } from 'react';
   import styled from 'styled-components';
   
   const Container = styled.div`
   	background-color: ${(props) => props.theme.bgColor};
   `;
   const H1 = styled.h1`
   	color: ${(props) => props.theme.textColor};
   `;
   
   function App() {
   	return (
   		<Container>
   			<H1>proptected</H1>
   		</Container>
   	);
   }
   
   export default App;