[TS기초]기본 타입

 

 

 

기본타입

기본 타입이란 타입스크립트가 제공하는 기본 내장타입을 말한다. 

JavaScript의 슈퍼셋 언어인 TypeScript는 JS의 거의 동일한 데이터 타입을 지원하며,

이외에 추가적인 타입을 제공한다. 그 중 기본타입에 대한 내용들을 정리한다.

 

목차

1.원시타입과 리터럴 타입

2.배열과 튜플

3.Enum타입

4.any타입과 unknown타입

5.void타입과 never타입

 

 

 

 

---

1.원시타입과 리터럴 타입

✨원시 타입(Primitive Type)

하나의 값만 저장할 수 있는 타입.

number , string , boolean , null , undefined 등의 속성이 존재한다.

let str:string = "문자열";
let num:number = 1;
let bool:boolean = true;

 

✨리터럴 타입(Literal Type)

string,number와 같이 포괄적인 값이 아닌 특정한 값으로 타입을 지정할 수 있다.

let num : 7 = 7;
let string : "문자열" = "문자열";
let boolean : true = true;

 

 

---

 

2.배열과 튜플

✨배열

배열의 정의 방법

1.타입 주석을 이용한 방법 배열요소타입[]

let stringArr:string[]=['하나','둘','셋'];
let numberArr:number[]=[1,2,3];
let booleanArr:boolean[]=[true,false]

2.제네릭 타입을 이용한 방법 Array<배열 요소 타입>

let boolarr: Array<boolean> = [true, false, true];
let boolarr2: Array<string> = ["1", "2", "3"];

3.유니온 타입을 이용한 여러개의 타입을 갖는 배열 [타입 | 타입]

let multiArr: (number | string)[] = [1, "hello"];

4.2차원 배열 타입[][]

let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

✨튜플

튜플이란 길이와 타입이 고정된 배열이다.

튜플의 정의방법 [요소 타입,요소 타입]

let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "안녕하세요", true];

주의 사항

튜플도 배열이기 때문에 배열 메서드 pop,push를 사용하면 고정된 길이를 무시하고 추가,삭제가 가능하므로

주의가 필요하다.

 

튜플을 사용하는 이유

고정된 타입과 개수를 엄격히 제한하여 잘못된 사용이나 변형을 막아준다.

const user:[string,number][]=[
	['이름1',1],
	['이름2',2],
	...
	[5,'이름5'] //X
]

 

 

---

 

3.Enum타입

열거형 타입 Enum은 특정 값의 집합을 나타내는 타입이다.

상수 값을 하나의 이름으로 그룹화하여 사용할 수 있도록 해준다. 이를 통해 코드의 가독성과 유지보수성을 높인다.

enum Role {
  ADMIN, // 0
  GUEST, // 1
  USER="User", // User
}

let userRole = {
  name:"이름1",
  role:Role.ADMIN, //enum의 상수 값은 이름으로 접근 가능하다.
}
let userRole2 = {
  name:"이름2",
  role:Role.USER,
}
console.log(userRole.role); // 0
console.log(userRole2.role); // User

• enum의 상수 값은 이름으로 접근할 수 있기 때문에 코드의 가독성을 높일 수 있다.
• enum은 기본적으로 0부터 시작하여 1씩 중가하는 숫자값을 가진다. 숫자 이외에도 문자열 또는 다른 타입을 할당 할 수있다.

이렇게 enum을 사용할 경우 오타의 위험성을 줄이고 코드의 가독성을 높이는 효과를 가질 수 있다.

 

---

4.any와 unknown타입

✨any타입

any타입은 타입스크립트에서 제공하는 타입중 가장 유연하고 제한이 없는 타입이다.

어떤 값이든 담을 수 있으며, any타입에 대해서는 어떤 타입 체크나 추론도 하지 않는다.

이러한 any타입의 변수는 컴파일 에러없이 어떤 방식으로든 할당하고 사용 가능하다.

let value:any;
value = 5;
vlaue = "문자열";

any타입은 타입체크를 하지 않으므로 타입스크립트를 사용하는 의미가 사라진다.

정말 특별한 경우가 아니라면 any타입의 사용은 피해야한다.

 

✨unknown타입

any타입의 안전한 대안으로 사용할 수 있다. unknown타입은 어떤 값이든 담을 수 있지만, 엄격한 규칙을 따른다.

let unKnownValue : unknown;

unKnownValue = "문자열";
unKnownValue = () => {}; //함수
unKnownValue = 1

unknown타입으로 지정한 변수에는 어떤 값이든 올 수 있다. 하지만 반대의 상황은 불가능하다.

let numType:number = 1;
let unKnownValue : unknown;

numType = unKnownValue // unknown형식은 number형식에 할당할 수 없습니다.

unknown타입은 오직 값을 저장할 수밖에 없다. 그래서 연산이나,어떤 메서드도 사용할 수 없다.

연산이나 메서드 작업을 하고싶다면 타입 좁히기를 통해서 타입을 정확하게 해줘야한다.

let unKnownValue : unknown;
unKnownValue*2 //에러
unKnownValue.toUpperCase()//에러

if(typeof unKnownValue === 'number'){
  unKnownValue*2
}
if(typeof unKnownValue === "string"){
  unKnownValue.toUpperCase()
}

 

---

 

5.void와 never타입

✨void타입

void타입은 함수의 반환 타입으로 사용되며 해당 함수가 아무런 값을 반환하지 않는다는것을 의미한다.

일반적으로 void타입은 함수나 메서드의 반환 타입으로 사용된다.어떤 값을 반환하지 않고 작업만 수행하는 경우

반환 타입을 void로 지정하여 명시적으로 나타낼 수 있다.

function showMessage():void{
	console.log("hello, world");
}

undefined나 null을 반환하는것과는 구분된다.

반대로 함수에 undefined를 설정해 보면 void를 반환해야하는 이유를 알 수 있다.

function showMessage():undefined{
	console.log("hello, world");
	return undefined
}

반환값의 타입을 undifined로 설정했기 때문에 리턴값을 undefined로 해야한다. null도 마찬가지다.

그래서 void는 반환되는 값이 없는 동작을 수행하는 함수의 반환 타입으로 사용된다.

 

✨never타입

절대 발생하지 않는 값의 타입이다.

즉, 함수나 표현식이 예외를 던지거나 무한 루프에 빠져 프로그램이 종료되지 않는다면 never타입이 된다.

 

주로 이런 비정상적인 상황에서 사용된다.

function func(){
  while(true){}
}
function func(message:string):never{
  throw new Error(message);
}

이 함수들은 종료되지 않는다. 위의 void랑은 느낌이 다르다. 반환할 값이 없는것과 종료될 수 없어서 반환할 수 없는

차이가 있다. 이렇게 정상적으로 종료될 수 없어서 반환값 자체가 존재할 수 없다 라는 경우에는 never를 쓴다.

 

 

 

자료 출처

https://typescript-kr.github.io/

https://ts.winterlood.com/