Typescript 기본 사용법과 문법

타입스크립트란?

타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다.

에러의 사전방지

math.ts
function sum(a: number, b: number) {
  return a + b;
  
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

왜냐 number로 숫자형을 입력해서 문자열이 들어어면 할당 될 수 없는것!

기존 python 의 typehint 랑 조금 비슷한 맥락이 많다!

interface

interface personAge {
	age: number;
	name?: string;
}
function logAge(obj: personAge) {
    console.log(obj.name);
}
let person = { 
name: 'Capt', age: 28 
};
logAge(person);

이런식으로interface 를 정의하고
함수에 대입해서 타입스크립트를 쓸 수 있다.

void

const test_void = void 234526
console.log(test_void)

voide 는 underfine을 반환한다.

option

interface CraftBeer {
  name: string;
  hop?: number;  
}

let myBeer = {
  name: 'Saporo'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); // Saporo
}
brewBeer(myBeer);

hop? 와 같이 ?를 명시해주면 option 으로 사용 할 수 있다.
brewBeer 함수를 보면, name 은 있고 hop 가 없지만 에러를 반환하지 않는다.

enum

enum Team {
  Manager,   // 0
  Planner,   // 1
  Developer, // 2
  Designer,  // 3
}

let sarha:number = Team.Designer; // (enum member) Team.Designer = 3

enum 의 number type 은 값을 지정해주지 않으면 0부터 1씩 올라가고, 값을 지정해주면 그 값부터 1씩 증가한다.

문자열과, 특정 값을 넣으면 상수처럼 사용할 수 있다.

readonly

let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error

readonly 로 지정하면 선언하는 시점에만 값을 정의 할 수 있다.

union

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

union type 은 or 문법이랑 비슷한 문법이다. 둘중하나를 추론해서 사용한다.

Intersection

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;

intersection type 은 두가지 모두 만족한다.

class accessor

class Developer {
  private name: string;
  
  get name(): string {
    return this.name;
  }

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error('이름이 너무 깁니다');
    }
    this.name = newValue;
  }
}
const josh = new Developer();
josh.name = 'Josh Bolton'; // Error
josh.name = 'Josh';

class 에서 get 과 set을 통해서 속성에 제약을 줄 수 있다.

제네릭

interface GenericLogTextFn<T> {
  (text: T): T;
}
function logText<T>(text: T): T {
  return text;
}
let myString: GenericLogTextFn<string> = logText;

제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다.

이것이 조금 헷갈리는 하는데 T를 잘보고 T에 대한 추론을 잘만 하면 금방 이해가 된다.

export

// math.ts
export interface Triangle {
  width: number;
  height: number;
}

// index.ts
import { Triangle } from './math.ts';

class SomeTriangle implements Triangle {
  // ...
}

타입스크립트에서 가리키는 모듈이라는 개념은 ES6+의 Modules 개념과 유사합니다. 모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export, import와 같은 키워드를 사용하지 않으면 다른 파일에서 접근할 수 없습니다.