타입스크립트 문자열 타입 사용 코드 예제 / (let | const) 변수명: string = "문자열";

타입스크립트를 공부할 때 처음 접하게 되는 것이 타입이다.

타입스크립트는 자바스크립트와 비교된다.

자바스크립의 경우 변수에 데이터 타입에 상관없이 자유롭게 설정할 수 있지만, 타입스크립트는 변수나 함수에 들어갈 값의 타입을 미리 설정하여 사용한다.

데이터 타입를 사용하는 경우 이름은 문자열, 나이는 숫자, 로그인 여부는 참 또는 거짓으로 정해두면 코드 작성 중 실수를 줄일 수 있는데, 이는 다른 언어인 자바 또는 C#의 데이터 타입과 개념적으로 같다.

이제 문자열 타입인 string 타입 코드와 설명을 보자.

타입스크립트 문자열 타입 사용 코드 예제 / (let | const) 변수명: string = "문자열";

export {};

let name: string = "홍길동";
let message: string = "안녕하세요";

console.log(message);
console.log(name);
console.log(`${message}, ${name}님!`);

let name: string = "홍길동";은 name이라는 변수를 만들고, 문자열인 "홍길동"을 설정하고 있다.

: string은 이 변수에 문자열만 저장할 수 있다는 뜻이다.

let message: string = "안녕하세요";는 message라는 변수에 "안녕하세요"라는 문자열을 설정한다.

console.log()는 변수에 설정된 내용을 콘솔 화면에 출력하는 기능이다.

마지막 코드에서는 백틱과 ${변수명}을 사용하여 두 변수의 내용을 하나의 문장으로 연결할 수 있다.

실행결과는 다음과 같다.

타입스크립트 string 결과

export {};

// name 변수에는 문자열만 저장할 수 있습니다.
let name: string = "홍길동"; 
console.log(name); 

// 문자열을 다시 대입하는 것은 가능합니다. 
// 숫자는 문자열 타입이 아니므로 대입할 수 없습니다.
name = "김철수"; 
console.log(name);

let 키워드를 사용해 name이라는 변수를 선언했다.

변수 이름 뒤에 작성된 : string은 name 변수의 타입이 문자열 타입이라는 뜻이다.

name 변수에는 "홍길동", "김철수"와 같은 따옴표로 감싼 문자열만 설정할 수 있다.

name = "김철수"; 문자열이므로 string 타입으로 선언된 name 변수에 정상적으로 대입할 수 있다.

name = 123; 123은 문자열이 아니라 숫자 타입인 number이며, string 타입으로 선언된 변수에는 대입할 수 없습니다.

이 코드를 작성하면 타입스크립트는 `Type 'number' is not assignable to type 'string'.` 같은 오류를 표시할 것이다.

이것은 number 타입의 값은 string 타입 변수에 할당할 수 없다는 의미이다.

숫자 123을 문자열로 저장하려면 다음과 같이 따옴표로 감싸고 숫자 타입을 문자열 타입으로 변경하여 사용해야 한다.

• 타입스크립트 숫자를 문자로 변경하기 방법
• name = "123";
• name = String(123);

타입스크립트 string 결과

export {};

// 문자열(string) 타입 변수 선언
let title: string = "타입스크립트";
let userName: string = "민수";
let email: string = "test@example.com";
let address: string = "서울시 강남구";

// 각각의 변수 출력
console.log("제목:", title);
console.log("이름:", userName);
console.log("이메일:", email);
console.log("주소:", address);

// 여러 문자열을 하나의 문장으로 만들기
let introduction: string = `${userName}님은 ${address}에 거주하며, 이메일 주소는 ${email}입니다. 현재 ${title}를 공부하고 있습니다.`;

console.log(introduction);

`title`, `userName`, `email`, `address`라는 네 개의 변수를 선언했다.

각 변수 이름 뒤에 `: string`을 작성하여 각 변수에는 문자열 값만 저장할 수 있도록 string 타입을 선언했다.

`title` 변수는 `string` 타입으로 선언되었으며 `"타입스크립트"`라는 문자열을 설정했다.

`userName` 변수에는 사용자의 이름인 `"민수"`를 설정했다.

`email` 변수에는 이메일 주소를 문자열 형태로 설정했다.

`address` 변수에는 주소 정보를 문자열로 설정했다.

마지막으로 `console.log()`를 사용하여 각 변수에 저장된 값을 콘솔에 출력합니다.

타입스크립트 string 결과

export {};

/* 문자열 타입 변수 선언 */
let userName: string = "민수";

/* 처음 저장된 문자열 값 출력 */
console.log("변경 전 이름:", userName);

/* 문자열 값이므로 대입 가능 */
userName = "지영";

