TypeScript TS TypeScript 정의의 의미

JavaScript의 상위 집합(ES5)

1⃣ 기존 JavaScript(ES5) 구문을 그대로 사용할 수 있습니다.

또한 ES6의 새로운 기능을 사용하려면 바벨ES6의 새로운 기능은 별도의 트랜스파일러를 사용하지 않고 기존 JavaScript 엔진(현재 브라우저 또는 Node.js)에서 실행할 수 있습니다.

2⃣ 정적 유형

function sum(a: number, b: number) {
  return a + b;
}

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

TypeScript는 정적 타이핑을 지원하므로 컴파일 단계에서 오류를 포착할 수 있습니다.

3⃣ 객체 지향

인터페이스, 제네릭 등 객체지향 프로그래밍 지원

• 상호 작용

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };

// 클래스와 인터페이스
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) {
  // ...

• 일반적인

제네릭은 재활용목적을 위해 함수 또는 클래스를 선언할 때가 아닙니다. 사용 시점(호출)에서 유형 선언5월

// generic사용. 재사용 가능하면 타이핑도 들어가 자동 완성 해 줌
function logText<T>(param: T): T {
  return param;
}

// any 사용. 재사용은 할 수 있으나 타이핑이 안 됨
function logText(param: any): any {
  return param;
}

function identity<T>(arg: T): T {
  return arg;
}

// 타입 지정
console.log(identity<number>(3));
console.log(identity<string>("coding"));

// 타입 추론 해 줌
console.log(identity((1, 3, 5)));

// interface, class에 generic 사용
interface DropDown<T> {
  value: T;
  selected: boolean;
}

const obj: DropDown<number> = {
  value: 1,
  selected: false,
};
class Human<T, K> {
  constructor(private _name: T, public age: K) {}
  say(): void {
    console.log(`${this._name} is ${this.age} years old`);
  }
}

const me = new Human<string, number>("foo", 100);
console.log(me);

4⃣ 노조

공용체는 유형이 여러 유형 중 하나일 수 있음을 선언하는 방법입니다.

// any를 사용하는 경우
function getAge(age: any) {
  age.toFixe(); // 에러 발생, age의 타입이 any로 추론되기 때문에 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않는다.
  return age;
}

// 유니온 타입을 사용하는 경우
function getAge(age: number | string) {
  if (typeof age === 'number') {
    age.toFixed(); // 정상 동작, age의 타입이 `number`로 추론되기 때문에 숫자 관련된 API를 쉽게 자동완성 할 수 있다.
    return age;
  }
  if (typeof age === 'string') {
    return age;
  }
  return new TypeError('age must be number or string');
}