타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형

타입스크립트( Typescript )의 특징은 변수, 함수, 객체 등에 데이터 타입을 지정하여 오류를 줄이는 역할을 한다.

관대한 자바스크립트( Javascript )의 변수 지정에 데이터 타입을 지정하는 것이 타입스크립트이다.

자바스크립트에서는 변수에 어떤 값이든 자유롭게 넣을 수 있지만,
타입스크립트는 변수, 함수, 객체에 들어갈 값의 종류를 미리 지정할 수 있다.

자바 또는 C# 과 같은 언어들에 데이터 타입을 지정하는 것과 같다고 볼 수 있다.

타입스크립트의 타입에는 여러 종류가 있다.

굳이 나열하면 string, number, boolean, array, object, null, undefined, any, unknown, union, void 가 있다.

타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형
타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형

⊙ 타입스크립트 기본 타입 종류

타입스크립트는 자바스크립트에 자료형을 지정한 것이라 볼 수 있으며, 이것을 타입( type )이라 칭한다.

자바스크립트가 자료형에 관대한 특징이 있기 때문에, 의도하지 않은 코드 동작의 오류가 발생할 수 있다.

예를 들어, 자바스크립트의 + 연산자가 대표적인데, + 연산자는 숫자간 덧셈 연산도 하지만, 문자열에 + 가 들어간 경우 문자열 연결 동작을 하기 때문이다.

이 외에도 여러가지 경우들이 있다.

구구절절 말은 많았지만,
자바 또는 C# 처럼 자료형( 데이터 타입, data-type )을 지정한다고 보면 이해가 쉽다.

타입스크립트의 타입 자료형에는 여러가지가 존재하는데 그 중 일부는 다음과 같다.

  • string : 문자열
  • number : 숫자
  • boolean : 참/거짓
  • array : 배열
    • string[] : 문자열 배열
    • number[] : 숫자 배열
  • type : 타입 별칭
  • interface : 객체 구조
  • string | number : 문자열 또는 숫자
  • object : 객체 타입
  • null : 값이 비어 있음
  • undefined : 값이 할당되어 있지 않음
  • any : 아무 타입이나 가능
  • unknown : 타입을 모름
  • union : 여러 타입 중 하나
  • void : 반환값이 없음

⊙ 타입스크립트 기본 타입 문법

위에서 타입스크립트의 기본 타입에 대해 나열해 보았다.

찾아보니, 더 많은 타입들이 존재하지만, 위에 나열한 타입들은 많이 사용하는 것들을 기준으로 한 것이다.

하나씩 살펴보자. 어려운 것 같지만 문법이 생소해서 와닿지 않을 뿐이다.

먼저, 타입스크립트의 문법을 보면 다음과 같다.

let 변수명: 타입 = 값;

타입스크립트의 타입 문법은 모두 위의 형태를 가진다.

타입스크립트가 어렵다고 생각된다면 위의 구문을 눈에 익혀두자.

⊙ 문자열( string ) 타입 사용 방법

string은 타입스크립트에서 문자열을 다루는 타입으로,
문자, 단어, 문장처럼 텍스트 값을 저장할 때 사용할 수 있다.

코드를 보면 다음과 같다.

let message: string = "string 문자열 타입스크립트";
console.log(message);

변수명 message 에 문자열 타입 string 을 설정하고, 값을 설정했다.

그리고, console.log 로 화면에 나오는지 확인한다.

string 타입 / 타입스크립트
string 타입 / 타입스크립트

⊙ 숫자( number ) 타입 사용 방법

타입스크립트의 number 타입은 정수와 실수 등, 숫자 값을 변수, 함수 매개변수, 반환값 등에 지정할 때 사용한다.

자바스크립트와 같이 정수와 소수점 숫자 모두 number로 처리합니다.

코드를 보면 다음과 같다.

변수 age, price에 number 타입으로 숫자를 설정하고, 화면에 출력하고 있다.

