함수 등에 타입 지정하기

함수에 타입 지정하기

 

1.  파라미터와 리턴 타입 지정

방법은 :타입을 쓰면 된다.

function 인사하기(이름: string, 나이: number): string {
  return `안녕 내 이름은 ${이름}이고, 나이는 ${나이}살이야`;
}

function 인사하기2({ 이름, 나이 }: { 이름: string; 나이: number }): string {
  return `안녕 내 이름은 ${이름}이고, 나이는 ${나이}살이야`;
}

console.log(인사하기("병수", 12));
console.log(인사하기2({ 이름: "병수", 나이: 12 }));

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

printMessage("Hello TypeScript!"); // 콘솔에 "Hello TypeScript!"가 출력됩니다.

 

 

2. 비동기 함수에서 리턴 타입 지정

방법은 리턴 부분에 :promise<타입>을 쓰면 된다.

interface todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

async function 데이터가져오기(): Promise<todo> {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const result = await response.json();
	// result === {
  //   "userId": 1,
  //   "id": 1,
  //   "title": "delectus aut autem",
  //   "completed": false
  // }
  return result;
}

 

3. useState에서 타입 지정하는 법

useState 옆에 제네릭 타입을 지정한다.

// 문제: 문자열 타입의 상태를 가지는 컴포넌트를 만드세요. `useState`와 `useEffect`를 사용하여 상태를 관리하고, 컴포넌트가 마운트될 때 콘솔에 메시지를 출력하세요.

import React, { useState, useEffect } from 'react';

const MessageComponent: React.FC = () => {
  const [message, setMessage] = useState<string>("Hello TypeScript!");

  useEffect(() => {
    console.log("Component mounted!");
  }, []); // 컴포넌트 마운트 시 실행

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage("Updated message")}>Change Message</button>
    </div>
  );
};

export default MessageComponent;

import React, { useState } from 'react';

// 사용자 정보를 담는 객체 타입 정의
interface UserInfo {
  id: number;
  name: string;
  email: string;
}

const UserComponent: React.FC = () => {
  // 초기 사용자 정보 설정
  const [userInfo, setUserInfo] = useState<UserInfo>({
    id: 1,
    name: "John Doe",
    email: "johndoe@example.com"
  });

  // 사용자 이름을 업데이트하는 함수
  const updateName = (newName: string) => {
    setUserInfo({ ...userInfo, name: newName });
  };

  return (
    <div>
      <p>ID: {userInfo.id}</p>
      <p>Name: {userInfo.name}</p>
      <p>Email: {userInfo.email}</p>
      <button onClick={() => updateName("Jane Doe")}>Change Name to Jane Doe</button>
    </div>
  );
};

export default UserComponent;