코딩애플 Typescript - 타입도 import export 해서 씁니다 그리고 namespace

김원종·2024년 4월 18일
0

TypeScript 학습

목록 보기
18/28
post-thumbnail

타입스크립트에서도 다른 파일에서 만든 타입변수를 다른 파일에서 사용하고 싶은 경우 js 의 import export문법 그대로 사용이 가능하다.
오른쪽에 있는 이름이라는 변수를 export를 통해서 내보내고 왼쪽 index.ts에서 사용할수 있다.

이런식으로 타입도 export와 import가 가능한것이다. 이것과 함께 배울것이 namespace라는 개념이다. 예전에는 import와export문법이 없어서 js태그로 첨부해서 사용했다.

이런식 방식으로 말이다. 그런데 이런 방식으로 구현했을때 문제점은 모든 코드를 다 복사해서 붙여 넣다보니 변수명이 겹칠수가 있다. 그럼 버그가 발생하거나 에러가 발생하기 쉬웠다.

이런것처럼 TS에서도 예전에는 import와 export문법이 없을때는 namespace라는 문법을 사용했다. 즉 타입 변수를 숨겨서 사용했다.

이러한 타입을 지정했는데 숨기기 위해서 오브젝트 자료안에 숨겼었다. namespace라는 문법을 사용해서 숨겼다. 이렇게 사용해서 예전 TS에서 타입명을 감추는 법이다.

내보낸 타입을 받아올때는 이렇게 reference를 사용해서 받아오는데 위처럼 선언하면 해당 파일에 있는 코드를 사용할수 있게 되는것이다.
근데 그냥 가져다 사용 하면 문제가 발생할수 있으니 namespace로 선언한후 그 내부에 있는 코드를 사용하는 방식으로 사용했었다. 하지만 지금은 별로 사용되지 않으니 해석할수 있게 참고하도록 하자.

지금은 export , import문법을 사용해 여러가지를 내보내고 사용할수있으니 참고하자!

참고로 더 예전에는 module이라는 문법을 사용했다. 이것도 namespace와 같은 형태이다.


숙제1) Car 그리고 Bike 타입을 만들었는데 너무 길어요

(index.ts)

type Car = {
wheel : number,
model : string
}
interface Bike {
wheel : 2,
model : string
}

나의 풀이

import {Taxi,Bikex} from "./Test/a";

let AA :Taxi={
    wheel:12,
    model:"ss"
}
---
export type Taxi = {
    wheel : number,
    model : string
}
export interface Bikex {
    wheel : 2,
    model : string
}

센세 풀이

(a.ts)

export type Car = {
  wheel : number,
  model : string
}
export interface Bike {
  wheel : 2,
  model : string
}
이것은 타입담아둘 파일

 

 

(index.ts)

import {Car, Bike} from './a'

let 빠방이 :Car = { wheel : 4, model : 'Sonata' }
이것은 가져다쓰는 파일입니다.

숙제2) 너무 자주만들어 쓰는 함수가 하나 있습니다

이 함수는 파라미터로 object자료 하나를 선택적으로 집어넣을 수 있고

아무것도 return 해주지 않아야합니다.

함수 만들 때마다 여기에 타입 일일이 붙이기 귀찮아서 그런데

이 타입을 다른 파일에 저장해두고 import 해와서 함수 만들 때마다 쓰려면 어떻게 코드를 짜야할까요

나의 풀이

export type Fun=(a?:object)=>void ; 

import {Taxi,Bikex,Fun} from "./Test/a";

let AA :Taxi={
    wheel:12,
    model:"ss"
}

let Sa:Fun =function AS(a){
    
}

센세 풀이

(a.ts)

export type ObjFunction = (a? :object) => void
이것은 타입담아둘 파일

 

 

(index.ts)

import {ObjFunction} from './a'

let 함수 :ObjFunction = function(a){
  console.log(a)
}

함수({abc : '안뇽'});
이것은 가져다쓰는 파일입니다.

에러안나니 잘 되는 것임 

저럴 경우 참고로 object 대신 array 자료 집어넣어도 별말 안합니다.

숙제3) 타입 중복이 너무 많이 발생합니다.

type Dog = string;
interface Dog { name : string };

let dog1 :Dog = 'bark';
let dog2 :Dog = { name : 'paw' }
위 코드에서 에러를 없애야합니다. 어떻게 코드를 짜면 될까요?

(조건) type Dog, interface Dog의 타입이름 변경 금지, 파일 분할 금지

나의 풀이

namespace DOG{
    export type Dog = string;
}

interface Dog { name : string };


let dog1 :DOG.Dog = 'bark';
let dog2 :Dog = { name : 'paw' };

센세 풀이

namespace GoodDog {
  export type Dog = string;
}
namespace BadDog {
  export interface Dog { name : string };
}

let dog1 :GoodDog.Dog = 'bark';
let dog2 :BadDog.Dog = { name : 'paw' }
저는 namespace를 2개 만들고 각각 다른 타입을 담았습니다. 

그럼 이제 첫째 타입은 GoodDog.Dog 이렇게 쓸 수 있고

둘째 타입은 BadDog.Dog 이렇게 쓸 수 있습니다. 
profile
개린이

0개의 댓글