let age: number = 30;
let price: number = 9900;

console.log(age);
console.log(price);

결과는 다음과 같다.

number 타입의 변수 age, price에 값을 설정하고 출력하고 있다.

number 타입 / 타입스크립트
number 타입 / 타입스크립트

⊙ 불리언( boolean ) 타입 사용 방법

타입스크립트의 불리언(boolean) 타입​은 참과 거짓을 나타내는 자료형이다.

true 또는 false 두 가지 값만 저장할 수 있는 것이 특징이다.

변수 이름 뒤에 `: boolean`을 작성하여 타입을 지정하며, 어떤 상태, 활성화 여부, 존재 여부처럼 조건을 판단하는 데 주로 사용한다.

코드를 보자.

let isActive: boolean = true;
console.log(isActive);

Activeis 변수 뒤에 boolean 타입을 설정하고 true 값을 설정하였다.

그리고, 화면출력을 했을 때 true 값이 나타나는 것을 확인할 수 있다.

boolean 타입 / 타입스크립트
boolean 타입 / 타입스크립트

⊙ 배열( array ) 타입 사용 방법

타입스크립트의 배열(Array) 타입은 여러 개의 값을 순서대로 저장하는 변수에 지정하는 자료형이다.

배열에 들어갈 요소의 타입 뒤에 `[]`를 붙이거나 `Array<타입>` 형식을 사용한다.

그리고, 배열의 값을 화면에 출력하기 위해 forEach 메서드를 사용할 수 있다.

코드는 다음과 같다.

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);

let fruits: string[] = ["사과", "바나나", "귤"];
fruits.forEach((fruit) => {
  console.log(fruit);
});

여러 개의 값을 배열 타입으로 설정하고, 화면출력하였다.

console.log 를 사용할 경우, 한 줄로 배열 형태 그대로 출력되며, forEach 를 사용할 경우, 한줄씩 출력하게 된다.

boolean 타입 / 타입스크립트
array 타입 / 타입스크립트

⊙ 배열( array ) 타입 사용 방법

배열 타입은 Array<타입> 형태로 사용할 수 있다.

방법은 같으며, 타입을 설정하는 부분만 조금 다를 뿐이다.

개념은 같으며, 코드는 다음과 같다.

let scores: Array<number> = [90, 80, 70];

console.log(scores);
scores.forEach((info) => {
  console.log(info);
});

console.log를 사용하여 배열을 출력할 경우 한 줄로 모두 출력하며,
forEach를 사용하여 배열을 출력할 경우 각각의 값을 한 줄씩 출력한다.

배열( array ) 타입 사용 방법
배열( array ) 타입 사용 방법

⊙ 튜플( tuple ) 타입 사용 방법

타입스크립트의 튜플(Tuple)은 배열에 저장되는 값의 개수와 배열의 각 위치의 타입을 미리 지정하는 방식이다.

일반적인 배열은 모든 요소가 같은 타입을 가지는 경우에 주로 사용하지만,
튜플의 경우 서로 다른 타입의 값을 정해진 순서로 배열처럼 설정하여 사용할 수 있다.

튜플은 배열과 같이 대괄호 안에 각 요소의 타입을 순서대로 작성한다.

let user: [string, number] = ["김철수", 25];

console.log(user);
console.log("이름:", user[0]);
console.log("나이:", user[1]);

~~~

튜플( tuple ) 타입 사용 방법

~~~

⊙ 객체( object ) 타입 사용 방법

타입스크립트에서 객체 타입은 여러 개의 데이터를 하나의 구조로 사용하는 데이터 덩어리이다.

객체가 가져야 할 속성과 데이터 타입을 미리 지정하여 사용되며,
만약, 객체에 데이터 설정시 타입이 잘못된 값이 들어가는 것을 방지할 수 있다.

let person: {  
    name: string;  
    age: number;  
    isStudent: boolean;
} = {  
    name: "이영희",  
    age: 22,  
    isStudent: true,
};

