타입스크립트

프로젝트 시작전 자료 조사의 시간

선정 이유

이번 프론트 개발의 언어로 타입스크립트를 쓰기로 했다.

 

이전에 개인 토이 프로젝트로 블록체인 프로젝트를 진행한적이 있다. 이 블록체인 프로젝트의 프론트 단을 만들 때

리액트를 사용해서 만들었었는데, 기존에 자바로만 프로그래밍을 하다보니 클래스나 상속등의 없던 것에 당황했었고

막상 코드를 짜고 나서도 무수한 undefined 에러를 마주했었다.

 

 

 

저번에 했던 프로젝트 링크 - https://github.com/KwangJongJeon/UsedCarProjectWithBlockChainClient

GitHub - KwangJongJeon/UsedCarProjectWithBlockChainClient

 

 

그래서 이번에는 좀 null을 컴파일 타임에서 처리해 줄 수 있는 언어를 사용해보자는 생각에 자료조사를 진행했는데 요즘 이런 이유로 많이 쓰는 언어가 '타입 스크립트'가 있다고 하더라,

 

 이제까지는 보지 못했던 생소한 방법으로 스크립트가 돌아갔는데 일단 타입스크립트 문법을 맞춰 작성하고나서 컴파일하면 자바스크립트로 컴파일한 뒤에 인터프리트하는 방식으로 진행된다.

 

타입스크립트는 저번 자바스크립트로 코딩을 할 때 불편함을 느꼈던 점을 전부 제공해주는듯하다. 찾아보니 크게 다음 세가지의 특징을 가지고 있고 이는 내게 가장 필요했던 기능들이다.

 

 

타입스크립트의 특징

• 에러를 잡기가 쉽다(컴파일 타임에서 에러를 잡을 수 있어, undefined등의 에러를 잡기 편하다)
• 코드 가이드 및 자동 완성을 지원한다.
• 객체지향을 위한 많은 기능 제공

특히 3번의 객체지향의 도구들을 지원한다는 특징이 이번에 객체지향 프로그래밍을 통해 구현하는데 큰 도움이 될 것 같아 타입스크립트를 채택하게 되었다.

 

사실 요즘 많이 쓰는거같아서 한번쯤 써보고 싶은 마음에 쓰는것이기도 하다 ㅎㅎ;

 

 

 

 

---

 

타입 스크립트의 문법

기존에 사용하던 언어인 자바에서는 보이지 않던 생소한 기능들이 몇 있고 특색이 있는 기능이 몇몇 있기에 따로 정리해두려고 한다.

 

지원하는 타입

• number
• string
• boolean
• array
• tuple
• Object
• any - 모든 타입을 어우를 수 있는 타입으로 기존의 자바 스크립트 타입과 비슷하다. 사용하는 것이 권장되지는 않는다.
• unknown - any와 비슷하지만, 이 타입으로 선언될 경우 해당 변수로 어떠한 연산도 수행 할 수 없다.
• void - 다른 언어에서 쓰이는 void와 비슷하다.
• never - 함수에서 타입을 추론하는 'narrowing' 과정중에 절대 도달해서는 안되는 구간을 나타낼 때 사용한다.

 

 

타입 선언

ex) 

let myName: string: "Alice";

 

함수 선언

function [functionName]([argName]: [argType], ...): returnType{
 // do something
 }

 

인터페이스 선언

Interface Animal {
  name: String
}

 

Interface Bear extends Animal {
  honey: boolean
}

 

 

타입 선언(Struct 비슷한듯)

type Animal = {
  name: String
  age: number
}

type Bear = Animal & {
  honey: boolean
}

 

 

'!' 후위 연산자

뒤에 null이나 undefined가 나오는지 체크해준다.

ex)

console.log(x!.toFixed());

 

 

'?' 속성

선택적으로 나올 수 있는 변수를 표기한다.

ex)

function printName(obj: {first: string, last?: string}) {
  // ...
}

// Both OK
printName({first: "Bob"});
printName({first: "Alice", last: "Alisson"});

 

 

