Day 27, Typescript

노마드코더 강의 듣다가 뭔가 개념이 잘 안잡혀서
코딩앙마님 강의 들었는데 강의도 짧고 간단하게 설명 잘하셔서 좋았다 :)
자바스크립트에서 타입을 넣은 개념이라 크게 어렵지는 않았지만
실제로 프로젝트 해보며 사용해봐야 익숙해질 것 같다!

---

Typescript

• JavaScript 코드를 보다 안전하고 유지 관리하기 쉽게 만들기 위해 정적 타입 검사를 제공 언어
• JavaScript에서 발생할 수 있는 오류를 줄이고 코드의 가독성과 유지 보수성을 향상시킴

특징

• 정적 타입 검사
• 타입 추론
• 객체지향프로그래밍

Typescript 타입

• number
• string
• boolean
• null
• any
• void
• unknown
• never

Typescript 실습

// npm install -g typescript
// tsc index.ts

let a: number = 3;
let b: string = "와우";
b = "abc";

// any는 기존 자바스크립트처럼 모든 타입 (잘 안씀)
let c: any = 4;
c = "afds";
c = 231;

let d: number | string = "파란줄은 에러 아님";
d = 3;
// d = null 이건 에러

let e: string[] = ["apple", "mango"];
// e.push(3); 숫자 안됨

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

addNumber(5, 3);

type Age = number;
type Name = string;

type Player = {
  readonly name: Name;
  age?: Age;
};

const sanchou: Player = {
  name: "sanchou",
  age: 4,
};

const playermaker = (name: string): Player => ({ name });

const nico = playermaker("nico");
nico.age = 20;

const numbers: readonly number[] = [1, 2, 3, 4];
// numbers.push(1); 불가능

// tuple
const person: readonly [string, number, boolean] = ["sanchou", 4, true];

// unknown
let abc: unknown;
if (typeof abc === "number") {
  let cba = abc + 1;
}

// function
type Add = (a: number, b: number) => number;
const add: Add = (a, b) => a + b;

// 오버로딩
type Add2 = {
  (a: number, b: number): number;
  (a: number, b: string): number;
};

type Push = {
  (path: string): void;
  (config: Config): void;
};

type Config = {
  path: string;
  state: object;
};

const push: Push = (config) => {
  if (typeof config === "string") console.log(config);
  else {
    console.log(config.path);
  }
};

// 다형성
type SuperPrint = {
  <T>(arr: T[], b: M): T; // 타입을 유추하라고 함
  // 기존 코드 (arr: boolean[]): void;
};

const superPrint: SuperPrint = (arr) => arr[0];

const p = superPrint([1, 2, 4, 5], "abc");
const q = superPrint([true, true, false], 123);
const r = superPrint([1, "a", false], "제네릭");

//
type Player2<E> = {
  name: string;
  extraInfo: E;
};

const bob: Player2<{ favFood: string }> = {
  name: "sanchou",
  extraInfo: {
    favFood: "noddle",
  },
};

// ============= 객체지향 ===============
abstract class Player3 {
  constructor(
    private firstName: string,
    private lastName: string,
    protected nickname: string
  ) {}

  abstract getNickName(): void;

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

//에러 gaeun.firstName;

// 추상클라스
class Player4 extends Player3 {
  getNickName(): void {
    console.log(this.nickname);
  }
}

const nico3 = new Player4("nico", "las", "니꼬");
nico3.getFullName();

//
type Words = {
  [whatever: string]: string;
};

let dict: Words = {
  potato: "food",
};

class Dict {
  private words: Words;
  constructor() {
    this.words = {};
  }
  add(word: Word) {
    if (this.words[word.term] === undefined) {
      this.words[word.term] = word.def;
    }
  }
  def;
}

class Word {
  constructor(public term: string, public def: string) {}
}

const asdf = new Word("gg", "ㅇㅇ");

const dic = new Dict();
dic.add;