2023-03-06 타입스크립트 2일차 타입스크립트의 목적/ ts for js programmers

공식문서 참고

 

핸드북에 대해서

JavaScript는 웹 페이지에 사소한 상호작용을 추가하기 위한 작은 스크립팅 언어로 시작하여, 규모에 상관없이 프론트엔드와 백엔드 애플리케이션에서 선택 가능한 언어로 성장했습니다.

JavaScript로 작성된 프로그램의 크기, 범위 및 복잡성은 기하급수적으로 커졌지만, 다른 코드 단위 간의 관계를 표현하는 JavaScript 언어의 능력은 그렇지 못했습니다.

JavaScript의 다소 특이한 런타임 의미 체계(runtime semantics)와 더불어, 언어와 프로그램 복잡성 간의 불일치는 JavaScript 개발을 규모에 맞게 관리하기 어려운 작업으로 만들었습니다.

 

프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다: 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우입니다. 이는 단순한 오타, 라이브러리 API를 이해하지 못한 것, 런타임 동작에 대한 잘못된 가정 또는 다른 오류 때문일 수 있습니다. TypeScript의 목표는 JavaScript 프로그램의 정적 타입 검사자 입니다. 즉, 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)입니다.

 

JavaScript에 대한 배경지식 없이 TypeScript를 첫 번째 언어로 사용한다면, 먼저 Mozilla 웹 문서에서 JavaScript에 대한 문서를 읽어 보는 것이 좋습니다.

Mozila 웹사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide

 

* cross-platform 언어 : 소프트웨어가 둘 이상의 플랫폼을 지원하는것을 뜻하는 용어

 

 

 

핸드북 가이드 내용

• 일반적으로 사용하는 TypeScript 구문 및 패턴을 읽고 이해하기
• 중요한 컴파일러 옵션의 효과 설명하기
• 대부분의 경우에서 타입 시스템 동작을 올바르게 예측하기
• 간단한 함수, 객체 또는 클래스에 대한 .d.ts 선언 작성하기

 

 

시작하기 전, ts for js programmers를 읽어보겟다

타입 추론 (Types by Inference)

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

let helloWorld = "Hello World";

타입 정의하기 (Defining Types)

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

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

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

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

이제 변수 선언 뒤에 : TypeName의 구문을 사용해 JavaScript 객체가

새로운 interface의 형태를 따르고 있음을 선언할 수 있습니다.

interface로 선언된 User 객체를  ㅡ> 자바스크립트의 객체인 const user가  : User interface의 형태를 따르고 있다.

 

* 해당 인터페이스에 맞지 않는 객체를 생성시 타입스크립트의 상냥한 경고

username이라는 내용이 없다! > name 으로 고쳐주면 오류 해결

 

---

JavaScript는 클래스와 객체 지향 프로그래밍을 지원하기 때문에, TypeScript 또한 동일합니다.

- 인터페이스는 클래스로도 선언 가능

잘몰라서 다른 곳을 검색해봣는데

요즘 공부하는 java 문법이랑 비슷해서 좀 신기하다.

 

 

 

person이란 클래스에

name : string;  네임이란 스트링 타입을 가진게 있고,

생성자에 이 네임을 가져다 쓰는것도 좀 비슷하다.

메소드 walk() 또한 저것을 가져다 쓰고있고

 

아랫 부분에 const person1 = new Person('박 지원'); 이 부분도 이클립스에서 main 메소드에서 객체 생성시 쓰는것과 비슷

person1.walk(); 를 실행시키면

박 지원 is walking. 이라고 콘솔에 뜰 것

class Person {
    name: string;

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

    walk() {
        console.log(`${this.name} is walking.`);
    }
}

const person1 = new Person('park jiwon');
person1.walk();

 

 

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

함수는 값을 반환해야 한다 err

 

타입스크립트에서 몇 가지 추가한 타입들

JavaScript에서 사용할 수 있는 적은 종류의 원시 타입이 이미 있습니다.

:  boolean, bigint, null, number, string, symbol, object와 undefined 는 인터페이스에서 사용할 수 있습니다. 

** 타입스크립트는 몇 가지 추가함

• any (무엇이든지 허용)
• unknown ( 이 타입은 사용하는 사람의 타입이 무엇인지, 선언했는지 확인 )
• never ( 이 타입은 발생될 수 없다 )
• void (undefined 를 리턴하거나 리턴 값이 없는 함수 )

 

객체의 타입을 구축하기 위한 두 가지 방법

- interface 를 우선적으로 사용하고!!(확장성이 좋다) / 특정 기능이 필요할 때 type 을 사용하기

 

---

타입 구성 (Composing Types)

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

 

유니언 (Unions) | 

유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법입니다.

예를 들어, boolean 타입을 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;
  }

string 또는 string[ ] 배열을 받는 함수도 가능하군..

 

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는 객체가 다른 코드 경로에 있음을 알게 됩니다.

if문으로 구분하고 있네요 typeof obj === "string"

 

 

---

제네릭 (Generics) < >

 제네릭은 타입에 변수를 제공하는 방법입니다.

배열이 일반적인 예시이며, 제네릭이 없는 배열은 어떤 것이든 포함할 수 있습니다.

제네릭이 있는 배열은 배열 안의 값을 설명할 수 있습니다.

재네릭이 있는 배열은 배열안의 타입이 뭔지 알 수 있게 명시되나봄

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

// @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)" 또는 "구조적 타이핑" 이라고 불립니다.

 

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

point 변수는 point 타입으로 선언된 적이 없지만!

타입스크립트는 타입 검사에서 point의 형태와 Point의 형태를 비교한다. 둘 다 같은 형태이기 때문에, 통과한다.

 

 

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

이말이 잘 모르겟는데.. 사진보면

x, y 라는 형태가 같은 값들만 출력하고 있다.

마지막의 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"

interface Point가 객체,  class인 VirtualPoint 는 형태의 차이가 없어보인다. 

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

 

클래스든 객체든.. 즉 내용이 똑같으면 같다고 본다는 의미 같다