[TS] 타입스크립트란?

✅ TS = JS + Type 

(* TS는 개발자만의 타입을 작성할 수 있게 해줌)

JS는 몇가지 데이터 타입을 갖고 있는데, TS는 더 많은 타입을 지님

 

TS를 사용하면 타입을 이용하면서 명시적이고 예상하지 못한 에러를 미리 보여주어 런타임시 에러를 피할 수 있다.

TS 코드를 작성한 후에 컴파일하여 JS코드로 변환하여 사용해야한다.

 

+a) JS

input요소의 value속성은 문자열으로 반환된다.

 

✅ JS 타입과 TS 타입의 공통점

number	1, 2.3, -9	Allnumbers, no differentiation between integers or floats 다른 프로그래밍언어들에는 특별한 정수형과 실수형 또는 이중형이 있지만, JS와 TS에는 number타입 하나만 존재
string	'im', "im", `im`	All text values 백틱을 사용하여 일부 데이터를 동적으로 주입할 수 있는 "템플릿 리터럴"을 작성할 수 있음
boolean	true, false	just these two, no "truthy" or "falsy" values 참 같은 값과 거짓 같은 값의 개념은 자바스크립트가 if조건문에서 특정값을 확인할 때 런타임에서 백그라운드 작동하는 데이터 타입과는 관련이 없다 예를들어 if문에서 0을 사용하면 falsy가 false로 처리됨

+a) JS_truthy, falsy

falsy한 값들을 외우고 그 이외의 것은 truthy로 보면 된다.

0(숫자0), -0(음수0), ""(빈string), null, undefined, NaN, 0n(Bigint, boolean으로 사용될 경우 숫자와 같은 규칙을 따름)

truthy, falsy가 true, false로 평가되는 성질때문에 falsy간의 비교시 동등 연산자(==)로 비교가 가능할것 같지만, falsy간의 비교는 예외상황이 발생할 가능성이 있기에 일치연산자(===)를 사용해서 비교하는것이 좋다.

//TS
function add(n1: number, n2: number) {
  return n1 + n2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);

//컴파일 후 JS
function add(n1, n2) {
    return n1 + n2;
}
var number1 = 5;
var number2 = 2.8;
var result = add(number1, number2);

---

object

{age:30}

Any JS object, more specific types (type of object) are possible 타입스크립트는 오브젝트를 항상 객체타입으로 처리한다 모든 자바스크립트 객체는 모두 객체타입이지만 타입스크립트에는 더 구체적인 객체도 있다

+a) 중첩된 개체 및 타입

물론 객체 타입은 중첩 객체에 대해서도 생성할 수 있습니다.

다음과 같은 자바스크립트 객체가 있다고 가정해 봅시다:

const product = {
  id: 'abc1',
  price: 12.99,
  tags: ['great-offer', 'hot-and-new'],
  details: {
    title: 'Red Carpet',
    description: 'A great carpet - almost brand-new!'
  }
}

이러한 객체의 타입은 아래와 같습니다.

{
  id: string;
  price: number;
  tags: string[];
  details: {
    title: string;
    description: string;
  }
}

따라서 객체 타입 안에 객체 타입이 있다고 말할 수 있습니다.

---

Array

[1,2,3]

Any JS array,type can be flexible or strict (regarding the element types) array는 JS에서 문자열 불리언 객체 배열과 함께 사용하여 데이터를 저장할 수 있다.(중첩배열을 입력, 데이터를 혼합할 수 있다)

any타입은 아주 유연하지만, 유연성은 모든 장점, 타입을 활용하지 못하게 할 수 있다.

배열은 객체와 객체가 지닌 속성과 같이 타입스크립트의 타입추론이 역동적인지 볼수있다.

✅ JS 타입과 TS 타입의 차이점

Tuple	[1, 2]	Added by TS : Fixed=length array *튜플 = 배열이지만 길이 뿐만아니라 타입도 고정된 배열
enum	enum {NEW, OLD}	Added by TS : Automaticallly enumerated global constant identifiers 열거목록을 제공(이 라벨들은 0부터 시작하는 숫자로 변환됨), 사용자지정이기에 uppercase로 작성해야함 예) enum Role { ADMIN, READ_ONLY, AUTHOR } 이런식으로 하면 ADMIN=0, READ_ONLY=1, AUTHOR=2로 인식되는데 여기서 다른 숫자로 인식하게 하고싶으면 enum Role { ADMIN = 5, READ_ONLY, AUTHOR } 이렇게 처음 숫자에 명시를하면  5,6,7로 인식된다. 또, 필요에 따라 임의의 숫자를 고유한값으로 직접 할당할수도 있다.enum Role { ADMIN = 5, READ_ONLY = 19, AUTHOR = 100 }  숫자도 할당할 수 있고 텍스트도 할당할수있고, 혼합으로 할당도 가능하다. 어떤것이든 할당가능하고 숫자가 증가하기 시작하는 기본값은 0이다. 이는 if검사에 활용하거나 타입 배정에 활용하는 등 백그라운드에서 매핑된 값이 있는 식별자가 필요할 때 강점이다.
Any	*	Any kind of value, no specific type assignment 타입스크립트에서 가장 유연한 타입 (모든 종류의 값을 저장할 수 있다) any타입을 사용하는 모든위치에서는 타입스크립트 컴파일러가 작동하지 않음 ~> 어떤 값이나 종류의 데이터가 어디에 저장될지 알수없는 경우에 대비하거나 런타임을 수행하는 경우에 사용하고, 가능한 쓰지 말기

 

✅ 정리

TS의 타입은 단지 개발을 히는동안(TS 코드를 JS로 컴파일되기 전) 도움을 준다

기본적으로 JS 코드로 컴파일을 차단하지 않고 문제에 대해 알려주며 지적을한다.

타입을 잘못 사용하고 있는지 확인하고 에러를 통해 알려주는 기능을 제공한다.

타입을 사용하면 개발하면서 오류를 미리 감지하고 일부 런타임오류를 방지한다

타입스크립트 타입은 컴파일 중에 확인되는 반면, 자바스크립트 타입은 런타임 중에 확인된다(typeof)

---

JS에 내장된 typeof연산자로 타입을 확인할 수 있다.

 

타입 관련하여 자바스크립트와 타입스크립트의 개발도중에 있는 차이점은

JS	동적타입 즉, 문자열을 할당할 때 처음 숫자형을 잡아둘 수 있는 변수가 있더라도 전혀 문제가 없다 특정타입에 의존하는 코드가 있는 경우 런타임에서 무언가의 현재타입을 확인할 수 있게 해주는 typeof연산자를 사용하는것이다
TS	정적타입 즉, 개발 도중에 끝나는 변수와 매개변수의 타입을 정의한다 런타임 중에 갑자기 변경되지는 않는다.

TS를 사용하면서 함수명에 매개변수:타입 이렇게 명시하고 함수 내부에 const,let으로 정의한 변수들은 왜 타입을 명시안하는 이유

- 타입추론이라는 내장기능을 활용하여 특정변수나 상수에 어떤타입을 사용했는지를 이해하는 기능

따라서 처음에 타입을 설정하지 않고 나중에 설정하여 값을 할당하는것과 같음

---

✅ lite-server

lite-server는 package.json파일옆에 항상 index.html 파일을 제공하는 간단한 개발서버이다.

웹 앱을 제공하고, 브라우저에서 열고, html 또는 javascript가 변경될 때 새로고침하고, 소켓을 사용하여 CSS 변경 사항을 주입하고, 경로를 찾을 수 없을 때 대체 페이지가 있는 경량 개발 전용 노드 서버