인터페이스와 타입 별칭(타입알리아스)

6333 단어 typescripttypescript
  • 타입알리아스 (type 별칭 = 값)

  1. typescript의 기본은 아래처럼 쓰지만
    const dayofWeek: '월'|'화'|'수'|'목'|'금'|'토'|'일'; = '월'
    타입 알리아스를 쓰면 미리 타입을 정해주고 쓸 수 있다. (리터럴 유니온)
    type Dayofweek = '월'|'화'|'수'|'목'|'금'|'토'|'일';
    const dayofWeek : Dayofweek = '월'
    type은 type으로 기술된 것들이 [컴파일 타임]에 이 값이 들어가는지 안들어갔는지 검사하는용도
  2. enum은 특정값으로 제한하는 기능은 유사하지만 실제 데이터이다.
    [런타임]에 월화수목 이런값이 실제로 들어간다. 문자열이 아니라 실제 지정된 인덱스

    enum DayofTheWeek {'월','화','수','목','금','토','일';}
  3. 나머지 타입 설정법
type Name = string;
type Email = string;
type Foofunction = () => string; // 인자() 함수가 리턴값을 string 타입을갖는다는 뜻
<br>
const foo : Foofunction = function () { 
	return '아무 기능없는 함수입니다.'
}	
  • 인터페이스 (interface 객체)

  1. 타입알리아스를 가져다가 쓸 수있다.
    아래코드는 IUser라는 객체 데이터를 만들면 이런모양으로 만들어야 되라고 말하는 것 => 객체의 규격을 만든다고 생각
export interface IUser {
	readonly id: number;
    	readnoly name : Name ;  // 위에 타입알리스로 지정해준것 사용
        eamil : string;  // 일반형
        receiveInfo: boolean;
        active : YesOrNo;
        address? : string; // 이렇게 ? 표가 붙어있으면 옵션사항
}

이걸 다른파일에 가서 사용할때 import * as allTypes from './tpye'; 으로 가져온다면

const IUser: allTypes.IUser = { // 객체속성 불러오듯 allType.IUser불러옴
	id : 1,
    	name : '빌게이츠'.
        eamil : [email protected];
        receiveInfo: false;
        active : Y;
}
  1. 아래를보면 타입알리아스로 만든 IUser가있다. 타입알리아스(type)로 쓰면 =이 있고 없고 차이빼고는 똑같다. 타입알리스로 만들어도 타입알리아스, 일반형 다 쓸수있다.
    이렇게 똑같기 때문에 interface와 type을 쓸때 차이점을 가지고 기준을 만들어서 사용하는 것이좋다.
export type TUser =  { // 옆에 = 이있음
	readonly id: number;
    	readnoly name : Name ;  // 위에 타입알리스로 지정해준것 사용
        eamil : string; // 일반형
        receiveInfo: boolean;
        active : YesOrNo;
        address? : string; // 이렇게 ? 표가 붙어있으면 옵션사항
  • 타입알리아스, 인터페이스 확장법 (상속)

  1. 타입알리아스 (intersection)
    TUserprofiles를 만들고 = { 사이에 IUser & 넣어주면 확장된것이다. 재밌는건 IUser는 인터페이스로 만든것이지만 타입알리아스로 만들어진 것에 쓸 수 있다.
export type TUserprofiles = IUser & {
	profileImgae : string;
   	github? : stirng;
   	twitter? : string;
  1. 인터페이스 (extends)
    IUserprofiles를 만들고 extends를 쓰고 확장할 것을 써준다. 여기도 재밌는건 TUser는 타입알리아스로 만들어졌는데 인터페이스로 만들어진 것에 쓸 수 있다.
export type IUserprofiles extends TUser {
	profileImgae : string;
   	github? : stirng;
 	twitter? : string;
  1. 여러개를 합칠 수 있다. Color, Display, Geometry 가 있다고 가정하고
  • 타입알리아스
export type TStyle = Color & Display, Geometry {
	tagName : string;
}
  • 인터페이스
export interpace IStyle extends Color,Display,Geometry {
	tagNmae : string;
}
  • 하나의 속성 값으로만 지정 할 수도있다.

  1. 타입알리아스
export type IonlyBooleanValueObject = {
	[prop:string] : boolean;
} // 여기서 prop는 속성을 나타내는 건데 prop라고 안쓰고 아무거나로 써도된다함.
  1. 인터페이스
export interpace IonlyNumberValueObject {
	[key:string] : number;
} // 여기서 key는 속성을 나타내는 건데 key라고 안쓰고 아무거나로 써도된다함.
  • 함수 자체도 규격을 만들 수 있다.

  1. 타입알리아스
export type TGetApi = {
    (url : string, serch? : string;) : Promise<string>;
} // ( )는 인자 값이고, : 뒤에 Promise는 리턴 값이다.
  1. 인터페이스
export ingerface IGetApi {
    (url : string, serch? : string;) : Promise<string>;
} // ( )는 인자 값이고, : 뒤에 Promise는 리턴 값이다.
  1. 이 규격을 가지고와서 쓸때는 정의문이아니라 표현식으로 나타내 줘야한다.
    아래 참고
const getApi : allTypes.IGetApi  = (url,serch = '') => {
return new Promise(resolve => resolve('ok'));
  • Class에도 사용할 수 있다.

export interface IRect{
	 id: number;
	 x : number;
   	 y : number;
   	 width: number;
   	 height: number;   
 } 
export interface IRectConstructor{
	new (x: number, y: number, width: number, height: number) : IRect;
} // 생성자의 규격을 기술함. new연사자는 생성자를 호출할때를 나타내고 
: IRect는 반환값을 나타냄

위에 선언한 2개를 사용할 때는 아래와 같이 사용

class Rect implements allTypes.IRect {
	id: number;
	 x : number;
   	 y : number;
   	 width: number;
   	 height: number;
    <br>
     constructor(x: number, y: number, width: number, height: number)
     this.id = Math.randon() * 100000;
     this.x = x;
     this.y = y;
     this.width = width;
     this.height = height;     
}

여기서 class는 설계도기 때문에 생성자를 만드는 규격인 IRectConstructor을 사용할 필요가없다.

const rect1 = new Rect(0, 0, 100, 20); //이런식으로 사용하니까

그치만 클래스를 넘겨주는 변수를 사용할 때 아래와같이 사용한다. 알아두고 나중에 쓸일 있을 때 다시 공부하고 쓰자.

function createDefaultRect(cstor: allType.IRectConstructor){
	return new cstro(0,0,100,20);	
}
const rect2 = creatDefaultRect(Rect);

데이터를 표현할 때는 타입알리아스

클래스, 메소드, 데이터를 포괄하는 객체를 디자인할때는 인터페이스 사용

좋은 웹페이지 즐겨찾기