[타입스크립트] 기본타입

Moon·2023년 7월 27일
0
post-thumbnail

타입스크립트 기본 타입 이해하기

타입스크립트를 처음 접하면서 느끼는 가장 큰 차이 중 하나는 '타입'이라는 개념일 것이다. 타입스크립트는 JavaScript의 모든 기능에 더해, 정적 타입을 추가하여 코드의 안정성과 가독성, 예측 가능성을 향상시킨다.

이러한 타입들을 하나하나 살펴보기전에. type annotation 에 대해 먼저 알아 보도록 하겠다.

type annotation

타입 주석은 타입스크립트에서 변수, 함수 매개변수, 함수 반환값 등의 타입을 명시적으로 표현하는 방법이다. 이를 통해 개발자는 예상치 못한 데이터 타입의 오류를 방지하고, 코드의 안정성을 높일 수 있다. 코드를 읽는 이에게도 함수의 입력과 출력에 대한 명확한 이해를 제공하여 가독성을 향상시킨다.

//예를 들어, 변수에 타입 주석을 사용하는 경우 다음과 같이 표현할 수 있다:
let num: number = 123;
//이는 123이라는 값을 가진 변수 num이 number 타입임을 나타낸다.

//함수에 대한 타입 주석은 매개변수와 반환 타입에 대해 제공된다.
function greet(name: string): string {
    return 'Hello, ' + name;
}

위 함수 greetstring 타입의 매개변수 name을 받아들이고, string 타입을 반환한다.

원시 타입: string, number, boolean

이 타입들은 JavaScript와 동일하다.

let myName: string = 'Alice';
let age: number = 25;
let isStudent: boolean = true;

object 타입

JavaScript와 마찬가지로 타입스크립트에서 객체를 선언할 수 있다.

//이렇게 작성히면 안됨!
let student: object = {
  name: 'Alice',
  age: 20
};
student.age; //에러,속성 'age'이 '객체' 유형에 없습니다.

//그래서 타입을 좁혀줘야 된다.
//객체 안에 속성에 타입을 지정해줘야 된다.
let student: { name: string; age: number; } = {
  name: 'Alice',
  age: 20
};
student.age; 

함수 타입

Array, Tuple, Enum 타입

배열, 튜플, 열거 타입도 지원한다.

//Array 배열
let arr1: string[] = ['apple', 'banana', 'cherry'];
let arr2: number[] = [1, 2, 3];
let arr3: boolean[] = [true, false, true];
let arr3: (number|string)[] = ['a', 1];

//Tuple 튜플
//길이와 타입이 고정된 배열
let x: [string, number] = ['hello', 10];

//Enum 열거형
//enumeration의 약자
// 이름이 있는 상수들이 열거되어 있는 집합
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

any, void, never 타입

특수한 상황에 사용되는 타입들이다.

  • any: 어떤 타입이든 될 수 있다.
  • void: 함수에서 아무것도 반환하지 않을 때 사용한다.
  • never: 절대 발생하지 않을 값에 대해 사용한다.
// any
let notSure: any = 4;
notSure = "maybe a string instead";

// void
function warnUser(): void {
		let text="This is my warning message"
    console.log(text);
		return text;//에러!
}

// never
let value:never;// 어떠한 값도 가질 수 없는 타입
value='hello'//에러! 

Null, undefined 타입

  • strictNullChecks 옵션 false인 경우
    • 모든 타입의 변수에 null과 undefined를 대입 가능
    • 런타임에 예기치 않은 오류가 발생할 수 있음
  • strictNulIChecks 옵션 true인 경우(권장)
    • null과 undefined일 수 있는 변수를 참조하려고 하면 에러 발생
let u: undefined = undefined;
let n: null = null;

Symbol 타입

  • ES6에 새롭게 추가된, number L string 과 같은 기본 데이터 타입 (원시 타입)
  • 변경 불가능한 유일한 값
let sym1 = Symbol();

let sym2 = Symbol("key"); // optional string key

unknown 타입

  • 단어 그대로, 타입이 뭔지 '알 수 없는' 타입
  • 어떤 값이든 들어올 수 있으니 엄격하게 검사해서 사용해라!
  • any 타입과 유사하지만 훨씬 안전하다.
  • 타입을 특정해주기 전까지는 무언가를 수행하려고 할 때 에러를 내준다.

unknown 타입은 any 타입과 유사하게 모든 타입의 값을 가질 수 있지만, any와는 달리 타입 검사를 통과해야만 다른 타입에 할당할 수 있다.

let notSure: unknown = 4;
notSure = "maybe a string instead";

이처럼 타입스크립트는 다양한 타입을 제공하며, 이들은 코드의 안정성을 높이고, 버그를 줄이며, 가독성을 향상시키는 데 큰 역할을 한다.

profile
FE moon

1개의 댓글

comment-user-thumbnail
2023년 7월 27일

이런 유용한 정보를 나눠주셔서 감사합니다.

답글 달기