TypeScript

설치 및 사용방법

---

• npm install -g typescript 로 타입스크립트 설치
  • tsc --init 으로 tsconfig를 생성해 타입스크립트 설정을 한다
  • tsc 파일.ts 로 타입스크립트 파일을 자바스크립트 파일로 변환
• npm install -g ts-node 로 ts-node 설치

  • ts-node 파일.ts 로 자동으로 js 변환 후 실행한다.

    
    
    

타입스크립트 타입 종류

---

기본 타입

• 타입을 지정하지 않더라도 할당된 값의 타입에 따라 타입스크립트는 암묵적 타입추론을 한다.

let aa = 5;
let bb = 'hello';

• number, string, boolean, undefined, null

let num: number = 2;
let str1: string = 'str';
let isTrue: boolean = true;
let undef: undefined;
let empty: null = null;

• array

let numArr: number[] = [1, 2, 3, 10];
let strArr: Array<string> = ['a', 'b', 'c'];
let arr1: (number | string)[] = [1, 2, 'a', 'b', 3, 4];
let arr2: Array<boolean | null | number[]> = [true, false, null, [1, 2, 3]];

• object

let obj: object = { name: 'aa', age: true };

타입스크립트 추가 타입

• tuple : 배열의 개수와 데이터타입 순서를 정하는 타입

  • 순서와 규칙이 있는 배열에 tuple 타입을 설정한다

    let drink: [string, string];
    drink = ['cola', '콜라'];
    let drink2: [string, string, number] = ['cola', '콜라', 12];
    drink2[0] = '사이다';

  • 정해진 갯수를 넘어서 값을 추가할 수 없다

  • readonly 옵션으로 추후 수정 불가능하게 설정

    let drink3: readonly [string, string] = ['콜라', '사이다'];
    // drink[0] = "사이다"; // error!!

• enum : 값들에 미리 이름과 필요하다면 값들을 정의하고 사용하는 타입

  • 미리 의미를 지정하고 그룹화해야할때 enum 타입을 설정한다

  • 값을 따로 넣지 않으면 첫 요소부터 0부터 1씩 늘어나면서 할당

  • 선언 이후로는 내용을 추가하거나 삭제할 수 없다

    enum Auth {
      admin = 0,
      user = 1,
      guest = 2,
    }
    
    enum Cafe {
      americano = '아메리카노',
      latte = '카페라떼',
    }
    
    console.log(Auth);
    console.log(Auth.admin);
    console.log(Auth.user);
    console.log(Auth.guest);
    
    console.log(Cafe.americano);
    console.log(Cafe.latte);

• any : 어떤 타입이든 받을 수 있는 타입

  • any를 사용하면 js와 동일하게 타입설정이 없는것이기 때문에 사용을 지양

    let value:any;

• never

• void

사용자 정의 type

• interface : 오브젝트의 타입을 정의하는 규칙

  • object 타입 대신 interface로 타입을 지정하면 오브젝트 key의 type까지 지정할 수 있다.

    interface Student {
      name: string;
      isPassed: boolean;
    }
    
    const student1: Student = { name: 'allie', isPassed: true };

  • 기존 interface로부터 상속을 받아서도 선언할 수 있다.

    type Score = 'A+' | 'A' | 'B' | 'C' | 'D' | 'F';
    
    interface 야구부 extends Student {
      // Student에서 상속 받아온 정보
      // name: string;
      // isPassed: boolean;
      position: string;
      weight: number;
      height: number;
      readonly backNumber?: number; // 없어도 되는 값 ? 처리
      [grade: number]: Score;
    }
    
    const otani: 야구부 = {
      name: 'otani',
      isPassed: true,
      weight: 95,
      height: 193,
      backNumber: 17,
      position: 'pitcher',
      1: 'A',
      2: 'C',
    };

  • 함수 타입을 interface로 정의할 수 있다.

    interface Calc {
      (a: number, b: number): number;
    }
    
    const sum: Calc = (num1: number, num2: number) => {
      return num1 + num2;
    };

  • 여러 interface를 같이 사용할 수 있다.
    - 중복을 제외한 interface의 타입 모두를 가져온다

    interface Toy {
      name: string;
      start(): void; // 함수 중 리턴타입이 없을 경우 void 타입
    }
    
    interface Car {
      name: string;
      color: string;
      price: number;
    }
    
    // 교차 타입 & -> Toy와 Car의 정보를 모두 만족해야 함
    let toyCar: Toy & Car = {
      name: '타요',
      color: 'blue',
      price: 50000,
      start() {
        console.log(this.name, '의 가격은', this.price, '입니다');
      },
    };
    
    toyCar.start();