/* 변경된 문자열 값 출력 */
console.log("변경 후 이름:", userName);

/* 불리언 값은 문자열 타입 변수에 대입할 수 없음 */
/* userName = true; */

/* 최종 결과 출력 */
console.log("최종 사용자 이름:", userName);

위 코드는 타입스크립트에서 string 타입 변수를 선언하고 사용하고 있다.

let userName: string = "민수";는 userName 변수가 문자열만 저장할 수 있도록 타입을 string으로 지정하였다.

따라서, "지영"과 같은 다른 문자열은 정상적으로 대입할 수 있다.

그러나, true는 문자열이 아니라 boolean 타입이므로 userName 변수에 대입할 수 없다.

해당 코드의 주석을 해제하면 타입스크립트 컴파일러에서 `Type 'boolean' is not assignable to type 'string'.`와 같은 타입 오류가 발생할 수 있다.

문자열 타입으로 선언한 변수에는 문자열 값만 저장할 수 있으며, 숫자나 불리언처럼 다른 타입의 값을 대입하면 오류가 발생한다.

결과 화면은 다음과 같다.

타입스크립트 string 결과

export {};

/* 이름을 전달받아 인사말 문자열을 반환하는 함수 */
function greet(name: string): string {
  return `안녕하세요, ${name}님`;
}

/* greet 함수 호출 후 반환된 문자열 저장 */
const result: string = greet("민수");

/* 실행 결과 출력 */
console.log(result);

/* 문자열 전달: 정상 실행 */
console.log(greet("철수"));

/* 숫자 전달: 타입 오류가 발생하므로 실행 코드에서는 주석 처리 */
// greet(100);

이제 코드를 보자.

greet() 함수는 name 매개변수로 문자열만 받을 수 있다.

name: string은 함수에 오롯이 문자열만을 넣어야 한다.

함수 뒤의 : string은 실행 결과로 문자열을 반환함을 뜻한다.

결과값은 백틱으로 만든 템플릿 문자열을 사용해 전달받은 이름과 인사말을 결합한 뒤 반환한다.

greet("민수")처럼 문자열을 전달하면 정상적으로 실행되고 화면에 문자열이 출력되는 것을 볼 수 있다.

반환된 인사말은 result 변수에 저장되며, console.log()를 통해 콘솔에 출력된다.

주석처리된 부분인, greet(100) 부분을 보자.

만약, greet(100)은 숫자를 전달한다면, 아래와 같은 오류를 볼 수 있다.

`Argument of type 'number' is not assignable to parameter of type 'string'.`

결과화면을 보면 다음과 같다.

타입스크립트 string 결과

export {};

/* 사용자 데이터 구조 정의 */
type User = {
  id: string;
  name: string;
  email: string;
};

/* User 타입을 사용하는 객체 생성 */
const user: User = {
  id: "user-001",
  name: "홍길동",
  email: "hong@example.com",
};

/* 사용자 정보를 출력하는 함수 */
function printUserInfo(userInfo: User): void {
  console.log("사용자 ID:", userInfo.id);
  console.log("사용자 이름:", userInfo.name);
  console.log("이메일:", userInfo.email);
}

/* 함수 실행 */
printUserInfo(user);

type User는 사용자 정의 타입으로 사용자 객체의 데이터 구조를 정의한다.

id, name, email 속성은 모두 문자열로 사용하도록 string 타입으로 설정했다.

const user: User는 user 객체는 반드시 User 타입의 구조를 따르도록 설정한다.

만약, 속성이 빠지거나 다른 타입의 자료형 값이 입력되면 타입스크립트는 컴파일 단계에서 오류를 표시할 것이다.

printUserInfo() 함수에서 User 타입의 객체를 매개변수로 전달받아 사용자 ID, 이름, 이메일을 콘솔에 출력하도록 한다.

반환 타입은 void 로 반환하는 값은 없다.

타입스크립트 string 결과

export {};

// 문자열만 저장할 수 있는 배열
const tags: string[] = [
  "typescript",
  "javascript",
  "frontend"
];

// 배열의 전체 값 출력
console.log(tags);

// 첫 번째 문자열 출력
console.log(`첫 번째 태그: ${tags[0]}`);

// 새로운 문자열 추가
tags.push("web-development");

// 배열의 문자열을 하나씩 출력
tags.forEach((tag: string, index: number): void => {
  console.log(`${index + 1}. ${tag}`);
});

// 문자열 검색
const searchTag: string = "typescript";
const hasTag: boolean = tags.includes(searchTag);

console.log(`${searchTag} 포함 여부: ${hasTag}`);

// tags.push(100);
// 오류: number 타입은 string[] 배열에 추가할 수 없습니다.

