Today What I Learned

Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다.
오늘은 Typescript 기초입니다.

지난 프로젝트 때 리액트 네이티브를 적용하느라 스펙에서 잠시 접어두었던 Typescript를 훑어 보았다. 뭐.. 정말 내용이 많았지만 일단 공식문서 + poiemaweb + 노마드코더 typechain을 보고 따라하면서 배운 내용을 다시 한 번 글로 정리해본다.

1. What is Typescript?

• TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• 공식문서에 들어가면 보이는 정의이다. superset이 뭐였더라... 사전을 찾아보니 수학 용어로 '상위 집합' 정도 되는 것 같다.
• '타입스크립트는 플레인 자바스크립트 형태로 컴파일 가능한, 타입을 지정할 수 있는 자바스크립트의 상위 집합이다.'로 나는 해석했다.
  그러니까 자바스크립트보다는 상위 격의 언어이므로 자바스크립트에서 제공하는 내용은 기본 사용이 가능하고 그 밖의 기능도 자바스크립트로 컴파일 가능한 것이다. 자바스크립트와의 가장 큰 차이는 타입 지정 유무가 되겠다.

2. Why you use Typescript?

• 자바스크립트는 초창기 웹페이지의 보조적인 기능을 수행하기 위해 만들어진 언어였다. HTML5 등장과 함께 자바스크립트는 그 영역을 넓히며 ajax를 적극 사용하며 웹브라우저뿐 아니라 node.js라는 런타임을 가질 정도로 확장되었다.

• 현재 자바스크립트는 막 태어났을 때 고려했던 범주보다 더 크게 활용되다보니 자바스크립트의 언어적 특징이 장단점으로 드러나게 되었다. 자바스크립트는 자바나 C와 달리 그 타입이 유연한데 이것이 자바스크립트를 사용하는 매력적인 이유이기도 하고, 의도치 않은 버그를 불러오는 무시못할 단점이기도 하다.

• 동적 타입핑 vs 정적 타입핑

  • 자바나 C 언어는 변수 선언 시 저장할 값의 타입을 미리 지정해주는 '정적 타입핑' 방식을 채택하여 사전에 지정한 타입을 명시한다. 만약 사전에 지정한 타입이 아닌 다른 타입이 변수에 할당된다면 에러로 잡힌다.
  • 자바스크립트는 C-family언어 계열과 달리 '동적 타입핑' 방식을 채택한다. 예를 들어, 1+1와 같은 숫자의 합을 구하는 함수의 파라미터로 문자열 a와 문자열 b를 넣으면 문자열 ab로 리턴을 해준다. 변수 선언 시 별도 타입을 지정해주지 않고, 할당되는 형태에 따라 유연하게 대응하는 것이다.

• 자바스크립트의 동적 타이핑 특징은 개발 시 의도치 않은 결과를 만들 수도 있다.
  실제 내가 진행했던 React 프로젝트에서 메시지 당 댓글 개수를 담는 배열 state가 있었는데 서버에서 response를 가공해서 넣는 과정에서 숫자가 아닌 다른 문자열이 들어가면서 렌더에 문제를 일으켰던 적이 있다. 만약 사전에 해당 state는 숫자만 담는 배열이라고 타입을 지정해두었다면 렌더 단계에서 오류를 마주하는 것이 아니라 setState하는 순간 에러를 캐치해서 에러를 고칠 수 있었을 것이다.

• 타입스크립트는 자바스크립트가 가진 동적 타입핑 대신 '정적 타입핑'을 가능하게 해준다. 따라서 위에서 언급한 에러를 타입스크립트를 통해 해결할 수 있다.

• 그 뿐 아니라 타입스크립트가 제공하는 IDE 관련 지원이나 객체지향 프로그래밍에 가깝게 개발을 할 수 있다는 장점이 있다고 하는데 실제 프로젝트로 타입스크립트를 써보면 알 수 있을 것 같다.