• type : interface와 마찬가지로 사용자 정의 타입을 설정한다

  type Person = {
    name: string;
    age?: number;
    like?: string[];
    gender: string;
  };
  
  const daniel: Person = {
    name: 'Daniel',
    gender: 'f',
    age: 21,
  };

  • 오브젝트 뿐만 아니라 문자열, 숫자로 제한을 둘 수 있다.
    - enum을 사용하면 같은 문자열이라도 설정한 enum에서 불러와야 한다.

    enum GenderEnum {
      FEMALE = 'Female',
      MALE = 'Male',
    }
    
    // type Gender = 'Female' | 'Male';
    type Gender = GenderEnum.FEMALE | GenderEnum.MALE;
    
    type Person2 = {
      name: string;
      age?: number;
      like?: string[];
      gender: Gender;
    };
    
    const albert: Person2 = {
      name: 'Albert',
      like: ['car'],
      gender: GenderEnum.MALE, // enum을 사용하면 같은 문자열이라도 설정한 enum에서 불러와야 한다.
    };

  • ㅁㄴㅇㅁㄴㅇ

  • ㅁㄴㅇㅁㄴㅇ

  • ㅁㄴㅇㅁㄴㅇ

함수에서의 type 선언

---

• 단일 함수에 대해 매개변수, 리턴값에 대한 타입을 지정해줄 수 있다.
  • ? 기호로 특정 매개변수가 전달되지 않을 수도 있음을 정의한다
  • 또는 매개변수의 기본값을 할당해 매개변수 전달되지 않는경우를 처리한다.
  • return 이 없으면 리턴값 타입은 void
  • 함수의 끝에 도달할 수 없을 경우 리턴값 타입은 never ex) while문

function tsPrint(a: number, b: number, c?: number): void {
  console.log(a);
  console.log(b);
  console.log(c);
}

tsPrint(1, 2, 3);
console.log('---');
tsPrint(1, 2);

function tsPrint2(a: number, b: number, c: number = 5) {
  console.log('print2!');
  console.log(a);
  console.log(b);
  console.log(c);
}

tsPrint2(1, 2, 3);
tsPrint2(1, 2);

function concatStr(a: string, b: number): string {
  return a + b;
}

function circleArea(r: number): number {
  return r * r * Math.PI;
}

// 함수 표현식
const squareArea = (a: number, b: number): number => {
  return a * b;
};

// return 키워드 없는 리턴
const triangleArea = (w: string, h: string): number =>
  (Number(w) * Number(h)) / 2;

• 오버로딩 : 함수에서 매개변수의 개수, 타입, 반환타입이 다를 때 같은 함수를 다른 타입으로 사용할때 쓴다.

function add(x: string, y: string): string;
function add(x: number, y: number): number;

// 오버로딩 함수 구현
function add(x: any, y: any) {
  return x + y;
}

console.log(add(1, 2));
console.log(add('1', '2'));
// console.log(add('1', 2)); // error , 정해진 타입으로 인자가 필요

Generic

• 타입을 특정할 수 없는 경우에 generic을 사용한다.
• any 로 모든 타입을 받게 할 수 있지만, 그러면 타입스크립트를 쓰는 이유가 없어진다. (타입 체크 불가)
• <> 기호로 generic을 사용할때의 타입을 받을 수 있다. (함수의 인자 사용과 비슷)

function printSome<T>(x: T, y: T): T {
  console.log('x와 y', x, y);
  return x;
}

printSome<number>(1, 2);
printSome<string>('1', '2');
printSome<boolean>(true, false);

• 타입을 여러개 받아서 사용할수 도 있다.

function printSome2<T, K>(x: T, y: K): T {
  console.log('x와 y', x, y);
  return x;
}

printSome2<number, string>(1, 'hello');

• 다양한 사용법

function arrLength<T>(arr: T[]): number {
  return arr.length;
}

function getValue<T>(val: T): T {
  return val;
}

console.log(arrLength<string>(['a', 'b']));
console.log(arrLength<string | number>([1, 2, 3, 'a', 'b']));
console.log(getValue('value'));
console.log(getValue<string[]>(['value']));

• interface에서 generic 사용
  • ex) option 값으로 string 또는 다른 오브젝트 타입으로 받을 필요가 있을때, interface에서도 generic을 사용한다.