/* 객체 전체 출력 */
console.log(person);

/* 각각의 속성 출력 */
console.log(person.name);
console.log(person.age);
console.log(person.isStudent);

/* 문장으로 출력 */
console.log(`이름: ${person.name}`);
console.log(`나이: ${person.age}`);
console.log(`학생 여부: ${person.isStudent}`);

~~~

객체( object ) 타입 사용 방법
객체( object ) 타입 사용 방법

~~~

⊙ any 타입 사용 방법

타입스크립트의 any는 변수에 저장되는 값의 타입을 명확히 지정하지 않는다.

자바스크립트의 var 와 비슷한 특징을 가진다.

any 타입으로 선언한 변수에는 문자열, 숫자, 불리언, 배열, 객체 등의 모든 종류의 값을 저장할 수 있다.

데이터 타입이 지정되어 있지 않기 때문에, 코드 동작시 안정성은 보장되지 않는다.

// any 타입 예제
let anything: any = "문자열";
console.log(anything); // 문자열

anything = 100;
console.log(anything); // 100

anything = true;
console.log(anything); // true

~~~

타입스크립트 any 타입 사용 방법
any 타입 사용 방법

~~~

⊙ unknown 타입 사용 방법

unknown 타입은 어떤 값이 들어올지 알 수 없을 때 사용한다.

문자열, 숫자, 객체, 배열 등 모든 값을 저장할 수 있다는 점은 any와 비슷하다.

하지만, 값을 사용하기 전에 반드시 타입을 확인해야 한다는 차이가 있다.

let value: unknown = "Hello";
if (typeof value === "string") {
  console.log(value.toUpperCase());
} else {
  console.log("문자열이 아닙니다.");
}

~~~

타입스크립트 unknown 타입 사용 방법
unknown 타입 사용 방법

~~~

⊙ null 타입 사용 방법

타입스크립트의 null은 변수에 유효한 값이 없다는 것을 뜻한다.

메모리적으로 변수가 차지한 메모리 공간은 있지만, 공간이 비어 있는 상태이다.

만약, strictNullChecks 옵션이 활성화되어 있는 경우,
string, number와 같은 일반 타입에는 null을 직접 저장할 수 없다.

null을 허용하려면 union 타입인 |를 사용하여 string | null과 같이 선언해야 한다.

let emptyValue: null = null;
console.log(emptyValue);

~~~

타입스크립트 null 타입 사용 방법
null 타입 사용 방법

~~~

⊙ undefined 타입 사용 방법

타입스크립트에서 undefined는 변수에 값이 아직 설정되지 않은 상태를 뜻한다.

자바스크립트에서 변수를 선언한 뒤 값을 지정하지 않으면 기본적으로 undefined가 저장된다.

let notAssigned: undefined = undefined;
console.log(notAssigned);

~~~

타입스크립트 undefined 타입 사용 방법
undefined 타입 사용 방법

~~~

⊙ union 타입 사용 방법

타입스크립트에서 Union 타입은 하나의 변수에 두 개 이상의 타입을 설정할 때 사용한다.

타입과 타입 사이에 세로선 기호인 `|`를 작성하여 정의한다.

let id: string | number;
id = "user001";
console.log(id);

id = 1001;
console.log(id);

function printUserId(userId: string | number): void {
  console.log("사용자 ID:", userId);
}

printUserId("user001");
printUserId(1001);

~~~

타입스크립트 union 타입 사용 방법
union 타입 사용 방법

~~~

⊙ literal 타입 사용 방법

타입스크립트의 리터럴 타입(Literal Type)은 문자열, 숫자, 불리언과 같은 자료형의 범위를 특정 값으로 제한하는 기능이다.

리터럴 타입을 사용하면 지정된 문자열만 저장할 수 있다.

프로그램을 사용할 때 코드와 같은 상수값을 지정하여 사용할 수 있다.

