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

-

타입스크립트( 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 타입 사용 방법

~~~

위치: 대한민국 서울특별시

댓글

댓글 쓰기

이 블로그의 인기 게시물

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

-
이미지
ChatGPT의 Codex를 사용하기 위해 Github를 연결했지만, 가끔씩 정리가 필요하다. Codex와 Github의 연결이 필요없는 경우들이 발생할 수 있기에 이 때는 Github에서 직접 연결해제 또는 삭제를 하는 것이 가장 확실하다. 깃허브( GitHub )에 연동된 코덱스( Codex) 연결을 해제하기 위해 깃허브 설정의 Settings > Application > ChatGPT Codex Connector 항목에서 Uninstall 을 수행하면 된다. 잘 사용하던 코덱스를 굳이 해제하는 이유는 개발자마다 다를 것이지만, 다른 깃허브의 연결이 필요할 수도 있고, 다른 PC에서 잠깐 연결한 깃허브의 코드를 노출하지 않기 위함도 있을 것이다. 깃허브 코덱스 연결 해제하기 방법 1.Codex 무엇? 챗지피티-코덱스( ChatGPT-Codex )는 사람이 어떤 작업을 문자열 프롬프트로 만들어 요청을 하면, 코드의 생성부터 수정, 분석까지 개발과 유지보수에 대한 지원을 도와주는 AI 개발 도구이다. 깃허브 연동을 통해 실제 프로젝트 코드에 직접 접근하여 자동화 코딩 개발 환경을 만들 수 있다. 하지만, 코덱스의 훌륭한 강점이 오히려 반대로 작용하는 부분들도 생기고, 개발 환경에서 코덱스로 생기는 branch에 상황에 따라 과도하게 생길 수 있다. 물론, 이것은 깃허브 홈페이지에서 삭제할 수 있지만, 코덱스의 연결점을 끊고, 다시 시작할 수도 있다. 2. Github에서 ChatGPT-Codex 연결을 해제하기 하나씩 진행해 보자. 모든 과정은 따라하기 형식으로 작성하였다. 성격 급한 분들을 위한 코덱스, 깃허브 연결 해제 방법 또한 순서대로 작성해 본다. 순서는 다음과 같다. ChatGPT-Codex에서 GitHub 연결 확인하기. GitHub 홈페이지 접속하기. 프로필 아이콘 > Settings 메뉴 접속하기. 좌측메뉴 > Applilcations 메뉴 선택하기. ChatGPT Codex Connector 항목의 Configure 선택...
자세한 내용 보기

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

-
이미지
C언어에서 return은 함수의 실행을 끝내고, 필요 시 동작 또는 결과 값을 호출한 곳으로 함께 전달한다. 리턴의 종류는 크게 4가지로 return, return 0 , return -1 , return n 이다. 결과값이 없거나 0인 경우 종료, 0이 아닌 경우 에러 또는 특정 상태를 의미한다. C언어 return 종류와 차이 return 역할 모든 프로그램 언어들은 수행한 처리 결과를 전달할 수 있다. 수행한 처리 결과를 전달하는 때 사용하는 것이 return 이다. return 구문을 활용하면 처리되는 곳의 상태와 값을 알 수 있다. C언어 사용되는 return 구문의 종류는 반환값이 없는 경우와 있는 경우, 반환값이 0 인 경우와 0이 아닌 경우로 나눠진다. 프로그램 실행의 최소 단위 함수의 역할 C언어의 함수에 대해 잠깐 언급해 본다. OOP와 같은 프로그램 언어들이 소개되면서 함수란 용어 보다는 메서드란 용어를 주로 사용하는데 뭐, 같은 말이다. 프로그램이 실행되는 최소단위로 보면 된다. 그런데, 함수를 공부하고 있다면 return 구문을 자주 보게 된다. 보통 처리 결과를 호출한 곳으로 되돌리는 역할을 하는 것이 return 구문인다. 여기서 의미하는 함수는 프로그램의 시작점인 main() 함수도 포함된다. 그렇다면 main() 은 return 구문을 어디로 되돌릴까 ? 윈도우 또는 리눅스와 같은 main함수를 실행한 OS 이다. 함수는 이 정도로 간단히 언급해 본다. 리턴의 종류 return 의 역할은 프로그램의 흐름을 넘기고, 실행한 결과에 대한 값을 전달한다고 언급했다. 보통의 처리결과는 4가지가 있다. `종료(중단), 성공, 에러(실패), 사용자 지정`이다. 그럼에도 공통점은 처리를 중단한다는 점에 있다. 리턴 결과에 대한 코드와 내용은 프로그램을 제작한 곳마다 사람마다 다르다. 먼저 위에서 언급한 것에 대한 의미를 보자. 프로그램에서 언급하는 것은 좀 더 상세하게 나열 할 수 있다. 주목할 점은 여기에서 언급하는 함수는 프로그램 시작인 ...
자세한 내용 보기

챗지피티 코덱스와 깃허브 연동 방법 | VSCode 사용하기

-
이미지
챗지피티의 코덱스( Codex )와 깃허브( Github )를 연결하려고 했지만, 연결이 되지 않아 VSCode에서 직접 연결을 하였다. VSCode에 깃허브를 직접 연결하니 오히려 더 좋은 느낌이다. 코덱스에 프롬프트를 실행하면 자동으로 파일을 만들고 나는 그저 깃허브에 저장소를 만들고 푸시( Push )만 하면 된다. 오히려, 챗지피티 코덱스 페이지에서 연결이 제대로 되지 않은 것이 다행(??)이란 느낌이다. 새로운 것을 시도해 보고, 좀 더 편한 방법을 찾았기 때문이다. 왜 연결이 되지 않는 거냐 ?? 좀 편하게 작업하려고 코덱스( Codex )에 깃허브( Github )를 연결하고자 했다. 인증까지 하고, 윈도우 자동 인증까지 삭제하고 다시 했음에도 연결이 되지 않았다. 아~ 뭐지 ? 찾아보니 버그라고 하는데 ~ 몇 일 동안 계속 이어지는 것 보면 이건 뭔가 문제가 있다고 볼 수 밖에 없다. ( 그 원인과 해결책을 찾을 수가 없다. ) 아아 ~ 코덱스 ~ 인증까지 했는데 깃허브 연결이 왜 안되냐 ~ 다행스럽게도 VSCode에서 연결이 된다는 것을 찾게 되었다. 잘 모르겠는 화면에서 익숙한 아이콘과 제목이 눈에 보였다. 바로 ` IDE에서 시도해 보기 ` 버튼이었다. VSCode에서 할 수 있다는 얘기는 들었지만, 이렇게 보여주니 시도해 보는게 당연하겠지. 일단 자세한 내용을 찾아보니 이미 많은 분들이 VSCode에서 챗지피티의 코덱스를 연결해 사용하고 있었다. VSCode가 깃허브에도 연결되니, 생각해 보면 굳이 코덱스를 웹에서 할 필요는 없겠다는 생각이 들었다. 바로 시도를 해 본다. 새로운 방법을 찾다. 이런 새로운 방법을 찾게 되면 왠지 모를 도파민이 생기는 느낌이다. 어쨌든 VSCode를 실행하고 코덱스를 설치하게 되었다. 평소 웹에서 작업하다보니 VSCode에 설치된 코덱스가 익숙하진 않다. 뭐, 걱정할 필요는 없다. 화면을 캡쳐하고 챗지피티 또는 제미나이에 캡쳐화면 자체를 업로드하고 물어보면 된다. 화면 우측 하단에 프롬프트 입력창이 있다. ...
자세한 내용 보기