[TypeScript] 변수와 함수의 타입 정의

 

각 변수에 *타이핑(Typing) 한다.

* 타이핑(Typing): 타입이 정의되지 않은 코드에 타입을 입혀주는 행위

 

 

---

 

 

📄 문자열

// JS
const str = 'hello';

// TS
const str:string = 'hello'

 

 

📄 숫자

// JS
const num = 1

// TS
const num:number = 1

 

 

📄 배열

// JS
const arr = [1, 2, 3];

// TS
const arr: Array<number> = [1, 2, 3];
const arr:number[] = [1, 2, 3];

 

 

📄 튜플: 길이와 타입이 고정된 배열

// TS
// 모든 index의 타입이 지정되어있는 배열
let address: [string, number] = ['강남', 1];

 

 

📄 객체

// TS
let abj: object = {}
let person: object = {
  name: 'beam',
  age: 100
}

// 이렇게 타입을 줄 수도 있다.
let person: { name: string, age: number } = {
  name: 'beam',
  age: 1000
}

 

 

📄 진위값

// JS
let show = true;

// TS
let show: boolean = true;

 

 

📄 함수

// 함수에 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number) {
  return a + b;
}
sum(5, 10)


// 함수의 반환값에 타입을 정의하는 방식
function add(): number {
  return 10;
}

// 함수에 타입을 정의하는 방식
function sum(a: number, b: number): number {
  return a + b;
}

// 함수에 반환값이 없는 경우
function addTodo(todo: object): void {
  todoItems.push(todo);
}

 

 

📄 함수의 옵셔널 파라미터

함수의 파라미터에 대해 필수값 여부를 지정해보자

// 함수의 옵셔널 파라미터
// 변수명 뒤에 '?'를 붙여준다.
function log(a: string, b?: string) {
	// ...
}

log('hello world') // a만 필수값이기 때문에 가능
log('hello world', 'abc')

 

 

📄 타입 정의하기

// 방법 1.
type Todo = {
  id: number;
  title: string;
  done: boolean;
}

// 방법 2. 인터페이스로 정의하기 => 이 방법이 typesript
interface Todo {
  id: number;
  title: string;
  done: boolean;
}

// 사용하기
function fetchTodoItems(): Todo[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}