[새싹(SeSAC) 프론트엔드] day44 221215

 

인터페이스를 사용하는 이유

➡️ 타입이 객체인 '객체'를 생성할 때 코드마다 중복되는 객체 타입을 하나로 만들기 위해

 

 

타입별칭	인터페이스
코드마다 중복되는 타입을 하나로 만들어서 대입시켜주는 용도로 사용  - 코드의 재상용성 높임  작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공  자바스크립트 코드로 컴파일 되지 않음
	객체에서만 사용 가능

 

📍 이름규칙

- 첫 글자는 대문자로 표기 

- 인터페이스 이름 앞에 대문자 I 를 붙이지 않음 

 

interface 인터페이스이름 {
    속성이름 : 속성타입
}

inferface Person {
    name : string,
    age : number
}

➡️ 인터페이스는 객체에서만 사용할 수 있음 

 

 

*실습

  interface Language {
    name: string;
    level: number;
  }

  let p1: Language = {
    name: "react",
    level: 5,
  };
  
  
  //@@ 여기서부터 error
  let p2: Language = { name: "typescript" };
  let p3: Language = { level: 5 };
  let p4: Language = {};

  let p5: Language = {
    name: "javascript",
    level: 1,
    completed: true,
  };

interface 사용시 interface의 구조를 반드시 따라줘야 함 

 

 

📍 선택 속성

: 필수 속성이 아닌 경우 

- 속성 이름 뒤에 물음표(?) 기호를 붙임

interface 인터페이스이름 {
     속성이름 ? : 속성타입 
}

 

*실습

  interface Language {
    name: string;
    level?: number;
    completed?: boolean;
  }

  let p1: Language = {
    name: "react",
    level: 5,
  };

 

	타입 별칭	인터페이스
선언방식	type UserType = {     name : string;     age : number; }	interface UserInterface {     name : string;     age : number; }
구현	class User1 implements UserType { }	class User2 implements UserInterface { }
선언적 확장 (동일한 이름으로 재선언 시 자동으로 하나로 합쳐짐)	불가능  type AddType = UserType & { address : string };	가능 interface UserInterface {     address : string; }
상속		interface AddInterface extends UserInterface{      gender : string //AddInterface만 갖는 속성 } *상속이므로 UserInterface가 바뀌는 것이 아님

➡️ 객체에 한해서는 인터페이스가 타입별칭보다 성능이 좋음 

 

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Documentation - Everyday Types

 

 

 

📍 클래스

 

class 클래스이름{
    속성이름 : 속성타입
}

class Person { 
    name : string
    age : number
}

 

class Person {
    //속성 선언
	name : string; 
    age : number; 
    
    constructor (name : string, age : number) {
    	this.name = name;
        this.age = age;
    }
}

let p1: Person = new Person("soo", 20);

console.log(p1); //

 

 

 

📍 접근제한자 

: 속성 이름 앞에 접근 제한자를 붙일 수 있음 

public, private, protected

class Person {
    name : string;  //public 
    private age : number;
}

** 접근 제한자를 붙이지 않으면 public으로 적용됨 (생략가능) 

** private으로 만들 때 속성을 age가 아닌 '_age'로 작성해주는 사회적 합의 

 

 

protected

: private +@ 

: 상속받는 자식 객체에서는 protected에 접근 가능 

 

 

 

** interface에 함수도 작성할 수 있음 

interface NewInterface {
    name : string;
    age : number;
    함수()
    함수2()
}

class Person implements NewInterface {
    name : string ;
    age : number;
    함수 1 () { //실행문 작성}
}

함수 는 이름만 선언하고 내용은 작성하면 안됨 

 

* 인터페이스는 어떠한 속성이 있는지에 대한 규약

- 해당 속성을 생성해주지는 않음

- 따라서 클래스 내부에서 해당 속성을 정의해야 함 

 

 

📍추상화

- : 여러가지 사물/개념에서 공통되는 특성을 묶어 이름을 붙이는 것

- 공통된 메서드, 속성을 묶어 하나의 클래스로 생성 

 

📍추상클래스

➡️ 완전하게 구현되어 있지 않은 메서드(추상 메서드)를 갖는 클래스 

- 추상 클래스를 상속하는 클래스에서 추상 메서드를 구현해야 함

 

- 추상 클래스는 객체를 생성할 수 없음

: 메서드가 미완성이기 때문에 

 

- 목적  : 상속 계층에서 추상적인 개념을 나타내기 위해 사용

 

abstract class 클래스이름 {
    속성이름 : 속성타입
    abstract 메서드이름() {}
}

 

추상클래스는 일반 메서드를 가져도 되는데 반드시 추상메서드를 가져야 함

추상클래스 {
    일반메서드() {console.log("잠잔다")};
    일반메서드() {console.log("밥을 먹는다")};
    추상메서드1() {}
    추상메서드2() {}
}

 

 

 

** 리액트가 아닌 환경에서 Typescript 사용하기 

.ts 파일을 작성해주고 그 파일을 js로 컴파일 

$ tsc 파일이름.ts

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅(수)