[TypeScript] 기본 타입 #1

기본 타입

{
  /**
   * JavaScript
   * Primitive : number, string, boolean, biginy, symbol, null, undefined
   * Object: function, array...
   */

  // number
  const num: number = -3.0;

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

  // boolean
  const bool: boolean = true;

  // undefined - 아직 알지 못하는 값
  let name: undefined; // ❌ 이렇게 하면 undefined만 할당 가능
  let age: number | undefined; // 숫자 또는 undefined
  age = undefined;
  age = 12;

  function find(): number | undefined {
    // 숫자를 리턴하거나 undefined를 리턴할 수 있는 함수
    return undefined;
  }

  // null - 의도적으로 비어있는 값
  let person: null; // ❌
  let person2: string | null;

  // unknown - 가능하면 쓰지 않는 것이 좋음 ❌
  let notSure: unknown = 0;
  notSure = "안녕";
  notSure = true;

  // any - 가능하면 쓰지 않는 것이 좋음 ❌
  let anything: any = 0;
  anything = "hello";

  // void
  // 함수에서 어떠한 값도 리턴하지 않을 때
  function print(): void {
    console.log("hello");
    return;
  }

  // Object
  let obj: object; // ❌ 더 구체적으로 명시해서 사용하기
  function accpetSomeObject(obj: object) {}
  accpetSomeObject({ name: "yuna" });
  accpetSomeObject({ animal: "puppy" });
}

 

 

Array (배열)

// Array
  const fruits: string[] = ["사과", "블루베리"];
  const numbers: Array<number> = [1, 2, 3];

 

readonly 속성은 인자로 받은 배열을 읽기 전용으로만 사용

- Array<number>는 readonly 속성을 사용할 수 없기 때문에 주로 number[] 형식 사용한다고 함

배열에 원소를 추가하려고 하면 error

 

 

Tuple (튜플)

: 서로 다른 타입의 원소를 함께 가질 수 있는 배열

// Tuple
  let student: [string, number];
  student = ['yuna', 27];
  student[0] // yuna
  student[1] // 27
  const [name, age] = student;

 

 

JS 함수 타입스크립트 함수로 바꿔보기 (타입 선언)

- 조금 더 직관적으로 코드를 이해할 수 있음

{
  // JavaScript
  function jsAdd(num1, num2) {
    return num1 + num2;
  }

  // TypeScript
  function tsAdd(num1: number, num2: number): number {
    return num1 + num2;
  }

  // JavaScript
  function jsFetchNum(id) {
    // code ...
    // code ...
    // code ...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }

  // TypeScript
  function tsFetchNum(id: string): Promise<number> {
    // code ...
    // code ...
    // code ...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }
}

 

 

 

JS에서도 사용하고 TS에서도 활용도를 높일 수 있는 함수 정의 방법

 

1. Optional parameter

파라미터 뒤에 물음표를 붙이면 전달받을 수도 있고 아닐 수도 있다라는 의미

// Optional parameter
  function printName(firstName: string, lastName?: string) {
    console.log(firstName);
    console.log(lastName);
  }

  printName("yuna", "Kim");
  printName("Udragon");
  printName("hihi", undefined);

실행결과

 

 

2. Default parameter

- 파라미터의 default 값을 설정하는 방법

 // Default parameter
  function printMessage(message: string = 'default message') {
    console.log(message)
  }
  
  printMessage();

실행결과

 

 

3. Rest parameter

- 배열 형태로 인자 받기

// Rest parameter
  function addNumbers(...numbers: number[]): number {
    return numbers.reduce((a, b) => a + b);
  }
  console.log(addNumbers(1, 2));
  console.log(addNumbers(1, 2, 3));
  console.log(addNumbers(1, 2, 3, 4));
  console.log(addNumbers(1, 2, 3, 4, 5));

실행결과