타입스크립트를 이용한 풀스택 강좌 - 타입스크립트 기초 원리

타입스크립트 핸드북 참고 (강의 듣기 전 학습)

https://typescript-kr.github.io/pages/tutorials/ts-for-js-programmers.html

타입스크립트는 자바스크립트 위에 레이어로 자리잡아 자바스크립트의 기능을 제공하면서 그위에 자체 레이어를 추가한다. 이 레이어가 타입스크립트 타입 시스템이다.

자바스크립트는 이미 string, number, object, undefined같은 원시 타입을 가지고 있지만 전체 코드베이스에서 일관되게 할당 되었는지 미리 확인해주지 않는다. 타입스크립트의 타입 검사기는 사용자의 의도와 자바스크립트가 실제로 하는 일 사이의 불일치를 강조할 수 있다.

타입스크립트는 타입스크립트에게 타입이 무엇이 되어야 하는지 명시가능한 자바스크립트 언어어의 확장을 지원한다.

const user = {
  name: "Hayes",
  id: 0,
};

이 객체의 형태를 명시적으로 나타내기 위해서는 interface로 선언한다.

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

이제 변수 선언 뒤에 : typename 의 구문을 사용해 자바스크립트 객체가 새로운 interface의 형태를 따르고 있음을 선언할 수 있다.

interface User {
  name: string;
  id: number;
}
// ---cut---
const user: User = {
  name: "Hayes",
  id: 0,
};

인터페이스는 클래스로도 선언할 수 있다.

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

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Murphy", 1);

또한 인터페이스 함수는 매개변수와 리턴 값을 명시하는데 사용되기도 한다.

// @noErrors
interface User {
  name: string;
  id: number;
}
// ---cut---
function getAdminUser(): User {
  //...
}

function deleteUser(user: User) {
  // ...
}

타입스크립트는 any(무엇이든 허용), unknown(이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인하십시오), never(이 타입은 발생될 수 없음), void(undefined 를 리턴하거나 리턴 값이 없는 함수) 등의 타입을 추가로 사용할 수 있다.

가장 많이 사용되는 유니언과 제네릭에 대해서 알아보자.

유니언은 타입이 여러타입 중 하나일 수 있음을 선언하는 방법이다. 예를 들어 boolean 타입을 true 또는 false 로 설명할 수 있다.

type MyBool = true | false;

유니언 타입이 가장 많이 사용되는 사례는 다음과 같이 허용되는 string 또는 number 의 리터럴 집합을 설명하는 것이다.

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

array, string를 받는 함수가 있을 수 있다.

function getLength(obj: string | string[]) {
  return obj.length;
}

예를 들어, typeof obj === "string"을 이용하여 string과 array를 구분할 수 있으며 TypeScript는 객체가 다른 코드 경로에 있음을 알게 됩니다.

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
//          ^?
  } else {
    return obj;
  }
}

제네릭

강의
타입스크립트 문법은 오로지 사용자의 편의를 위해서만 필요하고, 실제 실행되는 코드는 자바스크립트 코드이다. 타입스크립트는 런타임에서 아무것도 할 수 없다.

타입스크립트의 타입은 자바스크립트로 표현 가능한 값들의 집합이다.

type apple = number
const value: apple = 5

이 코드는 왜 문제가 없을까?

타입스크립트의 넘버 타입은 자바스크립트로 표현가능한 모든 넘버 값의 집합이다.

타입스크립트는 이렇게 집합의 모양이 같으면 같은 타입으로 취급한다.

interface Something {
  name: string;
}

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

function printInfo(v: Something) {
  console.log("name is", v.name);
}

const person: Human = { name: "홍길동", age: 20 };
printInfo(person);

결국 인자 v 는 타입이름이 Something가 아니어도 되고, 그저 Something 타입을 포함하는 집합을 나타내는 타입이기만 하면 된다.

이런 집합의 개념은 함수 인자 뿐만아니라 타입스크립트의 모든 경우에 해당된다.

interface Human {
    name: string
    age: number
}

const someValue = {name:"홍길동", age:20, anyOther: 1234}
const person: Human = someValue