데브코스 TIL - Day 48

24년 1월 29일 강의를 들은 내용을 기록한 글입니다.

타입스크립트

자바스크립트 프로젝트가 커지면 코드 관리가 어렵고, 디버깅이 어려워진다는 단점이 있다. 이를 보완하기 위해 사용하는 것이 타입스크립트이다.

=> 자바스크립트 + 타입 체크

📘타입 체크?

• 자바스크립트에서는 변수의 데이터타입을 명확하게 알 수 없어서 안정성이 떨어진다.
• 타입스크립트는 변수의 데이터타입을 명시하기 때문에 자바스크립트보다 안정성이 높다.

■ 자바스크립트 vs 타입스크립트

두 수를 전달 인자로 받아 두 수를 더한 결과를 리턴하는 함수

// javascript
function plus(a, b) {
  return a + b;
}
console.log(plus(3, 5)); // 8
console.log(plus("3", "5")); // "35"

// typescript
function plus(a: number, b: number) {
  return a + b;
}

console.log(plus(3, 5)); // 8
console.log(plus("3", "5")); // Error!

📘타입스크립트를 사용하면 좋은점?

• 런타임 전, 컴파일 타임 때 오류를 체크할 수 있음
• 자바스크립트 기반보다 버그를 줄일 수 있음
• 유지보수가 쉽다
• 높은 퀄리티의 코드를 생산할 수 있음

타입스크립트 환경설정

• 타입스크립트 설치

npm install typescript --save-dev

• 타입스크립트 수동 컴파일

tsc 파일명

• 타입스크립트 자동 컴파일
  코드가 수정될 때마다 자동으로 컴파일 시키기

tsc 파일명 -w

• 타입스크립트 설정 파일 자동으로 설정하기 (tsconfig.json)

tsc --init

• 타입스크립트 설정 파일 수동으로 설정하기 (tsconfig.json)

루트 폴더에 tsconfig.json 파일을 생성하고, 설정 값 작성하기

타입스크립트 타입 추론

• 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단
• 타입스크립트는 초기화된 값을 바탕으로 선언된 타입을 추론함
  -> 만약 다른 타입이 할당되면 오류를 발생시킴
• 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋음

// javascript

let myname = "lee";
myname = 1;

// typescript

let myname = "lee";
myname = 1; // Error!
// Type 'number' is not assignable to type 'string'.(2322)
// let myname = string;

// typescript

const student = {
  name: "john",
  course: "typescript",
  score: 100,
  grade: function () {
    console.log("A");
  }
};

student.name = "lee";
student.score = "90"; // Error!
// Type 'string' is not assignable to type 'number'.(2322)
// (property) score: number

📘타입스크립트 타입 종류

• 기본 데이터

  • number
  • string
  • boolean
  • null: 의도적으로 값이 없음을 할당
  • undefined: 값이 없음 (기본값)

• 객체

  • object
  • array
  • tuple

• 특수

  • any: 어떠한 타입이든 할당
  • unknown: 타입을 미리 알 수 없는 경우

타입 명시

변수를 선언할 때 변수 값의 타입을 작성해서 변수의 타입을 지정

📘문법

const 변수: 타입 = "값";

function 함수명(param:param_타입):함수_반환(결과값)타입{
  // 함수 내용
}

■ 예시

const name: string = "김말숙";
const num: number = 123;
const complete: boolean = false;

function plus(a: number, b: number): number {
  return a + b;
}
const add = (a: number, b: number): number => a + b;

인터페이스

• 사용자 정의 타입
• 인터페이스를 클래스에 상속할 수 있음
• 옵셔널하게 지정할 수 있음, ?
• 메소드도 선언 가능 (인터페이스를 상속 받는 클래스는 반드시 메소드 오버라이딩을 해줘야 함)

interface IStudent {
  id: number;
  name: string;
  age: number;
  gender: string;
  course: string;
  complete: boolean;
}
const students: IStudent[] = [];

function createNewStudent(
  name: string,
  age: number,
  gender: string,
  course: string
): IStudent {
  const lastStudentId = !students.length
    ? null
    : students[students.length - 1].id;
  const newId = lastStudentId ? lastStudentId + 1 : 0;

  return {
    id: newId,
    name,
    age,
    gender,
    course,
    complete: false
  };
}

console.log(createNewStudent("김말숙", 20, "female", "typescript"));

// 결과값
{
  id: 0,
  name: '김말숙',
  age: 20,
  gender: 'female',
  course: 'typescript',
  complete: false
}

📘옵셔널 타입

:앞에 ?을 작성하면 옵셔널로 타입을 받아서 사용할 수 있음

interface IStudent {
  id: number;
  name: string;
  age?: number;
  gender: string;
  course: string;
  complete: boolean;
}

function getInfo(
  id: number,
  name: string,
  gender: string,
  course: string
): IStudent {
  return {
    id,
    name,
    gender,
    course,
    complete: false
  };
}
const student = getInfo(20, "공갈치", "male", "typescript");

function setInfo(student: IStudent): void {
  console.log(student);
}

setInfo(student);

// 결과값
{
  id: 20,
  name: '공갈치',
  gender: 'male',
  course: 'typescript',
  complete: false
}

📘메소드 정의

interface IStudent {
  id: number;
  name?: string;
  age?: number;
  gender?: string;
  course?: string;
  complete?: boolean;
  setName: (name: string) => void;
  getName: () => string;
}

class MyStudent implements IStudent {
  id = 00700;
  name = "제임스본드";
  age = 40;
  gender = "male";
  course = "node.js";
  complete = true;

  setName(name: string): void {
    this.name = name;
    console.log(`이름 설정: ${this.name}`);
  }
  getName() {
    return this.name;
  }
}

const myInstance = new MyStudent();
myInstance.setName("엘리스"); // 이름 설정: 엘리스
console.log(myInstance.getName()); // 엘리스

타입스크립트 enum

• 사용자정의 타입 (열거형)
• 코드의 가독성이 향상됨
• 오타를 방지할 수 있음

📘문법

enum 사용자정의이름 {
  값1,
  값2,
  값3
}

• 별도로 값을 지정하지 않으면 0부터 순차적으로 할당됨

enum GenderType {
  Male,
  Female
}

GenderType.Male: 0
GenderType.Female: 1

• 값을 지정할 수도 있음 (숫자, 문자 모두 가능)

enum ColorEnum {
  Red,
  Green,
  Blue = "Blue",
  Pink = 3
}

ColorEnum.Red: 0
ColorEnum.Green: 1
ColorEnum.Blue: "Blue"
ColorEnum.Pink: 3

📘예제

enum GenderType {
  Male = "male",
  Female = "female"
}

interface IStudent {
  id: number;
  name?: string;
  age?: number;
  gender?: GenderType;
  course?: string;
  complete?: boolean;
  setName: (name: string) => void;
  getName: () => string;
}

class MyStudent implements IStudent {
  id = 00700;
  name = "제임스본드";
  age = 40;
  gender = GenderType.Male;
  course = "node.js";
  complete = true;

  setName(name: string): void {
    this.name = name;
    console.log(`이름 설정: ${this.name}`);
  }
  getName() {
    return this.name;
  }
}