[TIL] Day44 - 타입스크립트 1

타입스크립트 = JS + 타입 체크

JS 의 복잡하고 코드관리의 단점을 해결 > 버그를 줄이고, 쉬운 유지봇, 좋은 퀄리티의 코드 생산

TS에서 JS 작성하면 동작하지만, JS에서 TS를 작성하면 동작하지 않는다.

function pluss(a:number,b:number){
    return a + b;
}
console.log(pluss(3,5));

만일 3,5가 문자열로 감싸졌다면 > JS : 35 / TS : Error

 

데이터 타입을 표기하면 좋은 점? TS > JS로 컴파일 > 웹

 

환경설정

cmd > `npm i -g typescript`

`tsc 파일명.ts` 타입스크립트 컴파일러 명령어 터미널에 치면, app.js 파일로 컴파일해서 생성한다.

ㄴ 자동 동기화 `tsc -w 파일명.ts`

 

tsconfig.json 설치 `tsc --init`

 

데이터 타입과 추론

JS 변수에는 어떠한 데이터타입이 들어와도 무관하다. 요구사항과 맞지 않는 데이터 값이 들어올경우 > 에러를 발생하는 기능이 없기에, TS 가 검증을 하는 역할을 한다.

즉 타입스크립트는, 첫 할당값을 기반으로 타입을 추론하는 , 정적타입이라고 판단하는 기능을 한다.

 

타입 추론 기능  Type Inference : 변수의 타입을 초기에 할당된 값을 바탕으로 자동으로 판단한다.

타입 추론이 모호한 경우 명시적으로 지정하는 것이 더 명확하다. 

 

키-값 객체도 자연스럽게 접근해서 타입을 지정한다.

• 기본 데이터 타입
  • number (정수 실수), string, boolean, null (의도적) , undefined (기본값)
• 객체 타입
  • object, array (Array 객체)
  • tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입 > 많이 안쓴다.
• 특수 타입
  • any : 어떠한 타입이든 할당될 수 있는 타입 == var
  • unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

 

타입 명시

변수 선언할때 변수 값의 타입을 명시함으로써 변수의 테이터타입을 지정한다.

`let x : string = 'hello';` > string이 아닌 다른 타입이 입력될때 에러!

//변수 데이터 타입 명시
let stdId: number = 1111;
let stdName: string = "dah";
let completed: boolean = false;

//함수 데이터 타입 명시 > 매개변수, 리턴 타입
function Plus(a: number, b: number): number {
  return a + b;
}

function getInfo(id: number): {
  stdId: number;
  stdName: string;
  completed: boolean;
} {
  return null;
}

 

리턴값이 없을때 void 타입으로 명시한다.

 

아래 타입 object 묶음을 interface 로 지정한다.

 

인터페이스 interface

//interface
//interface
interface Std {
  stdId: number;
  stdName?: string;
  completed?: boolean;
  setName(name: string): void;
  getName: () => void;
}

function getInfo(id: number): Std {
   return { stdId: id, stdName: "dah", completed: false };
}

interface에 정의된 모든 항목은, 인터페이스를 사용할때 전체를 사용해야 한다. 일부만 뺀다면 선언한 타입이 사용되지 않는다는 에러가 발생한다.

재사용 가능하다.

 

선택적 프로퍼티 Optional Property ?

 인터페이스나 타입 정의에서 특정 속성이 필수적으로 존재하지 않아도 되는 속성을 의미한다. 해당 속성이 있어도 되고, 없어도 됨을 의미한다. 함수, 매개변수에서도 적용할 수 있다.

`stdName?: string;`

 

상속 implements

class MyStudent implements Std {
  stdId: number = 1111;
  stdName: string = "dah";
  completed: boolean = false;

  setName(name: string): void {
    this.stdName = name;
    console.log("이름설정 : " + this.stdName);
  }
}

const myInstance = new MyStudent();
myInstance.setName("닿");

 

