TypeScript 정리

타입스크립트에 대해 공부하자

TypeScript란?

2012년 마이크로소프트가 개발한 JavaScript 기반의 정적 타입 문법을 추가한 ‘프로그래밍 언어

TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다. 

 

TypeScript를 사용하는 이유

• 강력한 타입 시스템
  
  TypeScript를 사용하는 가장 큰 이유는 ‘타입’ 때문입니다. 타입을 사용함으로써 코드 퀄리티와 가독성을 높일 수 있다 여기서 ‘타입’이란, 어떠한 변수가 숫자인지, 문자인지, true/false 인지에 관한 추상 형태입니다. 
  JavaScript는 이미 string, number, object, undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게 할당되었는지는 미리 확인해 주지 않는다. 
  
  컴파일 에러를 예방할 수 있을뿐 아니라, 손쉬운 디버깅이 가능해진다. 연구에 따르면 모든 JavaScript 버그의 15%가 사전에 TypeScript로 감지할 수 있다
• 높은 생산성의 타입 스크립트
  
  TypeScript는 높은 생산성을 제공합니다. Javascript로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야 했지만 TypeScript를 사용한다면 변수의 이름뿐만 아니라 그 테이터의 자료형까지 알 수 있게 됩니다. 그래서 코드 작성을 쉽고 직관적으로 할 수 있습니다. 
  
  
• JavaScript의 슈퍼셋
  
  마지막으로 호환성이 있습니다. 앞서 말했던 것처럼 TypeScript는 JavaScript의 슈퍼 셋입니다. 슈퍼 셋이란 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용 가능하도록 확장된 것을 말하는데, TypeScript를 적용하는 경우 기존의 JavaScript로 짜인 코드에 확장하는 식으로 대규모 수정 없이도 TypeScript 적용이 가능합니다. 

 

TypeScript 10분 정리

 

타입 추론 (Types by Inference)

TypeScript는 JavaScript 언어를 알고 있으며 대부분의 경우 타입을 생성해준다. 예를 들어 변수를 생성하면서 동시에 특정 값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용한다.

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

JavaScript가 동작하는 방식을 이해함으로써 TypeScript는 JavaScript 코드를 받아들이면서 타입을 가지는 타입 시스템을 구축한다. 이는 코드에서 타입을 명시하기 위해 추가로 문자를 사용할 필요가 없는 타입 시스템을 제공한다. 이것이 위의 예제에서 TypeScript가 helloWorld가 string임을 알게 되는 방식

 

 

타입 정의하기 (Defining Types)

JavaScript는 다양한 디자인 패턴을 가능하게 하는 동적 언어. 몇몇 디자인 패턴은 자동으로 타입을 제공하기 힘들 수 있는데 (동적 프로그래밍을 사용하고 있을 것이기 때문에) 이러한 경우에 TypeScript는 TypeScript에게 타입이 무엇이 되어야 하는지 명시 가능한 JavaScript 언어의 확장을 지원한다.

 

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

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

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

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

이제 변수 선언 뒤에 : TypeName의 구문을 사용해 JavaScript 객체가 새로운 interface의 형태를 따르고 있음을 선언할 수 있습니다.

interface User {
  name: string;
  id: number;
}
// ---cut---
const user: User = {
  name: "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);

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

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

 

 

타입 구성 (Composing Types)

객체들을 조합하여 더 크고 복잡한 객체를 만드는 방법과 유사하게 TypeScript에 타입으로 이를 수행하는 도구가 있다. 여러가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용되는 두 가지 코드로는 유니언(Union)과 제네릭(Generic)이 있다.

 

유니언 (Unions)

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

type MyBool = true | false;

참고: MyBool위에 마우스를 올린다면, boolean으로 분류된 것을 볼 수 있다.

 

유니언 타입이 가장 많이 사용된 사례 중 하나는 값이 다음과 같이 허용되는 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;
}

 

TypeScript는 코드가 시간에 따라 변수가 변경되는 방식을 이해하며, 이러한 검사를 사용해 타입을 골라낼 수 있다.

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)

 

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

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

 

제네릭 (Generics)

제네릭은 타입에 변수를 제공하는 방법입니다.
배열이 일반적인 예시이며, 제네릭이 없는 배열은 어떤 것이든 포함할 수 있습니다. 제네릭이 있는 배열은 배열 안의 값을 설명할 수 있습니다.

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

제네릭을 사용하는 고유 타입을 선언할 수 있습니다:

// @errors: 2345
interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

// 이 줄은 TypeScript에 `backpack`이라는 상수가 있음을 알리는 지름길이며
// const backpack: Backpack<string>이 어디서 왔는지 걱정할 필요가 없습니다.
declare const backpack: Backpack<string>;

// 위에서 Backpack의 변수 부분으로 선언해서, object는 string입니다.
const object = backpack.get();

// backpack 변수가 string이므로, add 함수에 number를 전달할 수 없습니다.
backpack.add(23);

 

 

구조적 타입 시스템 (Structural Type System)

TypeScript의 핵심 원칙 중 하나는 타입 검사가 값이 있는 형태에 집중한다는 것입니다. 이는 때때로 “덕 타이핑(duck typing)” 또는 “구조적 타이핑” 이라고 불립니다.

구조적 타입 시스템에서 두 객체가 같은 형태를 가지면 같은 것으로 간주됩니다.

interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// "12, 26"를 출력합니다
const point = { x: 12, y: 26 };
printPoint(point);

point변수는 Point타입으로 선언된 적이 없지만, TypeScript는 타입 검사에서 point의 형태와 Point의 형태를 비교합니다. 둘 다 같은 형태이기 때문에, 통과합니다.

형태 일치에는 일치시킬 객체의 필드의 하위 집합만 필요합니다.

 

// @errors: 2345
interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// ---cut---
const point3 = { x: 12, y: 26, z: 89 };
printPoint(point3); // prints "12, 26"

const rect = { x: 33, y: 3, width: 30, height: 80 };
printPoint(rect); // prints "33, 3"

const color = { hex: "#187ABF" };

printPoint(color);

마지막으로, 정확하게 마무리 짓기 위해, 구조적으로 클래스와 객체가 형태를 따르는 방법에는 차이가 없습니다:

// @errors: 2345
interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// ---cut---
class VirtualPoint {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

const newVPoint = new VirtualPoint(13, 56);
printPoint(newVPoint); // prints "13, 56"

객체 또는 클래스에 필요한 모든 속성이 존재한다면, TypeScript는 구현 세부 정보에 관계없이 일치하게 봅니다.

 

 

 

참고 사이트

https://www.typescriptlang.org/ko/

JavaScript With Syntax For Types.

https://www.elancer.co.kr/blog/view?seq=183

TypeScript 사용하는 이유, 현직 웹 개발가 알려드립니다! I 이랜서