let direction: "left" | "right" | "up" | "down";
direction = "left";
console.log(direction);

~~~

타입스크립트 literal 타입 사용 방법
literal 타입 사용 방법

~~~

⊙ function parameter / return type 타입 사용 방법

타입스크립트는 함수의 매개변수(Parameter)​와 반환값(Return Value)​에 타입을 지정할 수 있다.

이를 활용하면,
함수가 어떤 데이터를 받고, 실행 결과로 어떤 데이터 타입를 반환하는지 명확하게 정의할 수 있다.

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

const result: number = add(10, 20);
console.log(result);

~~~

타입스크립트 function parameter / return type 타입 사용 방법
function parameter / return type 타입 사용 방법

~~~

⊙ void 타입 사용 방법

타입스크립트의 void 타입은 함수가 실행된 후 반환하는 값이 없다는 것을 명시한다.

함수의 반환 타입에 지정하며,
해당 함수는 특정 작업만 수행하고 결과값을 반환하지 않는다는 의미를 가진다.

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

printMessage("안녕하세요. TypeScript void 예제입니다.");

~~~

타입스크립트 void 타입 사용 방법
void 타입 사용 방법

~~~

⊙ function 타입 사용 방법

타입스크립트의 function 타입은 함수가 전달받는 매개변수의 타입과 함수가 반환하는 값의 타입을 지정하는 방법이다.

함수의 입력값과 출력값을 명확하게 정의하면,
잘못된 인수 전달이나 반환값 사용으로 발생하는 오류를 코드 작성 단계에서 확인할 수 있다.

함수 선언에서는 매개변수 이름 뒤에 타입을 작성하고, 소괄호 뒤에 반환 타입을 지정한다.

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

printMessage("안녕하세요, TypeScript!");
printMessage("void 함수는 값을 반환하지 않습니다.");

~~~

타입스크립트 function 타입 사용 방법
function 타입 사용 방법

~~~

⊙ never 타입 사용 방법

타입스크립트의 never 타입은 어떤 값도 가질 수 없는 타입이다.

코드상에서 절대로 발생하지 않는 상태 또는 함수가 값을 반환하지 못하는 상황을 명확하게 표현할 때 사용한다.

주로, 예외처리를 위해 사용된다.

function throwError(message: string): never {
  throw new Error(message);
}

function validateAge(age: number): void {
  if (age < 0) {
    throwError("나이는 0보다 작을 수 없습니다.");
  }
  console.log(`입력된 나이: ${age}세`);
}

try {
  validateAge(-10);
} catch (error: unknown) {
  if (error instanceof Error) {
    console.error(`오류 발생: ${error.message}`);
  } else {
    console.error("알 수 없는 오류가 발생했습니다.");
  }
}

~~~

타입스크립트 never 타입 사용 방법
never 타입 사용 방법

~~~

⊙ type alias 타입 사용 방법

타입스크립트의 type alias는 특정 타입에 새로운 이름을 붙여 사용하는 기능이다.

type 키워드 다음에 타입 이름( type alias )을 작성하고, 등호 뒤에 실제 타입 구조를 정의한다.

객체의 사용 편의성을 위한 기능이다.

type Product = {
  id: number;
  name: string;
  price: number;
  isSoldOut: boolean;
};

const product: Product = {
  id: 1,
  name: "노트북",
  price: 1_200_000,
  isSoldOut: false,
};

function printProduct(product: Product): void {
  console.log(`상품 번호: ${product.id}`);
  console.log(`상품명: ${product.name}`);
  console.log(`가격: ${product.price.toLocaleString("ko-KR")}원`);
  console.log(`판매 상태: ${product.isSoldOut ? "품절" : "판매 중"}`);
}

printProduct(product);

~~~

타입스크립트 type alias 타입 사용 방법
type alias 타입 사용 방법

~~~

⊙ interface 타입 사용 방법

