내일 배움 캠프 23_07_25 TIL

오늘은 TypeScript에 대해서 이론과 간단한 프로젝트 설정 및 기본 코드에 대해서 배웠는데

TypeScript는 JavaScript의 약점을 보완하려 나온 플랫폼인데

 

자바 스크립의 약점으로는
1. 실행 시간에 결정되는 변수 타입
-JavaScript는 변수의 타입이 실행 시간에 결정된다
-이에 따라 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다롭ㄴ다
-변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행 시간에 변수의 값과 타입을 모두 확인해야해서 번거롭다

2.약한 타입 체크
-JavaScript는 let, const 와 같이 변수/ 상수를 구분하는 정도의 키워드만 제공됨
-예를 들면, let a = 1, a = "Hello"; 가 얼마든지 가능하고 이렇게 되면 예상하지 못하는 동작이
발생할 수 있음 

3.물렁한 객체
 const obj = { latitude: 11.5, longitude: 47.1 };
const result = obj.latitude * obj.longitute;  
console.log(result)

 

여기서 const result = obj.latitude * obj.longitute; 이 부분에 오타를 넣어도  
그냥 없는 속성이라고 치부해버리고 결과가 나와서 Not a Number 값이 들어감

 

이런 약점을 보안하기 위해서 TypeScript가 세상에 등장했다

Microsoft에서 개발한 오픈 소스 프로그래밍 언어이고
JavaScript의 단점을 상쇄하기 위해 나타났으며

 

TypeScript에서는 기존 JavaScript에 실행 시간에 결정되던 변수 타입을
컴파일 시간에 변수의 타입을 체크 TypeScript에서는 VS코드에서 바로 오류를 검출해줌


 const obj = { latitude: 11.5, longitude: 47.1 };
const result = obj.latitude * obj.longitute;  
console.log(result)

여기서 const result = obj.latitude * obj.longitute; 이 부분에 오타를 넣어도  
그냥 없는 속성이라고 치부해버리고 결과가 나와서 Not a Number 값이 들어감
이러한 오류도 없는 프로퍼티라고 메세지를 알려주어 체크를 할 수 있다 

자바에서의 클래스 객체는
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  growOlder() {
    this.age += 1;
  }
}

 

const spartan = new Person('Spartan', 30);
spartan.age = 25; // 외부에서 age 속성을 마음대로 조작할 수 있어요! 뜻밖에 회춘?
spartan.growOlder();
console.log(spartan.age); // 결국 1살을 더 먹었지만 르탄이는 26세

이렇게 외부에서 객체 속성에 마음대로 접근이 가능해서 값을 조작할 수 있다

반면 타입스크립트에서는 접근 제한자를 설정해서 해당 class 내에서만 조작할지
아니면 public이나 protected,default 처럼 공개적으로 혹은 자식 클래스에서만 혹은 같은 패키지 내에서만 
접근이 가능하도록 제한을 줄 수 있다 
class Person {
  private name: string;
  private age: number; // age가 private인 것을 주목하세요!

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public growOlder(): void {
    this.age += 1;
  }
}

const spartan = new Person('Spartan', 30);
spartan.age = 25; // Error: Property 'age' is private and only accessible within class 'Person'.
spartan.growOlder();
console.log(spartan.age); // Error: Property 'age' is private and only accessible within class 'Person'.

그래서 Private 으로 설정되어 있어서 외부에서는 접근이 불가능하다


컴파일러란 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 도구이다
이를 통해 개발자가 작성한 코드에 오류가 없는지 알 수 있다.
--------------------------------------------------------------------------------------------------------
자바스크립트 라이브러리를 타입스크립트 프로젝트에서 사용하기

1. npm init -y 으로 프로젝트 생성

2. tsc --init 명령어로 TypeScript 프로젝트로 변환

3.tsconfig.json을 열어서 
"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부
이 두가지를 true로 설정

4.TypeScript에서 사용하고 싶은 커스텀 JavaScript 라이브러리(test.js)를 만듭니다.
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
  return a + b;
}

[1] 위의 주석문은 **JSDoc**이라고 해요!
[2] JSDoc은 API의 시그니처 (인자, 리턴 타입)를 설명하는 HTML 문서 생성기에요!
[3] **JSDoc으로 자바스크립트 소스코드에 타입 힌트를 제공할 수 있어요!**

5. 이제, JSDoc으로 타입 힌트가 제공된 test.js의 .d.ts 파일을 만듭니다. 
다음의 명령어를 **복사 + 붙여넣기**를 해서 터미널에서 실행해주세요!

npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types

6.types/test.d.ts 파일을 확인하면 다음과 같이 생성이 되어 있습니다!

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a: number, b: number): number;

7.test.js 파일을 참조할 foo.ts 파일을 새로 만든다

import { add } from "./test";
console.log(add(1, 2));

8.이제 foo.ts 파일을 실행시켜 보겠습니다! 
다음의 명령어를 복사 + 붙여넣기를 해서 터미널에서 실행해주세요! 
실행하면 3이라는 숫자가 뜨며 정상적으로 실행이 됨을 확인 할 수 있어요!

npx ts-node foo.ts

************************맨날 할 프로젝트 세팅 방법

npm init -y으로 패키지.json파일 생성
tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

코드로 tsconfig.json 생성

"scripts": {
    "start": "tsc && node ./dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean"
},
이 코드로 package.json의 scripts 항목을 위의 코드로 변경 (TypeScript 프로젝트 실행을 편하게 하고자)

그 다음 루트 프로젝트의 루트 디렉토리에서
src 폴더를 생성

그럼 기본세팅은 끝!

파일다 작성 후 빌드할 땐
npm run build로 빌드하면된다


DOM의 단점으로는 실제 DOM을 조작할 시 브라우저 리플로우와 리페인트가 발생하여
화면이 지연되거나 깜빡이는 현상이 발생할 수 있다