타입스크립트란?

• 실무 프로젝트에서 지배적으로 사용되고 있는 언어
• 자바스크립트에 타입을 부여한 언어

// JavaScript
const message = 'hi';

function sum(a, b) {
  return a + b;
}
// JavaScript
const message = 'hi';

function sum(a, b) {
  return a + b;
}

// TypeScript
const message: string = 'hi';

function sum(a: number, b: number): number {
  return a + b;
}
// TypeScript
const message: string = 'hi';

function sum(a: number, b: number): number {
  return a + b;
}

왜 타입스크립트를 사용할까?

1. 사용자 경험: 실행 시점의 에러를 어느정도 미리 잡아준다
2. 개발자 경험: 코드 자동 완성, 코드 역할에 대한 정보 제공 등

React Function Component

리액트에서 컴포넌트를 정의하는 방법

// App.tsx
function App(): JSX.Element {
  return (
    <div>Hi React</div>
  );
}
// App.tsx
function App(): JSX.Element {
  return (
    <div>Hi React</div>
  );
}

알아야 하는 타입스크립트 개념

• 함수의 타입 정의 방법
• 타입 추론

함수의 타입 정의

function sum(a: number, b: number): number {
  return a + b;
}
function sum(a: number, b: number): number {
  return a + b;
}

학습해야 할 주요 개념

• 함수의 파라미터 타입 정의
• 함수의 반환 타입 정의

TIP! 타입 표기(Type Annotation) - 타입을 정의하는 방식 :number :string

React State

리액트에서 상태를 정의하는 방법

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div>{counter}</div>
  );
}
function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div>{counter}</div>
  );
}

알아야 하는 타입스크립트 개념

• 기본 타입
• 제네릭
• 타입 추론

기본 타입

• string ➡️ const a: string = 'hi';
• number ➡️ const num: number = 10;
• boolean ➡️ const isLogin: boolean = true;
• array ➡️ const arr: number[] = [1,2,3];
• object ➡️ const product: object = { name: 'Shoes' };
• any ➡️ const result: any = 10 + {} + [];

React Event Handler

리액트에서 UI 이벤트를 제어하는 방법

import { MouseEvent } from 'react';

function App() {
  const showAlert = (event: MouseEvent<HTMLButtonElement>) => {
    console.log(event);
  };

  return (
    <button onClick={showAlert}>show</button>
  )
}
import { MouseEvent } from 'react';

function App() {
  const showAlert = (event: MouseEvent<HTMLButtonElement>) => {
    console.log(event);
  };

  return (
    <button onClick={showAlert}>show</button>
  )
}

import { ChangeEvent, useState } from 'react';

function App() {
  const [todo, setTodo] = useState('');
  function updateTodo(event: ChangeEvent<HTMLInputElement>) {
    setTodo(event.target.value);
  }

  return (
    <input type="text" value={todo} onChange={updateTodo} />
  )
}
import { ChangeEvent, useState } from 'react';

function App() {
  const [todo, setTodo] = useState('');
  function updateTodo(event: ChangeEvent<HTMLInputElement>) {
    setTodo(event.target.value);
  }

  return (
    <input type="text" value={todo} onChange={updateTodo} />
  )
}

알아야 하는 타입스크립트 개념

• 제네릭
• 타입 호환

제네릭(Generic)

타입을 함수의 파라미터처럼 사용하는 문법. 타입을 넘겨 타입을 받는다.

function getText<T>(text: T) {
  return text;
}
const message = getText<string>('hi');
const userId = getText<number>(10);
function getText<T>(text: T) {
  return text;
}
const message = getText<string>('hi');
const userId = getText<number>(10);

학습해야 할 주요 개념

• 제네릭의 타입 제약
• 제네릭에 제네릭 넘기기

타입 호환(Type Compatibility)

타입 간의 호환 여부. 변수에 특정 값을 할당할 수 있는지의 관점

let a: number = 10;
let b: string = 'hi';
b = a; // 에러 발생. 호환되지 않음
let a: number = 10;
let b: string = 'hi';
b = a; // 에러 발생. 호환되지 않음

let a: number = 10;
let b: any = 'hi';
b = a; // 에러 발생 안함. 호환됨
let a: number = 10;
let b: any = 'hi';
b = a; // 에러 발생 안함. 호환됨

학습해야 할 주요 개념

• 유니언(|), 인터섹션(&) 타입을 사용했을 때의 호환성
• 타입에러 코드

React Props

리액트에서 프롭스(Props) 속성을 정의하는 방법

interface AppHeaderProps {
  headerTitle: string;
}

type AppHeaderProps = { headerTitle: string; }

function AppHeader(props: AppHeaderProps) {
  return (
    <h1>{props.headerTitle}</h1>
  );
}
interface AppHeaderProps {
  headerTitle: string;
}

type AppHeaderProps = { headerTitle: string; }

function AppHeader(props: AppHeaderProps) {
  return (
    <h1>{props.headerTitle}</h1>
  );
}

알아야 하는 타입스크립트 개념

• 인터페이스
• 타입 별칭

인터페이스(Interface)

객체 모양의 타입을 정의할 때 유용한 문법. 프레임워크에서는 주로 API 응답, 프롭스, 변수, 함수를 정의할 때 자주 사용.

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

const vision: Person = { 
  name: '비전',
  age: 3
};
interface Person {
  name: string;
  age: number;
}

const vision: Person = { 
  name: '비전',
  age: 3
};

학습해야 할 주요 개념

• 인터페이스 상속
• 인터페이스 선언 병합
• 타입 별칭과 인터페이스의 차이점

