Typescript_스터디 8일차 (23/02/13)

yhwa·2023년 2월 12일
0
post-thumbnail

📝 Typescript로 블록체인 만들기 : From #1.5 to #2.1

JS로 divide 함수를 작성하고, 타입스크립트를 사용하는 이유를 이해합니다.

🎯 목표기능 (function divide)

divide함수는 a,b 2개의 인자(argument)를 가지며, a/b의 결과값을 return합니다.

⛳️ JS의 단점, Typescript의 주요기능 그리고 필요한 이유

- type의 허용 기준이 너무 유연한 기존 JS의 문제
자바스크립트는 데이터 타입 안정성을 지켜주지 못하고, 런타임 에러를 자주 발생시킵니다.

- type구분을 주요 기능으로 가지고 있는 TS
타입스크립트는 강타입(strong-typed) 프로그래밍 언어로서, type을 구분하는 기능에 가장 특화되어있습니다. 

- JS는 넘겨받는 인자가 숫자인지, 필수 입력값인지, 선택사항인지 전혀 고려하지 않습니다.
에러가 나지 않기위해서는 컴퓨터에게 데이터에 대한 더 자세한 규칙 설명이 필요합니다.(=TS가 필요한 이유)

🚨 가장 일반적인 JS 에러

1) 함수의 필수인자가 2개인데 1개만 받은경우
2) 받은 데이터의 타입이 적절하지 않은 경우

🚨 JS의 런타임 에러 (Runtime Error)

- 콘솔 안에서 일어나는 에러, 유저의 컴퓨터에서 코드가 실행될 때만 나타나는 에러를 말합니다.
- 자바스크립트는 사용자에게 해당 코드를 실행시켜야 에러를 발견할 수 있습니다.
- 코드를 실행하기 전에 에러를 발견하여 최소화 시켜야만합니다.
  ex) Rust나 Go와 같은 언어에서는 이러한 경우, 코드 실행 및 컴파일부터 불가합니다.

⛳️ Typescript의 동작원리

- 브라우저는 JS만을 이해합니다. (+Node.js 경우, JS와 TS를 모두 이해함)
TS는 컴파일 과정을 거쳐 JS로 변환됩니다.

👉 TS가 개발자를 실수로부터 보호하는 방법?

- TS코드가 JS로 변환되기 전에 발생하는데, 코드가 작성되면 일단 TS가 에러를 체크합니다.
- 에러가 발생할만한 코드를 감지하면, TS는 컴파일을 시작하지 않습니다.

... 이러한 TS의 동작들은 사용자의 코드가 시작되기 전, 코드가 작성된 직후에만 실행됩니다.
TS에서 JS으로 정상적으로 컴파일되어 사용자가 JS코드를 받았다면,
- 데이터가 TS의 type checker를 정상적으로 통과했으며, JS에도 버그가 존재하지 않는다는 뜻입니다.

⛳️ Typescript의 Type시스템

👉 변수를 지정할때 JS와 다른언어들의 차이점?

- JS : 변수를 작성하여 생성 > 끝
- C, C++, Java : 변수를 생성하고, 그 변수의 type까지 명시적으로 코드에 입력해야합니다.

👉 TS에서 데이터의 type을 정의하는 2가지 방법이 있습니다.

1) TS의 Type Checker를 통한 구체적 명시
- 데이터 타입을 명시적으로 작성하기 (최소한으로 사용하고 TS가 추론하게합니다)
ex) const value:boolean = true;
    const arr:number[] = [1, 2, 3]; 
2) TS의 타입추론 (Type Inference)
- TS에게 타입을 추론하도록 맡기기 ex) const value = 1;
- 예를들어, string으로 시작하여 number로 끝날 수 없습니다, 타입추론을 통해 TS가 에러로 판단합니다.
- 타입추론시, 코드의 형태가 기존 JS와 다르지 않습니다.
- TS에게 추론을 시키는 편이 코드가 간결해지고 가독성이 좋습니다.

👉 모든 종류의 타입을 포함하는, "any"

- undefined, boolean, number, string, object, array ... 
- 어떠한 type이라도 통과시킵니다, TS의 type check기능을 쓰지않고싶을때 사용합니다.

🙋‍♀️ 오늘의 생각

profile
📌 FE 공부 정리 공간입니다.

0개의 댓글