🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
TypeScript
01-소개

1. TypeScript란?

자바스크립트는 현재 3가지 종류가 있습니다.

  • ES5(ECMAScript 5) : 웹 브라우저에서 동작하는 표준 자바스크립트

  • ESNext : 2015년부터 매년 새로운 버전을 발표하는 모던 자바스크립트

    • ES5의 모든 문법을 포함
    • 자바스크립트의 공식 표준은 ECMAScript(줄여서 ES)
    • ES6 이후 버전을 통틀어ESNext라고 함

  • 타입스크립트(TypeScript) : ESNext에 타입(type) 기능을 추가한 것

    • ESNext의 모든 문법을 포함

    • 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로 2012년 말 처음 발표

      • Open-source Language이기에 모든 코드를 확인 가능
      • TS가 완전히 새로운 언어가 아니라 JS를 베이스로 하는 언어

    • 소프트웨어는 복잡해서 보통 여러 사람이 협력해 하나의 제품을 개발함

      • 그래서 커뮤니케이션이 중요
      • 개발자 A가 타입 관련해서 이상한 코드를 짜면, B가 오류의 원인을 찾기가 힘듬
      • TS를 이용하면 이런 타입 관련 문제를 해결할 수 있음

    • 따라서 대규모 소프트웨어를 개발할 때 JavaScript보다 TypeScript를 선호

    • 타입스크립트를 쓰는 이유는 크게 2가지

      • TYPE : 타입 에러를 받아볼 수 있음
      • OOP (Object-Oriented Programming, 객체지향 프로그래밍)
        • Encapsulation(캡슐화)
        • Abstraction(추상화)
        • Inheritance(상속성)
        • Polymorphism(다형성)

따라서 TS로 개발했더라도 타입 기능을 사용하지 않는다면 ESNext나 마찬가지입니다.

2. JS 문제점: 너무 관대함

JS는 다른 언어들에 비해 상대적으로 굉장히 너그러움

  • 따로 타입을 지정해 주지 않아도 알아서 인식
  • 호이스팅 등의 기능을 통해 선언과 초기화의 위치가 바뀌어도 문제 없이 동작

하지만 이런 관대함은 디버깅을 어렵게 한다는 단점이 존재합니다

1
function add(num1, num2) {

2
  console.log(num1 + num2)

3
}

4


5
add() // NaN

6
add(1) // NaN

7
add(1, 2) // 3

8
add(3, 4, 5) // 7

9
add('hello', 'world') // helloworld

위 예제 코드를 보면 원하는 동작은 세 번째에 위치한 add(1,2)인데, 나머지 요소들도 문제 없이 돌아갑니다.

  • 요소가 들어가있지 않으면 오류를 뿜는 것이 아니라 undefined로 처리
  • 추가로 들어간 데이터는 무시
1
function showItems(arr) {

2
  arr.forEach(item => {

3
    console.log(item)

4
  })

5
}

6


7
showItems([1, 2, 3]) // 1, 2, 3

8
showItems(1, 2, 3) // TypeError: arr.forEach is not a function

또 다른 예시를 보겠습니다.

  • 매개변수로 배열이 들어간 경우 정상적으로 작동
  • 1,2,3 처럼 number 형태가 들어간 경우 forEach를 사용할 수 없기 때문에 TypeError가 뜸

그런데 문제는 오류가 동작할 때 떴습니다. 개발자는 빨간 밑줄이 없고 정상적으로 서버가 작동하기 때문에 괜찮겠지 생각하지만 알고보니 오류가 발생한 것이죠.

  • JavaScript
    • 런타임에 타입이 결정되는 동적 언어
    • 그렇기 때문에 개발자가 실수하면 사용자는 고스란히 그 실수들을 볼 수 있음
  • TypeScript
    • 컴파일타임에 타입이 결정되는 정적 언어
    • 컴파일 오류를 해결하기 위해 상대적으로 오랜 시간이 걸리지만,
    • 해결해두면 동적 언어에 비해 안정적으로 동작할 수 있다는 장점이 존재

3. 트랜스파일(transpile)

  • 트랜스파일(transpile)
    • 어떤 프로그래밍 언어로 작성된 코드를 또 다른 프로그래밍 언어로 된 코드로 바꿔주는 프로그램
    • 텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 컴파일러(compiler)와 구분하기 위해 생긴 용어
  • ESNext는 바벨(Babel)이라는 트랜스파일러를 통해 ES5로 변환
  • TypeScript는 TSC(TypeScript compiler)라는 트랜스파일러를 통해 ES5로 변환

