[TS] Type

 

타입스크립트에서 타입을 설정하는 방법은 다양합니다. 기본적인 부분만 정리해보려 합니다.

참고 할만한 핸드북 링크 - https://joshua1988.github.io/ts/

 

1.  기본 타입

자바스크립드와 다르게 타입스크립트는 변수, 함수를 선언할 때, 타입을 꼭 설정해 주어야 합니다.

 

1. number

const num: number = 3;

 

2. string

  const str: string = 'Hello World';

 

3. boolean

 const bool: boolean = false;

 

 4. void

  function World(): void {
    console.log('hello world');
    return;
  }

함수가 어떠한 것도 리턴하지 않을 때 사용합니다. (생략 가능)

 

5. never

  function World(): never {
    console.log('hello world');
    throw new Error(message);
  }

함수가 어떠한 것도 리턴하지 않을 때

 

6. object

  let obj: object = [1,2]

배열과 객체인 오브젝트를 선언한다. 광범위 하기 때문에 쓰지 않는편이 좋다.

 

7. 가능하면 사용하지 않는 것이 좋은 타입

• undefined (값이 있는지 없는지 결정되지 않은 상태)
• null (값이 없는 상태)
• unknown (알 수 없는, 어떠한 종류의 데이터를 담을지 알 수 없는)
• any (어떠한 데이터라도 담을 수 있다.)

사용하면 좋지 않지만 활용하는 사례

  let age: number | undefined;
  
  let person: string | null;

 

 

2.  함수에서의 타입 활용

 

1. 인자와 리턴값에 대한 타입 지정

  function add(num1: number, num2: number): number {
    return num1 + num2;
  }

 

2. 함수가 어떤값을 리턴할껀지에 대한 Promise 타입 설정

  function num(num: number): Promise<number> {
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }

 

3. 인자를 전달거나 하지 않아도 상관 없는 경우 "string | undefined"를 쓰지 않고 인자 앞에 ?를 붙여 준다.

(undefind 를 사용하면 함수를 호출하는 인자에 Adel, undefind를 함께 인자를 포함시켜 주어야 한다.)

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

  printName('Adel');

 

4. spread 문법이 이용가능하다.

  function numbers(...numberArray: number[]): object {
   return numberArray
  }

 

5. 함수의 인자의 default 값을 설정해 줄 수 있다.

함수를 호출하였을 때, num 인자에 값이 없을경우 기본 값을 3으로 설정한다.

  function printNumber(num: number = 3) {
    console.log(num); // return 3
  }

 

 

3.  Array

선언 방법은 2가지가 있습니다.

const fruits: string[] = ['apple', 'banana'];
  
const numbers: Array<number> = [1, 3, 4];
  

// readonly를 선언하면 값을 변경 불가능
function printArray(number: readonly number[]) {}

 

 

4.  Type aliases

~라 불리는, 가명이라는 뜻을 가진 aliases 단어 입니다.

새로운 타입을 만들 수 있는 방식을 뜻합니다.

  // alias 선언
  type naming = string;
  const name: naming = 'kim';


 // object
  type Student = {
    name: string;
    age: number;
  };
  
  const student: Student = {
    name: 'kim',
    age: 21,
  };

 

 

5. Type union

union은 조합이란 뜻으로 자신이 원하는 타입을 여러개를 지정하여 원하는 하나를 사용 가능하도록 하는 것입니다.

("or" 과 비슷한 역할이라 생각하면 쉽습니다.)

// 성공 타입 선언
type Success = {
    result: 'success';
    response: {
      body: string;
    };
  };
  
// 실패 타입 선언
  type Fail = {
    result: 'fail';
    body: string;
  };
 
// union type 지정  
  type Login = Success | Fail;



// 로그인 함수 선언시, 성공 타입사용
// result라는 동일한 값을 선언하여 유연하게 타입을 선택할 수가 있다. (Discriminated Union)
  function printLoginState(state: Login) {
    if (state.result === 'success') {
      console.log(state.response.body);
    } else {
      console.log(state.reason);
    }
  }
}

 

 

6. Type intersection

intersection은 교차로 라는 뜻으로 union과 다르게 "and"의 역할을 가지고 있다고 보면 됩니다.

타입을 &를 사용하여 지정해 줍니다.

  type Student = {
    name: string;
    score: number;
  };

  type Company = {
    companyId: number;
    work: () => void;
  };


// student와 worker을 타입선언을 해주고 
  function internWork(person: Student & Worker) {
    console.log(person.name, person.CompanyId, person.work());
  }

// 함수를 호출할 때 해당하는 모든 데이터를 사용해야 합니다. (하나로 묶는 기능)
  internWork({
    name: 'kim',
    score: 1,
    companyId: 123,
    work: () => {},
  });

 

7. Type enum

특정 값을 고정시키기위해(독립적인 상수) 사용하는 경우 입니다.

enum을 통하여 변수에 값을 지정하여 넣고나서 다른 값으로 덮어씌워집니다.

때문에 값이 독립적이지 않고 타입을 선언에 대한 값만 상수의 역할을 하기 때문에 유용하지는 않습니다.

  enum School {
    Student,
    Teacher,
  }
  
  
  // 문제점
  console.log(School.Student); // return 0
  let people: School = School.Student;
  people = Days.Tuesday; 
  people = 10;
  console.log(people); // return 10

 

union으로 해결 가능한 방법

type School = 'Student' | 'Teacher';

let people: school = 'Student'
people = 'Teacher' (Student와 Teacher 만 사용가능)

 

 

8. Type assertion 

TypeScript에서는 시스템이 추론 및 분석한 타입 내용을 우리가 원하는 대로 얼마든지 바꿀 수 있습니다.

이 때 "타입 표명(type assertion)" 어서션(영어: assertion)은 프로그램 안에 추가하는 참·거짓을 미리 가정 하는 것입니다.

TypeScript의 타입 표명은 컴파일러에게 내가 너보다 타입에 더 잘 알고 있으니 의심하지 마라는 뜻과 같습니다.

 

값이 어떠한지 확신할 경우에 사용하고 "!"를 사용할 수 도 있습니다.

  function jsStrFunc(): any {
    return 2;
  }
  const result = jsStrFunc();
  
  console.log((result as string).length);
  console.log((<string>result).length);
  
  // 어떠한 데이터가 들어올지 확신하는 경우
  // 위 예시처럼 타입이 틀릴 경우 오류가 생긴다.

  //어떠한 값이 무조건 있다면 해당 선언 뒤에 !를 사용할 수가 있다.
  
  function findNumbers(): number[] | undefined {
    return [1,2]
  }
  const numbers = findNumbers();
  numbers!.push(3);

• ? 는 undefind 일 수도 있다.
• -?는 모두 존재해야 한다.