'typescript' 태그의 글 목록

typescript

[Typescript] 타입스크립트 기초 : 타입 지정하기 2023.07.31

[Typescript] 타입스크립트 기초 : 타입 지정하기

2023. 7. 31. 20:54

728x90

해당 글에서 다루고 있는 내용은 아래의 타입스크립트 공식 문서에서 확인할 수 있는 내용입니다.
보다 정확하고 자세한 내용을 원하시는 분들은 아래의 페이지에 방문하셔서 확인해주시길 바랍니다!

타입스크립트 공식 문서 - https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

Documentation - Everyday Types

The language primitives.

www.typescriptlang.org

타입스크립트를 사용하는 이유?

타입스크립트는 자바스크립트와 다르게 변수를 선언할 때 타입을 명시적으로 지정해줄 수 있다는 특징을 가지고 있다.
하지만, 자바스크립트는 따로 타입을 지정해주지 않아도 자동적으로 지정하거나 타입을 계속해서 바꿀 수 있는데, 이러한 언어를 동적 프로그래밍 언어(Dynamic Programming Language) 라고 한다.

이러한 동적 프로그래밍 언어들은 귀찮게 타입을 지정해주지 않아도 된다는 편리함을 가지고 있지만, 타입과 관련한 여러 예상치 못한 에러들이 많이 발생한다는 단점이 있다.
자바스크립트의 이러한 문제를 해결하기 위한 것이 타입스크립트이며, 사전에 타입을 지정함으로써 에러를 방지하기 위해 사용한다.

타입을 지정하는 방법

타입은 변수를 선언함과 동시에 변수 이름 뒤에 ':' 콜론과 타입명을 붙여 지정할 수 있다.

let v1: number = 1;
let v2: string = "str";
let v3: boolean = true;
let v4: any = 1 or "string" or false //어떠한 값이라도 저장할 수 있다. --> 자바스크립트와 똑같다고 생각하면 됨.

하지만 지정한 타입과 변수에 저장될 값이 일치하지 않는다면 오류가 발생하게 된다.

let v1: number = "str"; //Error - 'string' 형식은 'number' 형식에 할당할 수 없습니다.
let v2: boolean = 2; //Error - 'number' 형식은 'boolean' 형식에 할당할 수 없습니다.

타입의 종류

타입의 종류는 여러가지가 있고, 직접 타입을 만들어 지정하는 등의 행위도 가능히다.

Number - 숫자 타입

숫자 타입은 이름 그대로 숫자를 저장할 수 있는 타입입니다.
대신, C/C++, Java 와 달리 long, int, double의 구분이 나누어지지 않고 number 타입 하나에 모든 숫자를 저장할 수 있다.

let a: number = 1;
let b: number = 3.14;

String - 문자열 타입

문자열은 ' 따옴표, " 쌍따옴표, ` 백틱을 사용해 저장할 수 있으며, Template Literal - 템플릿 리터럴 또한 사용할 수 있다.

let str1: string = 'String1!';
let str2: stirng = "String2!";
let srt3: string = `String3!`;

let template = "This is Template Literal!";
let templateStr = `Use Template like this! ${template}`;

Boolean - 논리 타입

논리 타입은 true/false 와 같이 참과 거짓으로 나뉘는 것들을 말한다.

let v1: boolean = true;
let v2: boolean = false;

Any - 아무런/모든 타입

any 타입은 이름 그대로 아무거나 저장할 수 있는 타입이며, 자바스크립트에서 기본적으로 이 타입을 적용시켜 사용하고 있다고 생각하면 된다. 타입스크립트는 타입을 지정해 불가능한 연산이 수행되어 값에 오류가 발생하는 것을 방지하기 위해 사용하는데, any 타입은 이러한 타입스크립트의 장점을 상쇄시켜버리기에 사용하지 않는 것을 권장한다.

let a: any = "anything";
a = 1;
a = true;

Union - 유니온 타입

유니온 타입은 OR 연산자 '||'와 같이 "선택지를 여러 개 두어 그 중 하나를 사용하겠다." 라는 의미의 타입이다. 복수의 타입을 '|' 를 사이에 두고 나열하며, 변수에 값을 저장할 때는 나열한 타입의 속성을 가진 값들을 저장할 수 있다.
유니온 타입은 폭넓게 사용할 수 있기에 알아두는 것이 좋다.

let a: string | number | boolean = 1;
a = "This is Union Type";
a = true;

Array - 배열 타입

타입스크립트에서 배열 타입을 지정하는 방법은 두 가지 Array<타입명>, 타입명[] 로 나뉜다.
또한, 아래의 예시와 같이 유니온 타입을 사용해 여러 타입의 값들을 저장할 수도 있다.

let arr1: string[] = ["Str", "Str", "Str"];
let arr2: Array<string> = ["Str", "Str", "Str"];

let arr3: number[] = ["Str", "Str", "Str"];
let arr4: Array<number> = [1, 2, 3];

let arr5: (string | number)[] = [1, "Str", 2];
let arr6: Array<string | number> = [1, "Str", 2];

Object - 객체 타입

