웹풀스택 일일정리

11주차-파트01: 타입스크립트, 데이터타입, 인터페이스, 열거형

ddodoi 2024. 10. 28. 21:19

CHAPTER 1. 타입스크립트

 

🌱타입스크립트는 왜 필요한가?

  • 자바스크립트 코드가 너무 지저분하다.
  • 코드의 스케일이 커지면서 코드 관리가 되지 않는다.

 

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

  • 자바스크립트 기반보다 버그를 줄일 수 있다.
  • 유지보수가 쉽다.
  • 강력한 높은 퀄리티의 코드를 생산할 수 있다.

 

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

타입스크립트 환경에 자바스크립트를 코딩하면 동작함. 반대는 동작 x

 

 

타입스크립트 --(컴파일)->자바스크립트 -->웹브라우저에서 해석

 

 

 

 

 

CHAPTER 2. 타입스크립트 설치

vs code 추가 다운 extentions: PRETTIER, ESLint

 

🌱타입스크립트 다운

node.js설치된 상태에서 cmd나 터미널 열어 다음 명령어 입력

npm install -g typescript

 

 

 

CHAPTER 3. 타입스크립트 실습

 

vscode에서 확장자가 .ts인 파일을 만들어준 후 타입스크립트로 함수를 작성해주었다. 이후 터미널에 다음 명령어를 치면 해당 타입스크립트 파일과 이름이 동일한 자바스크립트 파일이 생성된다.

 

타입스크립트 실행 명령어

tsc 실행할타입스크립트파일명

 

 

타입스크립트 설정값과 환경들 자동설정 명령어

tsc --init

 

 

ts파일 수정시 js파일에 자동반영되도록 하는 명령어

ts파일의 코드를 수정해도 js파일에 자동 반영되지 않아 원래는 개발자가 매번 컴파일을 해줘야 한다. 이러한 수고를 덜기 위해 한번만 입력하면 계속 자동으로 해당 ts파일을 컴파일 해주는 명령어를 입력해주자.

tsc -w 컴파일하고싶은타입스크립트파일

 

자바스크립트 실행 명령어

새로 생성된 js파일을 실행하고 싶다면 터미널에 

node 실행할자바스크립트파일명

 

 

 

 

 

ts파일과 js파일

 

 

 

 

CHAPTER 4. 데이터타입과 추론

 

타입스크립트의 특징은 자바스크립트 언어에 *정적 타입을 제공한다는 것이다.

 

*정적타이핑: 타입을 선언하고 타입에 선언된 값에 맞는 값만 할당되도록 한다.

 

js에서는 잡히지 않는 에러가 ts에서는 발생한다

 

 

타입 추론(Type inference)기능

  • 타입스크립트는 타입추론기능을 통해 변수의 타입을 자동으로 판단할 수 있다.
  • 타입스크립트는 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.
  • lete age = 30;에서 타입스크립트는 age변수의 타입을 자동으로 number로 추론한다.
  • 타입추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.

 

 

✔️데이터타입의 종류

1. 기본데이터 타입

- number : 숫자타입으로 정수와 실수 포함

- string : 문자열 타입

- boolean : 참, 거짓 나타내는 불리언 타입

- null : 값이 없음을 개발자가 의도적으로 나타내는 타입(능동적)

- undefined : 값이 할당되지 않는 변수의 기본값인 타입(수동적)

 

2. 객체 타입

- object : 객체를 나타내는 타입

- array : 동일한 타입의 요소를 가진 배열을 나타내는 타입

- tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입

 

3. 특수 타입

- any : 어떠한 타입이든 할당될 수 있는 타입

- unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

 

 

 

✔️변수 타입명시

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

 

let x: string = "문자열";

 

 

✔️함수 타입명시

function 함수명(매개변수 : 매개변수타입) : 함수반환타입{
    //함수코드작성
}

 

 

 

 

 

 

CHAPTER 5. 인터페이스

✔️인터페이스

  • 사용자 정의 타입
  • 인터페이스는 'string'이나 'number'타입처럼 데이터 타입으로 사용가능
  • 선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여준다.
  • 메소드로 인스턴스 내에서 선언 가능 -> 메소드 오버라이딩
  • 인터페이스를 클래스에 상속할 수 있다.

 

타입스크립트에서 인터페이스 예시

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

class Mystudent implements Student{   //인터페이스를 클래스에서 상속
    stdId : 98989;
    stdName : 'lee';
    age? : 20;
    gender : 'male';
    course : 'Typescript';
    completed : false;

    setName(name : string) : void { //오버라이딩
        this.stdName = name;
        console.log("이름: "+ this.stdName);
    }
}

const myInstance = new Mystudent();
myInstance.setName("Alice");

 

 

 

 

 

CHAPTER 6. 열거형 

 

//열거형 : 사용자 정의 타입
enum GenderType{
    Male,
    Female
}

interface Student{
    stdId : number;
    stdName : string;
    age? : number;
    gender? : GenderType;
    course? : string;
    completed : boolean;
    //setName(name : string) : void;
    setName? : (name : string) => void;
    getName? : () => string;
}

class Mystudent implements Student{   //인터페이스를 클래스에서 상속
    stdId : 98989;
    stdName : 'lee';
    age? : 20;
    gender : GenderType.Male;
    course : 'Typescript';
    completed : false;

    setName(name : string) : void { //오버라이딩
        this.stdName = name;
        console.log("이름: "+ this.stdName);
    }
}

 

 

js파일에서 자동적으로 숫자가 할당된걸 볼수있다.

js파일로 컴파일링된 열거형

 

 

 

 

타입스크립트에서 개발자가 문자열로 직접 값을 할당해줄수도 있다.

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

js파일로 컴파일링된 열거형