const tags: string[]는 tags 변수에 문자열 배열임을 설정한다.

string[] 타입을 지정했기 때문에 `typescript`와 같은 문자열은 저장할 수 있지만, 숫자나 불리언 값은 추가할 수 없다.

push()는 배열에 새로운 문자열을 추가하고, forEach()는 배열에 저장된 문자열을 순서대로 반복 처리하는 명령어이다.

includes()는 배열에 특정 문자열이 포함되어 있는지 확인하며, 특정 문자열이 존재하면 true, 존재하지 않으면 false 값을 반환한다.

위의 코드의 실행 결과는 아래와 같다.

타입스크립트 string 결과

/* 문자열 배열 선언 */
const tags: Array<string> = ["typescript", "react", "node"];

/* 새로운 문자열 데이터 추가 */
tags.push("frontend");

/* 첫 번째 문자열 가져오기 */
const firstTag: string = tags[0];

/* 문자열 배열을 순회하며 출력 */
tags.forEach((tag: string, index: number): void => {
  console.log(`${index + 1}. ${tag}`);
});

/* 배열의 문자열을 하나의 문자열로 결합 */
const tagText: string = tags.join(", ");

/* 결과 출력 */
console.log(`첫 번째 태그: ${firstTag}`);
console.log(`전체 태그: ${tagText}`);

/* 문자열 배열에는 문자열만 추가할 수 있음 */
// tags.push(100);

Array<string>은 배열 안에 문자열 타입의 값만 저장하였다.

tags.push("frontend")를 사용하여 새로운 문자열을 배열에 추가하고, tags[0]은 첫 번째 문자열을 가져온다.

forEach()는 배열의 각 문자열을 반복하며, 차례대로 출력하며,
join(", ")은 배열에 저장된 문자열들을 쉼표로 연결하며 하나의 문자열로 만든다.

숫자인 100을 추가하면 string 타입이 아니므로 TypeScript에서 오류가 발생할 수 있다.

타입스크립트 string 결과

export {};

/* 사용할 수 있는 문자열 값을 세 가지로 제한합니다. */
type UserRole = "admin" | "user" | "guest";

/* role 변수에는 UserRole에 정의된 문자열만 저장할 수 있습니다. */
let role: UserRole = "admin";

console.log(`초기 권한: ${role}`);

/* UserRole에 포함된 값이므로 정상적으로 변경됩니다. */
role = "user";

console.log(`변경된 권한: ${role}`);

/*
UserRole에 "manager"가 포함되어 있지 않으므로 타입 오류가 발생합니다.
오류를 확인하려면 아래 코드의 주석을 해제합니다.
*/

/* role = "manager"; */

UserRole은 타입스크립트의 문자열 리터럴 유니언 타입이다.

`admin`, `user`, `guest`라는 세 개의 문자열만 유효한 값으로만 설정되고, 사용할 수 있다.

role 변수는 UserRole 타입으로 선언되었기 때문에 `admin`과 `user`는 정상적으로 저장할 수 있다.

하지만, `manager`는 UserRole에 포함되지 않은 문자열이며, 혹여, 할당하려고 한다면 컴파일 단계에서 타입 오류가 발생하게 된다.

`Type '"manager"' is not assignable to type 'UserRole'.`

문자열 유니언 타입을 사용할 경우,
사용자 권한, 주문 상태, 화면 모드처럼 정해진 값만 허용해야 하는 경우에 사용할 수 있다.

타입스크립트 string 결과

export {};

/* 주문 상태로 사용할 문자열만 유니온 타입으로 정의 */
type OrderStatus =
  | "pending"
  | "paid"
  | "shipping"
  | "completed"
  | "cancelled";

/* 모든 상태를 처리했는지 검사하는 함수 */
function assertNever(value: never): never {
  throw new Error(`처리되지 않은 주문 상태입니다: ${value}`);
}

/* 주문 상태에 해당하는 한글 메시지를 반환하는 함수 */
function printOrderStatus(status: OrderStatus): string {
  switch (status) {
    case "pending":
      return "결제 대기 중";

    case "paid":
      return "결제 완료";

    case "shipping":
      return "배송 중";

    case "completed":
      return "주문 완료";

    case "cancelled":
      return "주문 취소";

    default:
      return assertNever(status);
  }
}

/* 올바른 문자열이므로 정상적으로 실행 */
const currentStatus: OrderStatus = "paid";

console.log(printOrderStatus(currentStatus));
console.log(printOrderStatus("shipping"));

/* OrderStatus에 포함되지 않은 문자열이므로 컴파일 오류 */
// printOrderStatus("done");

OrderStatus는 타입스크립트의 문자열 리터럴 유니온 타입이다.

