TypeScript 기본 사용 정리

왜 사용하지?

타입스크립트는 기본적으로 변수나 함수의 타입을 지정해줄 수 있습니다.

데이터를 주고받을때 데이터의 타입이 객체여야하는데 문자열로 와서 오류를 일으킨다?

오류가나서 오류메시지를 확인했더니 다른곳을 가르키면서 여기 오류났다고 알려준다?

props로 받아왔는데 이 prop이 어떤 prop인지 어케알아? - 그렇기에 propsType을 사용함...

이러한 상황을 방지하기위해서 타입스크립트를 써야합니다.
걍 유용합니다. 얼른 js에서 갈아탑시다.

기본으로 알아야할것들

타입을 지정해주는 방법으로 크게 type과 interface가 있습니다.
user의 데이터 타입을 정의해 보겠습니다.

type

기본적으로 type 이름과 함께 타입을 정의해주시면 됩니다.
배열은 type 이름 = 타입[]; 한다면 해당타입의 배열을 지정해줄 수 있습니다.
객체는 중괄호!
또한 |이나 & 타입을 활용하여 설정해주기도 가능!!

interface

객체의 형태로 만들어져 객체의 타입을 지정하는데 유리합니다.
interface에 interface를 상속받아서 User에는 live라는게 없지만 상속을 통해 있는것으로 간주합니다.

type과 interface의 차이점
type: 유니언(|) 및 교차(&) 타입을 쉽게 사용할 수 있어, 여러 타입을 결합하거나 선택적 타입을 설정할 때 유용합니다.
interface: 주로 객체의 구조를 설명하는 데 특화되어 있습니다.
또한 extends를 사용해 다른 인터페이스를 상속받습니다.
정리
interface는 객체를 정의하는데 유리
type은 여러 타입을 조합할때 유리

Pick, Omit

Pick

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

// User 타입에서 id와 name 속성만 선택
type UserPreview = Pick<User, "id" | "name">;

const user: UserPreview = {
  id: 1,
  name: "Alice"
  // age나 email을 추가하면 오류 발생
};

Pick은 원래있던 인터페이스에서 골라올 수 있습니다. 내가 사용하고 싶은 인터페이스에서 조금만 골라내면될때 굳이 다시 선언을 하지않더라도 쓸 수 있는 유용한친구입니다.

Omit

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

// User 타입에서 id와 email 속성을 제외
type UserWithoutContactInfo = Omit<User, "id" | "email">;

const user: UserWithoutContactInfo = {
  name: "Alice",
  age: 25
  // id나 email을 추가하면 오류 발생
};

Omit은 Pick과 반대로 몇개만 빼고싶을때 쓸 수 있습니다.

제네릭

제네릭은 타입계의 변수같은느낌? 어떤 타입이 올지 모를때는 제네릭을 활용하여 선언해주면 개꿀딱지 ㅎㅎ

타입 설정하기

타입

타입안에 타입을 선언하기도 쌉가능!!!
이것으로 반복되는 코드들을 줄일 수 있어서 행복합니다 ㅎㅎ

변수

number, string, 등등 선언해줄 수 있습니다.
위에서 선언해주었던 type도 이용해서 선언할 수 있습니다.

함수

function 형태든 화살표 형태든 매개변수에 타입지정 후 리턴값에도 타입지정해주기!

배열

배열을 여러형태의 배열로도 저장할 수 있습니다.

객체

interface를 활용하여 객체의 타입지정해주기

훅

useState : 제네릭을 활용하여 설정하기

const [user, setUser] = useState<string>();

---

useEffect : 매개변수에도 타입설정, 반환값에도 타입을 설정해주기

useEffect((num:number):number => {
    return num;
}, [user]);

---

useRef : useRef에서는 HTML요소나 null 설정해준 후 넣기 혹은 useState처럼 제네릭을 이용해서 설정해주기

const divRef = useRef<HTMLDivElement | null>(null);
const countRef = useRef<number>(0);

---

useContext : createContext에서 타입을 지정해주면 자동으로 useContext로 불려올때 타입이 지정되서 옴.

interface User {
    name: string;
    age: number;
}

const UserContext = React.createContext<User | null>(null);

const MyComponent = ():User => {
    // useContext에서 `user`가 `User | null`로 추론됨
    const user = useContext(UserContext);
    return user;
};

---

마치며..

이밖에도 typescript의 유용한 문법들은 정말 많습니다. 더욱 공부하여 사용하면 좀 더 편안한 개발을 할 수 있을겁니다(아마..?)감사합니다