클래스에서 인터페이스 값 할당하고, 객체 생성해서 값 재할당할 수 있다.

---

결국, 인터페이스는 코드에 더 많은 정보를 제공하기 위해 사용한다.

데이터 타입으로 사용하고, 선택적 프로퍼티 Optional Property 속성값 뒤에 ?를 붙인다.

메소드도 인터페이스 내에서 선언할 수 있고, 인터페이스를 클래스에 상속할 수 있다.

extends 확장이 아닌 구현 implement 라고 할 수 있다

 

열거형 Enum vs 리터럴 Literal

사용자 정의 타입. 연관된 항목들을 묶은거

//열거형 enum
enum GenderType {
  Male,
  Female,
}

//interface
interface Std {
  stdId: number;
  stdName?: string;
  gender?: GenderType;
  completed?: boolean;
  setName(name: string): void;
}

//...
gender?: GenderType.Female;
//...

JS에서 컴파일 되어서 사용 가능하다

//열거형 enum
var GenderType;
(function (GenderType) {
    GenderType[GenderType["Male"] = 0] = "Male";
    GenderType[GenderType["Female"] = 1] = "Female";
})(GenderType || (GenderType = {}));

순차적  idx 값을 js 에서 반영해주는 스타일. > 숫자 열거형

 

숫자 할당대신, 문자열 할당할 수 있다.

enum Menu {
  Home = 'home',
  Pin = 'pin',
  Vote = 'vote',
  Clock = 'clock',
}

 

📝 타입스크립트 개요 정리

타입스크립트는 자바스크립트에 타입 선언하는것을 추가한 것이다.

따라서 타입스크립트 파일에서 자바스크립트를 작성하면 동작하지만, 자바스크립트 파일에 타입스크립트를 작성하면 동작하지 않는다.

tsconfig.json 파일에서 타입스크립트 환경헐정을 할 수 있다. `tsc --init` 으로 해당파일 설치할 수 있다.

 

첫 할당값을 기반으로 타입을 추론하는 기능 Type Inference 가 있지만, 명시적으로 지정하는 것이 정확하다.

기본 데이터 number, string, boolean, null, undefined 객체 타입 object, array 특수 타입 any, unknown

단, 함수 타입 지정에서 > 리턴값이 없을때는 void 타입으로 명시한다.

 

interface 인터페이스에서 데이터타입을 묶어서 정의할 수 있다.

단, 인터페이스를 사용할대는 일부만 사용하거나 뺄 수 없이, 전체를 사용해야 한다.

 

선택적 프로퍼티 Optional Property `?` 특정 속성이 있어도 되그 없어도 됨을 의미한다. 함수와 매개변수에서도 적용할 수 있다. 매개변수에서는 뒤에 이어오는 변수에도 필수로 적용해야 한다.

 

상속 `implements` 구현 > extends 확장이 아니다. 인터페이스를 클래스에 상속할 수 있다.

 

사용자 정의타입 열거형 Enum VS 리터럴 Literal type 타입 차이점

Enum 열거형	Literal 객체 리터럴
타입스크립트에서만 지원하며, 상수를 논리적으로 그룹화 한다.	자바스크립트의 기본 문법으로, 키-값 쌍의 구조를 가진다.
코드의 가독성을 높인다.	유연성이 높다
선언시에 정의된 값만 가질 수 있다.	키-값 쌍을 자유롭게 추가하거나 변경할 수 있다.
타입스크립트 O 자바스크립트 X	타입스크립트 O 자바스크립트 O
타입 안정성이 높다	타입 체킹 불가능. 타입 안정성이 낮다.

 

☑️ 배운 점

`tsc` 문법으로 vscode에서 타입스크립트 컴파일, 실행하는 방법

interface, Optional Property, implement, Enum 설명하고, 사용해서 좋았다. 프로젝트에 적용해봐야지!