타입스크립트의 interface는 객체가 가져야 할 속성과 메서드의 구조만을 정의한다.

객체의 데이터 형태를 미리 지정하여, 사전에 잘못된 속성이나 타입이 사용되는 것을 방지한다.

const userName: string = "홍길동";

const age: number = 30;

const isActive: boolean = true;

const numbers: number[] = [10, 20, 30, 40, 50];

const fruits: string[] = ["사과", "바나나", "포도"];

const user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "일반 사용자",
};

const person: [string, number] = ["김철수", 25];

const result: string | number = "성공";

type Product = {
  id: number;
  name: string;
  price: number;
};

const product: Product = {
  id: 100,
  name: "노트북",
  price: 1_500_000,
};

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
}

const admin: User = {
  id: 1,
  name: "관리자",
  email: "admin@test.com",
  isAdmin: true,
};

console.log(userName);
console.log(age);
console.log(isActive);
console.log(numbers);
console.log(fruits);
console.log(user);
console.log(person);
console.log(result);
console.log(product);
console.log(admin);

~~~

타입스크립트 interface 타입 사용 방법
interface 타입 사용 방법

~~~

댓글

비주얼 스튜디오 코드 VSCode 설치하기 - 마이크로소프트 공식 홈페이지

이미지
VSCode( 비주얼스튜디오코드, Visual Studio Code )는 마이크로소프트( Microsoft )에서 제공하는 있는 무료 코드 편집기 프로그램이다. 프로그래밍 언어의 소스 코드를 작성하고 수정하며, 확장 기능을 설치하여 개발 환경을 구성할 수 있다. 윈도우즈, 맥OS, 리눅스( Windows, macOS, Linux )에서 사용할 수 있으며, 공식 홈페이지를 통해 자신의 운영체제에 맞는 설치 파일을 다운로드받고 설치할 수 있다. 윈도우즈의 경우, 인스톨러 파일( Installer )를 이용하여 설치할 수 있다. 설치파일을 다운로드하고 실행한 다음 화면의 안내에 따라 VSCode 설치를 진행하면 된다. 설치가 완료되면 VSCode를 실행하여 자신이 원하는 코드를 작성할 수 있다. 비주얼 스튜디오 코드 설치하기 - 마이크로소프트 공식 홈페이지 VSCode 무료 소스 코드 편집기 VSCode(비주얼 스튜디오 코드, Visual Studio Code)는 Microsoft에서 개발한 무료 소스 코드 편집기이다. 소스 코드란 컴퓨터 프로그램을 만들기 위해 프로그래밍 언어로 작성한 명령문의 집합이며, VSCode에서 소스 코드를 작성하고 수정할 수 있다. VSCode의 특징을 보자. 무료 사용 VSCode 기본 프로그램을 무료로 다운로드하여 사용 다중 운영체제 Windows, macOS, Linux를 지원 코드 편집 여러 프로그래밍 언어의 소스 코드를 작성하고 수정 가능 확장 기능 Extensions를 이용하여 언어 지원과 개발 도구를 추가 디버깅 지원되는 언어와 개발 환경에서 프로그램 오류를 조사 Git 통합 Git을 이용한 소스 코드 변경 관리 기능을 제공 VSCode 자체는 코드 편집기이고 프로그래밍 언어에 따라 컴파일러, 실행 환경, 개발 도구 등을 별도로 설치해야 할 필요가 있다. 만약, Java 프로그램을 개발할 때는 VSCode 외에 JDK와 관련 확장 기능이 필요하다. VSCode 무료 소스 코드 편집기 VSCode 설치 전 확인 사항 VSCo...

이 블로그의 인기 게시물

ChatGPT Codex GitHub 연결 해제 방법 (앱 삭제까지 정리)

C언어 return 종류와 차이 | return, return 0, return -1, return n

C언어 프로그램 종료 방법 3가지 비교 (실전 예제 포함) | exit() abort() 함수 사용 방법