타입스크립트(TS)의 타입

기본제공 타입

number, string, boolean, object
unknown, any, null, undefinded, void, symbol, never, etc....

다양한 종류의 타입 가운데, 치트키의 역할
any는 모든 타입을 수용할 수 있음

타입스크립트 계층 구조

슈퍼타입 : 상대적으로 상위랭크되어있는 타입 > 수용할 수 있는 타입의 개수 많아짐
서브타입 : 상대적으로 하위랭크되어 있는 타입 > 수용할 수 있는 타입의 개수 한정적

unknown (가장 최상위 타입, 슈퍼타입) <=> 서브타입

출처 : 이젠아카데미 선생님...

unknown

모든 값을 받아올 수 있지만 재할당이 불가
타입제한적용

any (치트키)

let test01: any = 10;
test01 = "hi";

남발하면 안됨 (부득이한 경우에만 사용 추천)

void

함수, 변수에 반환할 값이 없는 경우 사용

const func1 = (): void => {
  console.log("world");
};

let test05: void;

never

모든 타입중 최하위

const func3 = (): never => {
  while (true) {}
};

값이 들어올 수 없는 상황일때 사용

타입구조도

타입호환성 : 타입간 호환가능한 타입

대수타입 : 슈퍼타입 > 서브타입
모든 타입은 슈퍼타입 & 서브타입
타입 수용 => 타입 호환성

업캐스팅 : 서브타입을 슈퍼타입으로 호환시키는 액션행위

다운캐스팅 : 서브타입을 슈퍼타입으로 호환시키는 액션행위 : 거의 대부분 불가

let num1: number = 10;
let num2: 10 = 10;

num1 = num2;
num2 = num1; // 에러

타입스크립트에 기본적으로 내장되어 있는 내장타입 > 리터럴 타입 (상대적 슈퍼타입)

interface Book {
  name: string;
  price: number;
}

let book: Book; // 상대적 슈퍼타입

interface ProgrammingBook {
  name: string;
  price: number;
  skill: string;
}

let programmingBook: ProgrammingBook = {
  name: "TS",
  price: 33000,
  skill: "Typescript",
};

book = programmingBook
programmingBook = book // 다운캐스팅=> 에러

슈퍼타입이라도 바로 서브타입을 할당할 수 없음

따라서 슈퍼타입에 서브타입을 할당해야할 경우 => 초과 프로퍼티 검사

초과 프로퍼티 검사

let book3: Book = programmingBook;

새로운 변수를 사용

배열의 타입

const strArr: String[] = ["1", "2", "3"];
const boolArr: Array<boolean> = [true, false, true];

union 타입

const multiArr: (string | number | boolean)[] = [1, "hello", true];

중첩배열

const doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
];

Tuple타입

let tup1: [number, number] = [1, 2];

예외
tup1.push(3);
console.log(tup1); // [1,2,3] : push는 방지가 안됨

const users: [String, Number][] = [
  ["Divid", 1],
  ["Song", 2],
  ["ASK", 3],
];

제네릭 형식

const boolArr: Array<boolean> = [true, false];

<> 안에 값을 정의

객체 & 함수 타입 정의

구조적 타입 시스템

점진적 타입시스템

const user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "David",
};

번거롭지만 가장 간단한 방법

선택적 타입적용

const user: {
  id?: number; //있어도 되고 없어도 됨
  name: string;
} = {
  name: "David",
};

선택적 값인 경우 키 뒤에 ? 를 추가하여 선택값임을 나타냄

읽기 전용 모드 readonly

let config: {
  readonly apikey: string;
} = {
  apikey: "32121515153",
};

config.apikey = "adfadf" // 불가, 에러 

키 앞에 readonly 사용시 재할당 불가

타입별칭

하나의 타입 정의 후 동일한 형태에 배분

type User = {
  id: number;
  name: string;
  location: string;
};

let user1: User = {
  id: 1,
  name: "David",
  location: "Seoul",
};
let user2: User = {
  id: 2,
  name: "Chae",
  location: "Busan",
};

유의사항 : 동일한 이름으로 선언 불가 but 지역에서는 가능

type User = {
  id: number;
  name: string;
  location: string;
};

type User = {}; // 불가

const fnc = () => {
  type User = {}; // 가능
};

인덱스 시그니처

타입별칭으로 어떤 타입을 정의 => 하위 요소의 모든 타입의 형태가 동일한 경우

type CountryCodes = {
  [key: string]: string;
};

const countryCodes: CountryCodes = {
  korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
};

최우선의 방법 추천X
객체의 타입 : interface 타입 정의가 일반적

interface 정의 (가장 추천)

선택적 프로퍼티

interface User01 {
  id: number;
}

생긴건 type 정의와 비슷하지만
implements, extends 등등 사용 가능 > 확장성이 높음

클래스를 사용한 타입 정의

class Person01 {
  name: string;
  age: number;
}

const person3: Person01 = new Person01();

바로 타입으로 사용 가능하다.

접근제어자

class Person2 {
  constructor(public name: string, public age?: number) {}
}

접근제어자 public을 통해 필드값을 생략해서 작성 가능

implements

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

class Person6 implements Person5 {
  constructor(public name: string, public age: number) {}
}

const person05 = new Person6("Julia", 30);

Person5 을 반드시 포함하는 Person6의 타입 선언

• 주의 : Person5에 있는 값들을 다시 써주는걸 검사해줌 > 효율적 방법이 아닌 안정성을 택함

추상클래스 abstract, extends

abstract class Person7 {
  constructor(public name: string, public age: number) {}
}

class Person8 extends Person7 {
  public location: string;
  constructor(name: string, age: number, location: string) {
    super(name, age);
    this.location = location;
  }
}

추상적인 클래스를 먼저 생성
Person7을 기본으로 extends 라는 확장적 개념 사용

static

class TestA {
  static initialValue = 1;
}

const test01A = TestA.initialValue;
console.log(test01A);

enum

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "David",
  role: Role.ADMIN,
};
const user2 = {
  name: "SSSS",
  role: Role.USER,
};
const user3 = {
  name: "AAA",
  role: Role.GUEST,
};

id값과 role를 합친 enum Role을 선언해서 한번에 사용 가능
실수를 많이 줄여줌