3. Basic concepts

1. 설치와 config 설정

• 글로벌로 설치 : sudo npm i - g typescript
• 파일 이름을 .js에서 .ts로 바꾼 뒤 코드를 작성한다.
• 트랜스파일링을 하고자 할 때 터미널에서 : tsc <파일이름>
• 트랜스파일링 시 ES버전을 바꾸려면 터미널에서 : tsc <파일이름> -t <ES버전>
• node에서 express를 돌리면서 코드 변경을 감지할 수 있도록 nodemon을 까는데 이처럼 typescript도 tsc-watch라는 모듈을 npm으로 설치하면 코드 변동 시마다 트랜스파일링을 진행해서 node 터미널 창으로 확인 할 수 있다.
• tsconfig.json : 타입스크립트와 관련된 설정을 할 수 있다.
  • compilerOptions : 컴파일 시 설정
    • module: 어떤 모듈의 형식을 사용할 것인지, commonjs나 es2015 등 기입 가능
    • target : 어떤 버전으로 컴파일할 것인지, 보통 es2015로 많이 지정함
    • outDir : 컴파일한 파일을 담을 파일 위치 지정, ex) dist
  • include : 컴파일을 포함할 파일들을 배열에 담아서 표기
  • exclude : 컴파일 하지 않을 파일들을 배열에 담아서 표기 ex) ["node_modules"]
  • tsc init을 통해서 더 자세한 설정을 할 수 있다.

2. 정적 타이핑

• 타입스크립트에서는 변수에 할당될 타입을 미리 지정해준다.

  • boolean

    let isDone: boolean = false;

  • number

    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;

  • string

    let color: string = "blue";
    let myName: string = `Lee`; 
    let greeting: string = `Hello, my name is ${ myName }.`;

  • array : array에 직접 []를 지정해줄 수도 있고, 원형 Array<elemType> 형식으로 지정해줄 수도 있다.

    let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    let list1: any[] = [1, 'two', true];

  • tuple: tuple은 array처럼 요소를 가지지만 선언 당시에 요소의 길이가 정해져 있고 다양한 타입을 담을 수 있다.

    let tuple: [string, number];
    tuple = ['hello', 10]; // 정상 작동
    tuple = [10, 'hello']; // Error 발생
    tuple = ['hello', 10, 'world', 100]; // Error 발생
    tuple.push(true); // Error 발생

  • object

    const obj: object = {};

  • enum: 어떠한 집합에 숫자로 이름을 지정해서 사용하는 단축어 같은 형태이다. (신기)

    enum Color1 {Red, Green, Blue};
    let c1: Color1 = Color1.Green;
    console.log(c1); // 1
    enum Color2 {Red = 1, Green, Blue};
    let c2: Color2 = Color2.Green;
    console.log(c2); // 2
    enum Color3 {Red = 1, Green = 2, Blue = 4};
    let c3: Color3 = Color3.Blue;
    console.log(c3); // 4

  • any : 타입을 미리 지정할 수 없거나 타입 체크가 필요 없는 변수에 사용한다.

    let notSure: any = 4;
    notSure = 'maybe a string instead'; // 이 때는 string
    notSure = false; // 이 때는 boolean
    
    let list: any[] = [1, true, "free"];
    list[1] = 100; // 수정 가능

  • void : 아무런 타입도 가지지 않는 경우, 보통 함수 선언 시 리턴이 없을 때 타입으로 사용한다. 일반 변수에 void를 선언하면 undefined나 --strictNullChecks 모드일 때만 null을 할당할 수 있고 다른 타입은 할당이 어렵다.

    function warnUser(): void {
      console.log("This is my warning message");
    }
    let unusable: void = undefined;
    unusable = null; // `--strictNullChecks` 일 때만 가능 

• 너무 길어져서 Interface와 public, private, protected 값은 다음에 TIL에 남기는 것으로..