[Typescript] 타입스크립트 기본 타입 정리

 

Typescript는 JavaScript의 확장된 버전으로 JavaScript와 거의 동일한 문법이지만,

정적 타입 검사를 통해 코드의 안정성과 가독성을 높이는 것에 도움을 줍니다.

변수나 함수에 잘못된 타입의 값을 할당 시, 발생하는 오류를 사전에 방지하여 런타임 오류를 줄일 수 있는 것이 Typescript의 가장 큰 장점이며 TypeScript는 JavaScript로 컴파일하여 적용됩니다.

현재 많은 기업에서 React, Vue.js 등의 프론트엔드 프레임워크와 함께 Typescript를 많이 사용하고 있으며,

그렇기에 Typescript를 학습하며 배운 것들을 정리해보도록 하겠습니다.

 

 

Typescript 기본 타입 정리

원시 타입 (Primitives)

1. Boolean: 불리언 값, true 또는 false
2. Number: 숫자 값, 정수 또는 부동 소수점 숫자를 포함
3. String: 문자열 값, 작은따옴표(')나 큰따옴표(")로 묶여 있는 문자열
4. Null: 값이 없음을 나타내는 특별한 값으로, null이라는 유형을 가짐
5. Undefined: 값이 할당되지 않음을 나타내는 특별한 값으로, undefined라는 유형을 가짐
6. Symbol: ES6에서 추가된 원시 값으로, 고유하고 변경 불가능한 값
7. BigInt: ES2020에서 추가된 원시 값으로, 임의 정밀도의 정수

//boolean
const boal:boolean = true;

//number 
const num:number = 1;

//string
const str:string = 'hello';

//null
let person:null;
let person2:string | null; //주로 또는 (|)과 함께 사용

//undefined
let name:undefined; //사용되지 않는 방식
let age:number | undefined; //주로 또는 (|)과 함께 사용, 값이 있거나 아직 결정되지 않은 경우
age = undefined;
age = 10;
function find():number | undefined{
  return undefined;
}

 

특별한 의미를 가지는 타입

 

1. 유연성 측면

• unknown: 모든 타입 중 상위 타입으로, 모든 값을 나타낼 수 있지만, 알려진 정보가 없는 상태를 의미.                                           → 안전한 타입 체크를 위해 사용
• any: 가장 느슨한 타입으로, 어떤 값이든 할당할 수 있고 컴파일러의 타입 검사가 비활성화                                                              → 타입 안전성을 보장하지 않아 가능하면 사용을 지양

→ 어떤 값이든 지정 할 수 있는 unknown과 any는 모두 유연성을 제공하지만, unknown은 타입 안전성을 유지하면서 유연성을 제공하는 데 더 적합하며, any는 가능하면 피하는 것이 좋음

//unknown
let notSure: unknown = 0; //데이터 타입을 알 수 없음.
notSure = 'hello';
notSure = true;

//any
let anything: any = 0; //어떤 것이든 담을 수 있음)
anything = 'hello';

 

2. 함수의 반환 타입

• void: 함수에서 아무 값도 return하지 않을 때 사용                                                                                                                       → 일반적으로 undefined를 반환하며, 값을 반환하지 않음을 명시적으로 의미
• never: 함수가 절대로 끝나지 않는 상태를 나타내는 타입                                                                                                              → 예외가 발생하거나, 무한 루프에 빠진 경우와 같이 함수가 계속 실행되는  함수의 반환 타입으로 사용

//void
function logMessage(message: string): void {
    console.log(message);
  return; //무엇도 리턴하지 않음(생략)
}
let unusable:void = undefined; //undefined만 할당 가능(지양)

//never
//절대 리턴되지 않음을 명시할 때 사용
function throwError(message: string): never{
    throw new Error(message);
  /*while(true){
    ... 무한 반복
  }*/
}

 

배열 (Array Types)

// 문자열을 담은 배열을 선언
let fruits: string[] = ['Apple', 'Banana', 'Orange'];

// Array<string> 형식의 배열을 선언 -> T<U> 구문
let fruits: Array<string> = ['Apple', 'Banana', 'Orange'];

 

 

객체 (Array Types)

Object는 모든 객체를 다룰 수 있는 범용 타입으로 사용됨.

하지만 Object 타입은 객체의 모든 정보를 제공하지 않아, 구체적인 객체 타입으로 사용하는 것이 좋음.

→ 타입 안정성을 높이기 위해 구체적인 타입을 사용하는 것이 좋음

let obj: object; //원시타입을 제외한 모든 오브젝트 타입 할당 (지양)
function acceptSomeObject(ob: object){}
acceptSomeObject({name: 'kim'});
acceptSomeObject({animal: 'cat'});

let obj: Object = { key: 'value' };
let user: { name: string, age: number } = { name: 'John', age: 30 };

 

Optional Proerties

자바스크립트에서 사용가능하고 타입스크립트에서 더 활용도 높은 함수정의 방법

선택적 속성은 해당 속성이 있을 수도 있고 없을 수도 있는 경우 사용되며,

속성 이름 뒤에 ?를 붙여서 사용.

//Optional parameter
interface Person {
  name: string; // 필수 속성
  age?: number; // 선택적 속성
}
let person1: Person = { name: 'John' }; // age 속성이 없는 경우
let person2: Person = { name: 'Jane', age: 30 }; // age 속성이 있는 경우

interface Person2 {
  name: string; 
  age?: number | undefined ;
}
let person1: Person = { name: 'John', undefined }
// | (또는) 사용 시, undefined을 인자로 넘겨야함(지양)

 

Functions

함수 선언 시, 각 매개변수 뒤에 타입을 표기하여 함수가 허용할 매개변수 타입을 명시하고,

return시, 반환되는 타입은 매개변수 목록 뒤에 표기.

function add(x: number, y: number): number {
  return x + y;
}
//add 함수는 number타입인 x와 y 매개변수로, 동일한 타입인 number를 반환

 

Default parameter 와 Rest parameter

Default parameter

함수의 매개변수에 기본값을 설정하는 기능. 함수 호출 시, 해당 매개변수에 값이 전달되지 않으면, 기본값 사용

//Default parameter
function greet(name: string, message: string = 'Hello') {
  console.log(`${message}, ${name}!`);
}
greet('John'); // 출력: Hello, John!
greet('Jane', 'Hi'); // 출력: Hi, Jane!

//message는 기본값으로 'Hello'를 가지며, 함수 호출 시 message 생략하면 기본값이 사용됨

Rest parameter

함수에 명시적으로 선언된 매개변수 이외의 모든 인수를 수집하는 기능.

이 매개변수는 함수 정의에서 마지막 매개변수로 선언되며, 세 개의 점(...)으로 표시

//Rest parameter
function addNumber(...numbers: number[]): number{//인자를 number라는 배열로 받음 
  return numbers.reduce((total, num) => total + num, 0);
}

let result = sum(1, 2, 3, 4, 5); // 모든 숫자의 합계를 구함
console.log(result); // 출력: 15
}

 

 

 

 

https://www.typescriptlang.org/ko/

JavaScript With Syntax For Types.