함수에 타입 지정

파라미터와 return 에 타입을 지정할 수 있다

예시코드 1)

function sayHello(name:string, age:number): string {
	return `내 이름은 ${name}이고 나이는 ${age}살 이야`
}
sayHello("홍길동", 30)

예시코드 2)

function add(a:number, b:number): number {
	return a + b
}
add(5, 3)

예시코드 3)

function isValid(value:boolean): boolean {
	return !value
}
isValid(false)

예시코드 4)

function printMessage(message: string): void {
	console.log(message)
}
printMessage("Hello")

함수에서 아무런 값을 반환하지 않을때 void를 사용

비동기 함수에서 타입 지정

예시코드 1)

interface todo {
	userId : number;
    id : number:
    title : string:
    completed : boolean;
}
async function getData(): Promise<todo> {
	const response = await fetch("url")
    const result = await response.json()
    return result
}

useState에서 타입 지정

예시코드 1)

import { useState } from 'react'

function App() {
	const [count, setCount] = useState<number>(0)
	return (
    	<div>{count}</div>
    )
}

props에서 타입 지정

예시코드 1)

import { useState } from 'react'

function Parent() {
	const [count, setCount] = useState(0)
    return <Child count={count}></Child>
}

type Props = {
	count : number
}

function Child({ count }: Props) {
	return <div>{count}</div>
}

Event Handler에서 타입 지정

예시코드 1)

import { useState } from 'react'

function App() {
	const [count, setCount] = useState<number>(1)
    const eventHandler = (e: React.MouseEvent<HTMLDivElement>) => {}
    
    return <div onClick={eventHandler}>{count}</div>
}

type & interface

둘 다 객체 타입을 지정한다

차이점

• type : 더 유연한 타입 정의 가능. 확장 X
• interface : 확장 가능

interface

예시코드

// interface 확장 예시

interface ButtonProps {
  children: React.ReactNode;
  onClick: () => void;
}

interface BeautifulButton extends ButtonProps {
  backgroundColor: "red" | "blue" | "green";
}

function Button({
  children,
  onClick,
  backgroundColor,
}: BeautifulButton) {
  return <button onClick={onClick} style={{ backgroundColor }}>{children}</button>;
}

export default function App() {
  return (
    <div>
      <Button onClick={() => { }} backgroundColor="red">버튼</Button>
    </div>
  );
}

type

예시코드

type Data = {
	a: string;
	b: number;
}

const data: Data = { a: "10", b: 20 };

type C = number | string | boolean;

const c1: C = 123;
const c2: C = "123";
const c3: C = true;

Generic

타입에 유동적인 타입을 지정하려면 generic을 사용한다

• 함수 : 함수 이름 옆에 <알파벳>
• 파라미터 : 파라미터에 : <알파벳>
• 리턴 : : <알파벳>
• 타입 : <알파벳>
• 객체 속성 : : <알파벳>

예시코드 1)

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

const result = pair<string, number>("hello", 42);

예시코드 2)

type SimpleObject<T> = {
  value: T;
};

// 사용 예시:
let object: SimpleObject<number> = { value: 10 }; 
let anotherObject: SimpleObject<string> = { value: "hello" };