Typescript - 변수와 함수 타입

📌 목록

• Introduction
• 문자열, 숫자, 배열
• 튜플, 객체, 진위값
• 함수 타입 - 파라미터, 반환 값
• 함수 타입 - 옵셔널 파라미터
• Conclusion

📌 Introduction

안녕하세요. 오늘은 typescript의 기본중의 기본 타입정의하기에 대해서 알아보겠습니다. 기본적으로 변수의 타입과 함수의 타입에 대해서 알아보겠습니다!

📌 문자열, 숫자, 배열

기본적으로 변수명 다음에 : 을 붙이고 그뒤에 타입을 적어주면 됩니다.

// string 타입 정의
const str: string = 'HELLO';

// number 타입 정의
const num: number = 1;

// array 타입정의 의 두가지 방법
// 1. 
const numArr: Array<number> = [1, 2, 3];
const strArr: Array<string> = ['1', '2', '3'];
// 2.
const numArr2: number[] = [1, 2, 3];
const strArr2: string[] = ['1', '2', '3'];

📌 튜플, 객체, 진위값

튜플은 각각 인덱스의 타입을 정의해줍니다.

// tuple
const address: [string, number] = ['1', 1];

객체는 이렇게 두가지 방법으로 나눌수 있습니다.

// object
// 간단하게 사용
const person: object = {
  name: 'eddie',
  age: 20
};
// 조금더 구체적으로 사용할수 있습니다.
const person2: { name: string, age: number } = {
  name: 'eddie',
  age: 20,
  // sex: 'male' -> error!🚨
};

진위 값은 변수와 마찬가지로 사용이 가능합니다.

let show: boolean = false;

📌 함수 타입 - 파라미터, 반환 값

간단하게 sum이라는 함수를 만들어 보겠습니다.

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

파라미터의 a와 b는 둘다 number로 되어있고 return값을 number로 설정해준 모습을 볼 수 있습니다.

📌 함수 타입 - 옵셔널 파라미터

옵셔널 파라미터는 ?을 사용합니다. 옵셔널 파라미터는 들어올수도 있고 안들어올수도 있다고 하는 것입니다.

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

만약 c가 c?로 설정이 되어있지 않다면 c는 항상 들어와야하는 파라미터가 될텐데 ?를 붙임으로써 들어오지 않아도 ts에서 걸리지 않습니다.

📌 Conclusion

오늘은 이렇게 한번 기본적인 함수와 변수의 타입을 설정하는 것에 대해서 알아보았습니다. 참 쉬워보이면서도 자바스크립트의 유연함에 감탄하는 순간이 오네요. 그럼 다음 시간에 만나요 안녕~