본문 바로가기
Understanding TypeScript

TypeScript의 타입

by Luciditas 2023. 4. 11.
728x90

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원한다.

 

Boolean Type

true, false의 값만 가진다.

 

//TS
let istrue : boolean = false;
let isDone : boolean = true;

 

Number Type

JavaScript와 마찬가지로 정수와 실수의 구분 없이 Number type하나로 표기한다.

 

let num : number = 7;
let first : number = 1;

 

String Type

TypeScript는 JavaScript처럼 ""나 ''를 사용해 문자열 데이터를 표현한다.

Template Literal을 사용하면 여러줄에 걸친 문자열 표기가 가능하다.

 

let firstName : string = "Gildong";
let lastName : string = "Hong";
let sentence : string = `Hong Gildong is a Front-end developer.
also He knows how to use TypeScript.`

 

Array Type

TypeScript는 두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

하지만 타입을 혼용해서 사용하는 것은 불가능하다.

// first
let fruits : string[] = ["apple", "peach", "pear"];

// second (Generic type)
let numberList = Array<number> = [1,5,7];

 

Tuple Type

요소의 타입과 개수가 고정된 배열을 표현한다.

 

let user : [string, number, boolean] = ["Hong Gildong", 17, true];

배열의 Index마다 Type이 정해져 있기 때문에 정확한 index에 접근할 필요가 있다.

 

console.log(user[2].toString())

 

user[2]는 boolean 값이기 때문에 타입 에러가 발생한다.

JavaScript에서도 Tuple Type을 지원하고 여러개의 값을 가진 배열을 나타내는데 사용한다.

하지만 JavaScript에서는 Tuple Type을 명시적으로 선언할 수 없어 개발자가 직접 Tuple 각 요소의 Type을 확인하고 유추해야 해서 TypeError를 발생시키기 더 쉽다.

이게 바로 TypeScript가 나온 이유가 아닐까?

 

Object Type

TypeScript에서 object는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타낸다.

 

let suer : {name : string, age : number} = {
name : "HongGilDong",
age: 17
};

 

TypeScript에서 object type은 모든 object를 수용하는 타입으로,

객체의 property type들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가가 가능하다.

하지만 타입 안정성을 위해 객체의 property type을 명기하는 것이 좋다.

Any Type

유저 데이터나 third-party library데이터 중 알지 못하는 Type을 표현해야 할 때 타입 검사를 하지 않고자 any type을 사용할 수 있다.

 

let maybe : any = 17;

 

any type을 사용시 변수에 값을 재할당하는 경우 type에 구애 받지 않고 값을 재할당 할 수 있다.

 

let obj : object = {};

// Error
obj = 'hello';
// 이미 obj를 object로 타입을 지정하고 재할당하려고 해서 Error 발생

let maybe : any = 4;

// !Error
maybe = true;
// any type은 값의 재할당이 가능하다.

 

또 엄격한 type 검사를 하지 않아 실제 할당된 값이 가지지 않는 method 및 property로 접근해도 에러가 발생하지 않는다.

대신 실제 할당된 값이 가지지 않는 method, property이므로 undefined를 반환한다.

 

let maybe: any = 4;

//undefined로 출력됩니다.
console.log(maybe.length);

 

any type은 type의 일부만 알고 전체는 알지 못할 때 사용할 수 있다.

(여러 type이 섞여 있는 배열을 받고자 할 때 등)

 

let list: any[] = [1, true, "free"];

//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있습니다. 
list[1] = 100;

 

728x90

'Understanding TypeScript' 카테고리의 다른 글

[TS] TypeScript의 열거형  (0) 2023.04.19
연산자를 활용한 TypeScript의 Type  (0) 2023.04.15
TypeScript에서의 함수  (0) 2023.04.13
What is TypeScript?  (0) 2023.03.13