typescript 완벽 정복

서론

몇번이나, 정말 몇번이나 티스토리에 타입 스크립트 완벽 정복 이 난리 치면서 글로 똥싸지르다가
지우고 타입 스크립트로 소설 쓴다고(진짜 소설) 또 똥 싸지르고 그러다가 진짜 운 좋아서 투입한 네이버에서 아 내 블로그 봐야지 하고 티스토리 갔다가
눈칫밥먹고 그러다가 어느새 벨로그로 넘어오니 제대로 정리해야겠다 싶더라.

그러니까 또 기억이 안나네?, 해봤으니까 오래 안걸리겠지?

자, 타입스크립트 공홈으로 들어가본다.

원래 같았으면

"스크린샷 찍어놓고 메인에 TypesScript is Javascript with syntax for types ! 가 써져있다!
이 말은 즉슨 타입스크립트는 type를 위한 Javascript 문법이다!

자 여기서부터 하나하나 살펴보자."

OFFICE

if("" == 0) {
	// 이거야! 하지만 왜?!
}
if(1 < x < 3) {
  	// x 에서 결괏값을 찾을거야 어느 타입이든 상관없이 true 인 값들로 !
	// True for *any* value of x!
}

뭐 이딴 식으로 기재했을거다.
하지만 이제부턴 차근차근 정리 해보기로 한다.

본론

자 이제 진짜 시작이다.

타입스크립트는 JS를 추상화하기 위한 좀 더 Super Set 언어다.

• 기존에도 가능했던 JS 추상화에 대해 좀 더 나중에 다루도록 해보겠다.

• TypeScript에는 다른 종류의 값을 사용할 수 있는 방법이 추가되어야 하는 유형이 있는 상위 그룹이다.
• TypeScript는 배열을 숫자로 취급하지 않는다.
• TypeScript는 Javascript의 방향으로 동작한다.
• Javascript 예외 처리를 유지하는 것은 프로그램 작동을 제한하지 않고 두 가지 언어로 간단히 전환할 수 있도록 하기 위한 TypeScript의 약속이다.

타입 추론 (Types by Interface)

• TypeScript는 JavaScript의 언어를 알고 있고 대부분의 경우 타입을 생성해준다.

  • Example 변수를 생성하면 동시에 특정 값에 할당하는 경우 TypeScript는 그 값을 해당 변수의 타입으로 사용

    let helloWorld = "HelloWorld";
    // ^?

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

타입 정의하기 (Defining Types)

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

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

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

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

const animal: Animal = {
	id: 0, 
  	name: "강아지",
}

interface는 class로도 선언할 수 있다.

interface Animal {
	name: string;
	id: number;
}
class AnimalAccount {
	id: number;
  	name: string;
	
constructor(id: number, name: string){
    this.id = id; 
    this.name = name;
	}
}

const animal: Animal = new AnimalAccount("말티즈", 1);

inteface는 함수에서 매개변수와 리턴 값을 명시하는데도 사용된다.

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

function getAdminAnimal(): Animal {
	//
}

function deleteAnimal(animal: Animal){
}

또한 TypeScript는 JavasScript에서 갖고 있는 원시 타입외에 추가적인 Type을 갖고 있다. 이러한 종류에는 any 혹은 unkown, void 이 있다.

TypeScript는 코드 시간에 따라 변수가 변경되는 방식을 이해하면
Type검사를 통해 원하는 Type을 골라낼 수 있다.

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

• Generic을 사용하면 고유 타입을 선언할 수 있다.

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)

• 타입 검사가 값이 있는 형태에 집중한다.
• 이는 때때로 “덕 타이핑(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 타입으로 선언된 적이 없다.
• TypesScript 타입 검사에서 point의 형태와 Point의 형태를 비교한다.
• 둘 다 같은 형태이기 때문에 통과한다.
• 형태 일치에는 일치 시킬 객체의 필드의 하위 집합만 필요하다.

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

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

const point3 = { x: 12, y:26, z:89};
printPoint(point3);

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

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

• 구조적으로 class와 객체가 형태를 따르는 방법에 차이가 없다.

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

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

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); // "13, 56"

• 객체, 클래스에 필요한 모든 속성이 존재할 시 TypeScript는 구현 세부 정보에 관계 없이 일차헥 본다.