`pending`, `paid`, `shipping`, `completed`, `cancelled` 중 하나만 값으로 사용할 수 있다.

printOrderStatus() 함수의 status 매개변수에는 OrderStatus 타입이 지정되어 있기 때문에, 정의된 상태만 전달할 수 있으며, 함수는 switch문을 사용해 각 상태에 맞는 한글 문자열을 반환하게 된다.

`done`은 OrderStatus에 포함되지 않은 문자열이므로 타입스크립트가 코드를 실행하기 전에 오류를 검출하고, 주문 상태의 오타나 잘못된 값이 프로그램에 전달되는 것을 방지한다.

assertNever() 함수는 새로운 주문 상태를 추가했지만,
switch문에서 처리하지 않은 경우를 검사한다.

OrderStatus에 "refunded"를 추가하고 case "refunded"를 작성하지 않는다면, 타입 오류가 발생하므로, 모든 주문 상태를 빠짐없이 검증하고 처리할 수 있다.

타입스크립트 string 결과

export {};

/* 상품 크기 문자열 타입 */
type Size = "small" | "medium" | "large";

/* 상품 색상 문자열 타입 */
type Color = "red" | "blue";

/*
Size와 Color 타입을 하이픈(-)으로 연결한 문자열 타입입니다.

생성 가능한 문자열:
"small-red"
"small-blue"
"medium-red"
"medium-blue"
"large-red"
"large-blue"
*/
type ProductOption = `${Size}-${Color}`;

/* ProductOption 타입에 포함되므로 정상 */
const option1: ProductOption = "small-red";

/* ProductOption 타입에 포함되므로 정상 */
const option2: ProductOption = "large-blue";

/* ProductOption 타입에 포함되므로 정상 */
const option3: ProductOption = "medium-red";

/*
오류 예제입니다.

"big"은 Size 타입에 포함되지 않으므로
주석을 해제하면 타입스크립트 오류가 발생합니다.

const invalidOption: ProductOption = "big-red";
*/

/* 상품 옵션을 출력하는 함수 */
function printProductOption(option: ProductOption): string {
  return `선택한 상품 옵션: ${option}`;
}

/* 함수 실행 결과 출력 */
console.log(printProductOption(option1));
console.log(printProductOption(option2));
console.log(printProductOption(option3));

Size 타입은 상품 크기를 `small`, `medium`, `large`으로 설정하고, 하나만 사용할 수 있도록 제한다.

Color 타입은 상품 색상을 `red`, `blue`으로 설정하고, 하나만 사용할 수 있도록 제한한다.

ProductOption은 타입스크립트의 템플릿 리터럴 타입(Template Literal Type)을 사용한다.

Size와 Color의 문자열을 하이픈으로 연결하여 사용할 수 있는 모든 문자열 조합을 자동으로 생성하도록 한다.

`big`이라는 문자열이 Size 타입에 정의되어 있지 않기 때문에 `big-red`의 경우 오류가 발생한다.

printProductOption 함수의 매개변수도 ProductOption 타입으로 지정되어 있으며, 정해진 형식의 상품 옵션만 함수에 전달할 수 있다.

타입스크립트 string 결과

export {};

/* 소문자 문자열 리터럴 타입을 정의합니다. */
type LowerName = "typescript";

/* Uppercase 유틸리티 타입으로 모든 영문자를 대문자로 변환합니다. */
type UpperName = Uppercase<LowerName>;

/* UpperName 타입에는 "TYPESCRIPT" 문자열만 할당할 수 있습니다. */
const name: UpperName = "TYPESCRIPT";

/* 변수에 저장된 문자열을 콘솔에 출력합니다. */
console.log(name);

/*
const invalidName: UpperName = "typescript";

오류 발생:
소문자 "typescript"는 대문자로 변환된
UpperName 타입인 "TYPESCRIPT"와 일치하지 않습니다.
*/

LowerName은 `typescript`라는 값만 허용하는 문자열 리터럴 타입으로 설정한다.

Uppercase<LowerName>은 TypeScript가 제공하는 내장 유틸리티 타입으로, 문자열 리터럴 타입에 포함된 영문자를 모두 대문자로 변환한다.

UpperName 타입은 대문자 `TYPESCRIPT`로 설정된다.

name 변수는 UpperName 타입으로 선언되었기 때문에 대문자로 변환된 문자열`TYPESCRIPT`만 저장할 수 있습니다.

`typescript`나 `Typescript`처럼 대소문자가 다른 문자열을 할당하면 컴파일 오류가 발생하게 된다.

export {};는 현재 파일을 모듈로 인식하게 하여 브라우저 전역 객체의 name 속성과 변수 이름이 충돌하는 것을 방지한다.