🔷TypeScript

• JavaScript : 런타임에 타입 결정, 오류 발견
• TypeScript : 컴파일 타임에 타입 결정, 오류 발견으로 안정적인 개발 가능

🔷타입 종류

✔️tuple

• 인덱스 별로 타입이 다를 때 사용

let tuple:[number, string];
tuple = [1, 'abc']; 
// 에러
// tuple = ['abc', 1];

✔️enum

• 비슷한 값 끼리의 묶음
• 값 할당해주지 않으면 순서대로 숫자 0부터 할당되고, 양방향 맵핑 가능
• 값 할당하면 해당 값으로 할당되고, 단방향 맵핑만 가능

enum NickName {
  Sophia = 'Sop',
  James = 'Jam',
  Amy = 'Amy',
}

let nick:NickName = NickName.Sophia;

🔷interface

✔️object 타입

• 타입을 object로 지정 후 프로퍼티에 접근 시,
  object에는 특정 프로퍼티에 대한 정보가 없어서 에러 발생

let user:object;
user = {
  name: 'abc',
  age: 20,
}
// 에러 : user.name 접근 불가능
// user.name

• 프로퍼티를 정의한 객체를 사용할 때는 interface 사용

interface User {
  name: string;
  age: number;
}
let user : User = {
  name: 'abc',
  age: 20,
}
// 접근 가능
user.name

✔️interface 특징

• object, 함수, class 등 객체의 구조 정의
• extends 키워드로 interface간 상속(확장)
• implements 키워드로 class 구현

✔️인덱스 시그니처

• 객체가 타입을 명시해야 하는 여러 key와 매핑되는 value 가질 때 사용

// key 타입이 number이고 value 타입이 string인 프로퍼티는 모두 허용
interface User {
  [grade:number]: string;
}

🔷type

• 위 경우 허용되는 값이 너무 광범위
• 이 때 type 키워드로 리터럴 타입 사용해서 허용된 값만 가능하게 설정

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
  [grade: number]: Score;
}

🔷함수

✔️오버로드

interface User {
  name: string;
  age: number;
}

// 함수 오버로드 : 이 부분 없으면 에러
// 전달받은 매개변수의 개수, 타입에 따라 다른 동작 수행
function join(name:string, age:number):User
function join(name:string, age:string):string

function join(name: string, age: number | string): User | string {
  if (typeof age == 'number') {
    return {
      name,
      age,
    };
  } else {
    return '나이 숫자로 입력';
  }
}


// '함수 오버로드' 없으면 에러
// Sam, Jane의 반환 타입이 각각 User, string 이라고 확신할 수 없음
const Sam: User = join('Sam', 10);
const Jane: string = join('Jane', '10');

// 함수 오버로드로 해결

• 함수 오버로드 부분이 없으면 join()의 반환 값의 타입이 User인지 string인지 확신할 수 X
• 매개변수의 타입에 따라서 반환 값의 타입 명시해주는 오버로드 부분 필요

🔷클래스

✔️생성

class Car {
  color: string;	// 이 부분 TypeScript에서는 필수
  constructor(color: string) {
    this.color = color;
  }
}

• JavaScript 에서는 생성자 함수에서 바로 this.프로퍼티명을 지정해주는 것은 에러X
• TypeScript 에서 프로퍼티 변수는 미리 선언해야 함
• 미리 선언하지 않고, public, readonly를 생성자 함수의 매개변수에 붙여줘도 됨

class Car {
  constructor(public color: string) {
    this.color = color;
  }
}

class Car {
  constructor(readonly color: string) {
    this.color = color;
  }
}

✔️접근 제한자

• public
  • 기본값
  • 자식 클래스, 클래스 인스턴스에서 접근 가능
• protected
  • 자식 클래스에서 접근 가능
  • 클래스 인스턴스에서는 접근 불가능
• private
  • 해당 클래스 내부에서만 접근 가능
  • #변수명로 표현 가능

🔷제네릭

• 클래스, 함수, interface 재사용 가능
• 선언 시점에 타입을 변수로 적어두고, 생성 시점에 결정

✔️함수에서 사용

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

const arr1 = [1, 2, 3];
getSize<number>(arr1);

const arr2 = ['a', 'b', 'c'];
getSize<string>(arr2);

// <T> 명시하지 않아도 자동으로 타입 부여
const arr3 = [false, true, true];
getSize(arr3);

✔️interface에서 사용

interface Mobile<T> {
  name: string;
  price: number;
  option: T;
}

// const m1:Mobile<object>
const m1: Mobile<{ color: string; coupon: boolean }> = {
  name: 'm1',
  price: 1000,
  option: {
    color: 'pink',
    coupon: false,
  },
};

const m2: Mobile<string> = {
  name: 'm2',
  price: 2000,
  option: 'good',
};

✔️제네릭을 활용한 타입 추상화

• Pick<T, K>

  • Pick은 객체 타입 T에서 특정 속성들만 선택하여 새로운 타입을 만들 때 사용

    type MyType = {
    	name: string;
    	age: number;
    	address: string;
    };
    type SelectedType = Pick<MyType, 'name' | 'age'>;
    // SelectedType: { name: string; age: number; }

  • SelectedType은 MyType에서 'name'과 'age' 속성만을 선택한 새로운 타입

• Omit<T, K>

  • 객체 타입 T에서 특정 속성들을 제외한 나머지 속성들로 새로운 타입을 만들 때 사용

  • Pick의 반대 개념

    type MyType = {
    	name: string;
    	age: number;
    	address: string;
    };
    
    type NewType = Omit<MyType, 'address'>;
    // NewType: { name: string; age: number; }

  • NewType은 MyType에서 'address' 속성을 제외한 나머지 속성들로 이루어진 새로운 타입

🔷타입 어설션(단언)

• 컴파일러에게 변수나 표현식의 타입을 개발자가 명시적으로 지정
  • angle-bracket 문법 <타입>

    let someValue: any = "this is a string";
    let strLength: number = (<string>someValue).length;

  • as 문법

    let someValue: any = "this is a string";
    let strLength: number = (someValue as string).length;

  • someValue를 string으로 명시적으로 타입 지정