타입스크립트에서 객체 타입은 특정한 타입을 갖지 않는 비원시(primitive) 값이 아닌 모든 객체를 나타내는 타입이다.
객체 타입은 '{ }' 형태의 데이터 구조를 가지며, 배열, 함수, 클래스 등은 'object - 객체 타입' 에 해당한다.

let person: object = {
  name: "Steve",
  age: 25,
  job: "Developer"
};

let user: object = ["James", 34, "Doctor"];

function sayHello(): object {
  return { say: "Hello, World!" };
}

class Car { 
  constructor(public name: string, public price: number) {} 
}

let car: object = new Car("Benz", 130000000);

여기에서는 다루지 않지만, 객체의 구조를 더욱 세부적으로 정의하고 타입을 명시적으로 다루고 싶다면, 인터페이스(interface) 혹은 타입(type)을 이용해 객체의 형태를 정의해 적용할 수 있다.

Tuple - 튜플 타입

튜플은 선언할 때 처음 명시한 타입의 개수만큼만 저장할 수 있으며, 타입의 인덱스에 올바르지 않은 타입의 값이 저장될 수 없다.
또한, 처음 선언할 때 정해진 요소의 개수와 달라질 수 없다.
여기에서 또한 유니온 타입을 사용할 수 있다.

let tp: [string, number];
tp = ["str", 2];
tp = [1, "str"]; // Error

let tp2: [string | boolean, number];
tp2 = [true, 1];
tp2 = ["Union", 2];

Function - 함수

타입스크립트에서 함수는 매개변수에 각각 타입을 지정해주며, 매개변수를 감싸는 '()' 괄호 옆에는 해당 함수가 반환할 값의 타입도 명시해주어야 한다.

function func1(a: string, b: string): string {
  return a + b;
}
console.log(func1("Hello,"," World!")); //Hello, World!

const func2 = (a: string, b: string): string => {
  return a + b;
}
console.log(func2("Hello,"," World!")); //Hello, World!

Enum - 열거 타입

C/C++, Java에는 열거형이 기본적으로 지원되지만, 자바스크립트에는 존재하지않아 불편한 점이 있었을 것이다.
타입스크립트에서는 자바스크립트의 이러한 단점을 보완하고 있다. enum - 열거형은 관련된 상수들을 정의하고 그룹화한다.
열거형은 어떤 값을 저장하느냐에 따라 숫자 기반 열거형, 문자열 기반 열거형으로 나뉘는데, 다음과 같이 나타낼 수 있다.

1. 숫자 기반 열거형

enum Direction {
  North, //0
  East,  //1
  South, //2
  West   //3
}

let currentDir: Direction = Direction.North;
console.log(currentDir); //1 출력

위와 같이 숫자 기반 열거형은 각 멤버에 값을 지정해주지 않으면 위쪽 멤버부터 아래쪽으로 0부터 1씩 커지는 값을 할당한다.

혹은 각 멤버에 직접 값을 수동으로 할당할 수도 있는데, 특정 멤버만 할당하게 되면 그 이후의 멤버는 이전 멤버에 할당된 숫자부터 1씩 커지는 숫자를 할당받게 된다.

enum Direction {
  North,     //0
  East = 51, //51
  South,     //52
  West       //53
}

let currentDir: Direction = Direction.South;
console.log(currentDir); //52 출력

2. 문자열 기반 열거형

아래의 코드에서 보이는 바와 같이 문자열 기반 열거형은 각 멤버에 수동으로 값을 할당해야 한다.

enum Direction {
  North = "NORTH",    
  East = "EAST", 
  South = "SOUTH",    
  West = "WEST"       
}

let currentDir: Direction = Direction.West;
console.log(currentDir); //WEST 출력

Void - 무효 타입

Void 타입은 반환하는 값이 없는 함수에서 사용한다. 앞서 함수 타입에서 언급했듯, 타입스크립트에서는 함수의 반환 타입을 '()' 괄호 오른쪽에 명시하는데, 반환값이 없는 함수에는 이를 대신해 Void를 사용한다.

function noReturn(): void {
  console.log("This function returns nothing.");
}

const noReturn2 = (): void => {
  console.log("Arrow function returns nothing.");
};

Never - 절대 타입

Never 타입은 함수의 반환값이나 표현식의 타입으로 사용되는데, 일반적으로는 "절대 발생하지 않는 값"을 말한다.
이 말은 즉, 해당 함수가 항상 예외를 던지거나 무한 루프에 빠져 정상적인 값을 반환하지 않는 경우를 말한다.

function error1(msg: string): never {
  throw new Error(msg);
}

const error2 = (msg: string): never => {
  throw new Error(msg);
}

Type Aliase - 타입 별칭

Type Aliase - 타입 별칭은 복수의 타입들을 하나로 묶어 중복되는 타입들을 여러 번 작성해야하는 수고를 덜기 위해 사용한다.
type 키워드를 사용해 정의하며, 객체 형식으로 정의해 함수의 매개변수 타입으로 사용하거나 변수에 적용할 유니온 타입을 저장하기도 한다.

type unionType = number | string;

let a: unionType = "This is Type Aliase";
let b: unionType = 1;

type Params = {
  a: number;
  b: number;
};

function add(param: Params): void {
  console.log(`a + b = ${param.a + param.b}`);
}

add({ a: 20, b: 140 });