g

TS for JS Programmers#

타입 추론 (Types by Inference)#

이는 코드에서 타입을 명시하기 위해 추가로 문자를 사용할 필요가 없는 타입 시스템을 제공합니다. 이것이 위의 예제에서 TypeScript가 helloWorld가 string임을 알게 되는 방식

let helloWorld = "Hello World";
//  ^?

타입 정의하기 (Defining Types)#

JavaScript는 다양한 디자인 패턴을 가능하게 하는 동적 언어

name: string과 id: number을 포함하는 추론 타입을 가진 객체를 생성하는 예제#

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

인터페이스에 맞지 않는 객체를 생성하면 TypeScript는 경고#

// @errors: 2322
interface User {
  name: string;
  id: number;
}

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

JavaScript는 클래스와 객체 지향 프로그래밍을 지원#

TypeScript 또한 동일

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

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) {
  // ...
}

Types#

JS types#

boolean, bigint, null, number, string, symbol, object와 undefined

extensional Types#

any (무엇이든 허용합니다),
unknown (이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인하십시오),
never (이 타입은 발생될 수 없습니다)
void (undefined를 리턴하거나 리턴 값이 없는 함수).

tip

interface를 우선적으로 사용하고 특정 기능이 필요할 때 type을 사용해야 합니다.

타입 구성 (Composing Types)#

여러가지 타입을 이용하여 새 타입을 작성

두 가지 코드로는

유니언(Union)
제네릭(Generic)

유니언 (Unions)#

타입이 여러 타입 중 하나일 수 있음을 선언

예를 들어,

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;
}

이러한 검사를 사용해 타입을 골라낼 수 있습니다.#

Type	Predicate
string	`typeof s === "string"`
number	`typeof n === "number"`
boolean	`typeof b === "boolean"`
undefined	`typeof undefined === "undefined"`
function	`typeof f === "function"`
array	`Array.isArray(a)`

Reference#

https://typescript-kr.github.io/