인터페이스와 타입 별칭(타입알리아스)
6333 단어 typescripttypescript
타입알리아스 (type 별칭 = 값)
- typescript의 기본은 아래처럼 쓰지만
const dayofWeek: '월'|'화'|'수'|'목'|'금'|'토'|'일'; = '월'
타입 알리아스를 쓰면 미리 타입을 정해주고 쓸 수 있다. (리터럴 유니온)
type Dayofweek = '월'|'화'|'수'|'목'|'금'|'토'|'일';
const dayofWeek : Dayofweek = '월'
type은 type으로 기술된 것들이 [컴파일 타임]에 이 값이 들어가는지 안들어갔는지 검사하는용도- enum은 특정값으로 제한하는 기능은 유사하지만 실제 데이터이다.
[런타임]에 월화수목 이런값이 실제로 들어간다. 문자열이 아니라 실제 지정된 인덱스
enum DayofTheWeek {'월','화','수','목','금','토','일';}
- 나머지 타입 설정법
type Name = string; type Email = string; type Foofunction = () => string; // 인자() 함수가 리턴값을 string 타입을갖는다는 뜻 <br> const foo : Foofunction = function () { return '아무 기능없는 함수입니다.' }
인터페이스 (interface 객체)
- 타입알리아스를 가져다가 쓸 수있다.
아래코드는 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; }
- 아래를보면 타입알리아스로 만든 IUser가있다. 타입알리아스(type)로 쓰면 =이 있고 없고 차이빼고는 똑같다. 타입알리스로 만들어도 타입알리아스, 일반형 다 쓸수있다.
이렇게 똑같기 때문에 interface와 type을 쓸때 차이점을 가지고 기준을 만들어서 사용하는 것이좋다.export type TUser = { // 옆에 = 이있음 readonly id: number; readnoly name : Name ; // 위에 타입알리스로 지정해준것 사용 eamil : string; // 일반형 receiveInfo: boolean; active : YesOrNo; address? : string; // 이렇게 ? 표가 붙어있으면 옵션사항
타입알리아스, 인터페이스 확장법 (상속)
- 타입알리아스 (intersection)
TUserprofiles를 만들고 = { 사이에 IUser & 넣어주면 확장된것이다. 재밌는건 IUser는 인터페이스로 만든것이지만 타입알리아스로 만들어진 것에 쓸 수 있다.export type TUserprofiles = IUser & { profileImgae : string; github? : stirng; twitter? : string;
- 인터페이스 (extends)
IUserprofiles를 만들고 extends를 쓰고 확장할 것을 써준다. 여기도 재밌는건 TUser는 타입알리아스로 만들어졌는데 인터페이스로 만들어진 것에 쓸 수 있다.export type IUserprofiles extends TUser { profileImgae : string; github? : stirng; twitter? : string;
- 여러개를 합칠 수 있다. Color, Display, Geometry 가 있다고 가정하고
- 타입알리아스
export type TStyle = Color & Display, Geometry { tagName : string; }
- 인터페이스
export interpace IStyle extends Color,Display,Geometry { tagNmae : string; }
하나의 속성 값으로만 지정 할 수도있다.
- 타입알리아스
export type IonlyBooleanValueObject = { [prop:string] : boolean; } // 여기서 prop는 속성을 나타내는 건데 prop라고 안쓰고 아무거나로 써도된다함.
- 인터페이스
export interpace IonlyNumberValueObject { [key:string] : number; } // 여기서 key는 속성을 나타내는 건데 key라고 안쓰고 아무거나로 써도된다함.
함수 자체도 규격을 만들 수 있다.
- 타입알리아스
export type TGetApi = { (url : string, serch? : string;) : Promise<string>; } // ( )는 인자 값이고, : 뒤에 Promise는 리턴 값이다.
- 인터페이스
export ingerface IGetApi { (url : string, serch? : string;) : Promise<string>; } // ( )는 인자 값이고, : 뒤에 Promise는 리턴 값이다.
- 이 규격을 가지고와서 쓸때는 정의문이아니라 표현식으로 나타내 줘야한다.
아래 참고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);
데이터를 표현할 때는 타입알리아스
클래스, 메소드, 데이터를 포괄하는 객체를 디자인할때는 인터페이스 사용
Author And Source
이 문제에 관하여(인터페이스와 타입 별칭(타입알리아스)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@choel0304/인터페이스와-타입-별칭타입알리아스저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)