둔필승총

TypeScript는 JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다.

JavScript는 string, number, object, undefined 같은 타입을 가지고 있지만, 할당되었는지 미리 확인해 주지 않는다.

타입 정의하기(Defining Types)

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

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

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

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

해당 interface에 맞지 않는 객체를 생성하면 TypeScript는 경고를 준다.

TypeScript는 JavaScript와 마찬가지로 객체 지향 프로그래밍을 지원한다.

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

function getAdminUser(): User {
  //...
}

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

JavaScript에서 사용했던 boolean, bigint, null, number, string, symbol, object, undefined는 당연히 사용할 수 있고, 여기에 더하여

any (무엇이든 허용)

unknown (타입이 무엇인지 확인)

never (이 타입은 발생될 수 없다)

void (undefined를 리턴하거나 리턴 값이 없음)

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;

function getLength(obj: string | string[]) {
  return obj.length;
}
// 이건 array 또는 string을 받는 함수라는 뜻이다.

제네릭(Generics)

제네릭은 이전 글에서 공부했었는데, 타입에 변수를 제공하는 방법이다.

제네릭이 없는 배열은 어떤 것이든 포함할 수 있다.

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

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

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

타입 검사가 값이 있는 형태에 집중한다.

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

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의 형태를 비교하여 같은 형태이기 때문에, 통과한다.

TypeScript 설치

2가지 방법으로 설치할 수 있다.

1. npm을 이용 (Node.js 패키지 매니저)
2. TypeScript의 Visual Studio 플러그인 설치

npm install -g typescript

코드 컴파일

tsc temp.ts