4. TS 개발 환경

타입스크립트 개발 환경은 Node.js 개발 환경과 똑같습니다.

  • 브라우저
  • Node.js
  • Visual Studio Code
    • VS Code에 TS 컴파일러가 내장되어 있다.
    • 내장된 컴파일러 버전은 VS Code가 업데이트되면 올라간다.
    • 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수 있음
1
npm i typescript -g # 타입스크립트 전역 설치

4.1 TS 트랜스파일과 실행

이제 hello.ts 파일에 다음 코드를 입력하고 Ctrl + S를 눌러 저장합니다.

1
// hello.ts

2
console.log('Hello world!')

그리고 터미널에서 다음 명령을 실행하면 hello.js 파일이 생기는 것을 확인할 수 있습니다.

1
$ tsc hello.ts

hello.ts가 TSC에 의해 트랜스파일되어 hello.js파일이 생성됩니다.

5. 트랜스파일러 설정

프로젝트 폴더에 tsconfig.json이라는 파일을 하나 생성하면, 여기엔 ts 파일들을 js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능합니다.

1
// tsconfig.json

2
{

3
  "compilerOptions": {

4
    // 신버전을 원하면 'es2015', 'es2016', 'es2017','es2018', 'esnext'

5
    "target": "es5", // 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분

6


7
    // import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳

8
    // - commonjs는 require 문법

9
    // - es2015, esnext는 import 문법을 사용

10
    "module": "commonjs",

11


12
    "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지

13
    "checkJs": true, // 일반 js 파일에서도 에러체크 여부

14
    "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'

15
    "declaration": true, // 컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)

16
    "outFile": "./", // 모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)

17
    "outDir": "./", // js파일 아웃풋 경로바꾸기

18
    "rootDir": "./", // 루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)

19
    "removeComments": true, // 컴파일시 주석제거

20


21
    "strict": true, // strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기

22
    "noImplicitAny": true, // any타입 금지 여부

23
    "strictNullChecks": true, // null, undefined 타입에 이상한 짓 할시 에러내기

24
    "strictFunctionTypes": true, // 함수파라미터 타입체크 강하게

25
    "strictPropertyInitialization": true, // class constructor 작성시 타입체크 강하게

26
    "noImplicitThis": true, // this 키워드가 any 타입일 경우 에러내기

27
    "alwaysStrict": true, // 자바스크립트 "use strict" 모드 켜기

28


29
    "noUnusedLocals": true, // 쓰지않는 지역변수 있으면 에러내기

30
    "noUnusedParameters": true, // 쓰지않는 파라미터 있으면 에러내기

31
    "noImplicitReturns": true, // 함수에서 return 빼먹으면 에러내기

32
    "noFallthroughCasesInSwitch": true // switch문 이상하면 에러내기

33
  }

34
}

6. TS 제공 타입 미리보기

  • Primitive Types : number, boolean, string, symbol, undefined, null
  • Object Types : functions, arrays, classes, objects
  • TS 추가 제공 타입
    • Any : 잘 알지 못하는 타입을 표현
      • 이 타입은 최대한 쓰지 않는게 좋음
    • Union : 변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용
    • Tuple : 배열 타입을 보다 특수한 형태로 사용
      • 지정된 형식에 따라 아이템 순서를 설 정
    • Enum : enumerated type(열거형)을 의미
      • 값들의 집합을 명명하고 이를 사용
      • 열거된 각 PrintMedia는 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작
    • Void : 데이터가 없는 경우 void가 사용
      • e.g. 함수가 값을 반환하지 않으면 반환 유형으로 void를 지정
      • any 와 반대의 의미
    • Never : 절대 발생하지 않을 값을 나타내는 새 Type never를 도입
      • 어떤 일이 절대 일어나지 않을 것이라고 확신할 때 사용
      • 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 리턴하거나 리턴 값을 절대로 내보내지 않음을 의미

💡 Void 와 Never의 차이

  • Void은 값으로 undefind 이나 null 값을 가질 수 있으며
  • Never는 어떠한 값도 가질 수 없음

Ref

JS 코테 12가지 로직02-기본타입