타입 별칭(Type Alias)

타입에 의미를 부여할 수 있는 문법. 타입의 변수화. 하지만 재선언은 불가.

// 기본 타입으로 선언한 경우
const a: string = 'Josh';

// 타입 별칭으로 선언한 경우
type MyName = string;
const a: MyName = 'Josh';
// 기본 타입으로 선언한 경우
const a: string = 'Josh';

// 타입 별칭으로 선언한 경우
type MyName = string;
const a: MyName = 'Josh';

학습해야 할 주요 개념

• 유니언(|), 인터섹션(&)과 타입 별칭 사용하는 방법
• 타입 별칭과 인터페이스의 차이점
• 유틸리티 타입과 맵드 타입

Vue Data(State)

뷰에서 데이터 속성을 정의하는 방법

<script lang="ts">
export default defineComponent({
  data() {
    return {
      message: 0,
    };
  },
});
</script>

<template>
  <p>{{ message }}</p>
</template>
<script lang="ts">
export default defineComponent({
  data() {
    return {
      message: 0,
    };
  },
});
</script>

<template>
  <p>{{ message }}</p>
</template>

알아야 하는 타입스크립트 개념

• 기본 타입
• 타입 추론

타입 추론(Type Inference)

타입스크립트 컴파일러가 작성된 타입 코드를 해석하는 동작.

// 타입 표기 방식으로 타입을 선언한 코드
const a: string = 'hi';

// 타입 추론에 기댄 코드
const a = 'hi';
// 타입 표기 방식으로 타입을 선언한 코드
const a: string = 'hi';

// 타입 추론에 기댄 코드
const a = 'hi';

학습해야 할 주요 개념

• 타입 추론에 의지해야 하는 경우
• 구조적 타이핑(Structural Typing)

TIP! 타입스크립트 컴파일러보다 타입을 더 잘 정의할 순 없다. 타입 추론에 의지해라.

Vue Methods(Event Handler)

뷰에서 UI 이벤트 핸들러를 정의하는 방법

<script lang="ts">
export default defineComponent({
  methods: {
    showAlert(event: MouseEvent) {
      alert('hi');
    },
  },
});
</script>

<template>
  <button @click="showAlert">show</button>
</template>
<script lang="ts">
export default defineComponent({
  methods: {
    showAlert(event: MouseEvent) {
      alert('hi');
    },
  },
});
</script>

<template>
  <button @click="showAlert">show</button>
</template>

알아야 하는 타입스크립트 개념

• 함수 파라미터 타입, 타입스크립트 내장 타입

타입스크립트 내장 타입(Built-in Types)

자바스크립트 문법, 웹 API 등을 미리 선언해 둔 타입 모음

window.localStorage.setItem();

['a','b'].splice();
window.localStorage.setItem();

['a','b'].splice();

학습해야 할 주요 개념

• 타입스크립트 설정 파일(tsconfig.json)
• 내장 타입의 타입을 확장하는 방법
• 외부 라이브러리 타입 선언 방법

Vue Props

뷰에서 프롭스 속성을 정의하는 방법

<script lang="ts">
import { PropType, defineComponent } from "vue";

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

export default defineComponent({
  props: {
    userProfile: { type: Object as PropType<Profile> },
  },
});
</script>

<template>
  <p>{{ userProfile }}</p>
</template>
<script lang="ts">
import { PropType, defineComponent } from "vue";

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

export default defineComponent({
  props: {
    userProfile: { type: Object as PropType<Profile> },
  },
});
</script>

<template>
  <p>{{ userProfile }}</p>
</template>

Vue Props

알아야 하는 타입스크립트 개념

• 인터페이스
• 타입 단언
• 제네릭

타입 단언(Type Assertion)

타입스크립트 컴파일러를 속이는 방법. 내가 지정한 타입으로 타입 강제하기.

const a = 'hi' as any;
const a = 'hi' as any;

type Person = { name: string; age: number; }

const b = {} as Person;
b.name = 'Thor';
type Person = { name: string; age: number; }

const b = {} as Person;
b.name = 'Thor';

학습해야 할 주요 개념

• 타입 단언의 효용성이 높은 시점
• 타입 단언으로 특정 타입을 강제할 수 없는 상황
• JS에 TS를 점진적으로 적용하는 방법

API 함수 예시

https://jsonplaceholder.typicode.com/todos

API 함수 타입 정의 완료 코드

const apiUrl = 'https://jsonplaceholder.typicode.com/todos'

interface Todo {
  userId: number
  id: number
  title: string
  completed: boolean
}

async function fetchTodos(): Promise<Todo[]> {
  const response = await fetch(apiUrl);
  const data = await response.json();
  return data;
}

fetchTodos().then((todos) => todos[0].)
const apiUrl = 'https://jsonplaceholder.typicode.com/todos'

interface Todo {
  userId: number
  id: number
  title: string
  completed: boolean
}

async function fetchTodos(): Promise<Todo[]> {
  const response = await fetch(apiUrl);
  const data = await response.json();
  return data;
}

fetchTodos().then((todos) => todos[0].)

ChatGPT를 이용하세요

https://chat.openai.com/share/f5c69721-1d1b-4a6d-9474-233279e2c2d7

타입스크립트 공식 사이트

타입스크립트 온라인 강의

타입스크립트 관련 발표 링크

• 2021 FEConf - Can I use Vue 3?
• 2022 인프콘 - 운영 중인 Vue.js 웹 서비스를 타입스크립트로 다시 쓰기
• 2023 점핏 - 타입스크립트로 FE 개발 레벨업