Union Type( | 연산자 )

여러가지 타입의 변수를 받을 수 있게 해준다.

ex)

function(id: number | string) {
  console.log("Your ID is: " + id)
}

// OK
printId(101);
// OK
print("202");
// Error
printId({myID: 22342})

 

 

generic

특정 원하는 '리턴'값을 나오게 해줄 수 있는 기능

ex)

function firstElement(arr: any[]) {
  return arr[0];
}

예를들어 위와같은 함수가 있을때

number값을 집어넣으면 number 타입으로 값이 리턴되기를 바랄 수 있겠지만, 리턴되는건 아쉽게도 any 타입이다.

 

이는 제네릭타입(<Type>)을 쓰면 해결된다.

function firstElement<Type>(arr: Type[]): Type | undefined {
  return arr[0];
}

// s의 타입은 string이다
const s = firstElemenet(["a", "b", "c"]);

// n의 타입은 number이다
const n = firstElement([1, 2, 3])

// u의 타입은 undefined이다.
const u = firstElement([]);

 

 

class - ES2015이상부터 지원, 자바스크립트에서도 사용 가능

class Point {
  x: number;
  y: number;
  
  constructor(x=0, y=0) {
    this.x = x;
    this.y = y;
  }
}

* 컴파일러에 -strictPropertyInitialization 옵션을 주면 생성자로만 필드를 초기화 하도록 할 수 있다.

 

Method/Getter/Setter

class Point {
  x=10;
  y=10;
  
  // 메소드 사용
  scale(n:number):void {
    this.x *= n;
    this.y *= n;
  }
  
  // setter
  set x(x:number) {
  	this.x = x;
  }
  
  
  // getter
  get x() {
    return this.x;
  }
}

 

인터페이스 구현

interface Pingable {
  ping(): void;
}

class Sonar implements Pingable {
  ping() {
    console.log("ping!")
  }
}

* 당연히 Sonar에서 ping을 override하지 않으면 에러가 난다.

 

상속

class Animal {
  move() {
    console.log("Moving along!")
  }
}

class Dog extends Animal {
  woof(times: number) {
    for(let i; i < times; i++) {
      console.log("woof!");
    }
  }
}

 

접근 제어자

class Base {
  private x = 0;
  public sameAs(other: A) {
    return other.x === this.x;
  }
}

* 이외에 protected도 지원한다.

 

static

class Myclass {
  private static x = 0;
  
  static getGreeting() {
    return "hello world"
  }
}

* static class는 제공하지 않는다.

 

이외에도 추상 메소드나 추상 클래스등 여러 기능을 제공한다.

 

 

그 외에 주의해야 할 점이나 여러 메소드들을 공식 홈페이지의 핸드북에서 찾아 볼 수 있다.

https://www.typescriptlang.org/docs/handbook/intro.html

Handbook - The TypeScript Handbook

---

 

패키지 설정 방법

 

타입스크립트의 컴파일등의 옵션등의 설정을 일일히 지정해주기 귀찮기에 패키지를 설정하며 같이 값을 설정해 줄 수 있다.

 

설정 방법은 간단하다.

그냥 패키지 폴더에 'tsconfig.json' 파일을 만들고 거기에 설정값들을 집어넣으면 된다.

그럼 tsconfig.json이 있는 위치가 타입스크립트 프로젝트의 루트 디렉토리로 지정된다.

 

tsconfig를 지정 한 후 다른 옵션을 지정하지 않고 tsc 명령어를 쓰면 패키지가 실행된다.

tsc

 

 

컴파일러 옵션은 다음과 같이 지정하면 된다.

 

 

이제 대략적인 타입스크립트 문법도 알았으니

타입스크립트로 리액트 짜는 법을 좀 알아보고 

빠르게 프로토타입을 만들어볼 예정이다.

 

 

 

---

Reference

https://www.typescriptlang.org/docs/handbook/intro.html

Handbook - The TypeScript Handbook

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Documentation - What is a tsconfig.json