[코딩애플] ts part 2-6. import export & namespace

타입도 import export 해서 씁니다 그리고 namespace

import & export

import & export 란?

a.ts 와 index.ts 파일을 생성하고 a.ts 파일을 index.ts 파일에 갖다 쓰고 싶다면? a.ts 파일 내에서 export 해주고, index.ts에서 import한다.

🕹️a.ts

export var 이름 = 'kim';

🕹️index.ts

import {이름} from './a';

여러개 export 한다면?

🕹️a.ts

export var 이름 = 'kim';
export var 나이 = 20;

🕹️index.ts

import {이름, 나이} from './a';

타입도 import export 가능

🕹️a.ts

export type Name = string;

🕹️index.ts

import {Name} from './a';

let 변수 :Name = 'park';

namespace: TypeScript 타입변수 숨기기 문법

왜 배울까? -> 옛날엔 import export 문법이 없어서..

옛날에는 <script> 태그로 첨부하는게 다였다. index.js의 모든 코드를 복붙해준다.

<script src="index.js"></script>

문제점

• 변수명이 맨날 겹친다.

그래서 변수를 함수에 싸매고 그랬었음.. 근데 import export 문법이 생기고 나서부터 내가 원하는 변수만 export해서 갖다쓸 수 있기 때문에 이런 버그가 없어진다.

또한 '변수명 as 변수명2' 로 변수명을 다르게 가져다 쓸 수도 있어서 더 안전하게 갖다 쓸 수 있다.

당시 타입스크립트(v.1.5 이하)는 타입변수를 숨겨서 컨트롤했다.

🕹️a.ts

namespace 네임스페이스 {
    export type Name = string | number;
}

숨기고 싶은 타입변수는 object 자료 안에 숨겼다.

object와는 다르게 생겼는데 아무튼 object 안에 숨겼다고 보면 된다.

Name; // Error

Name 타입을 갖다쓰려고 하면 에러가 나면서 없다고 한다. 쓰려면,

네임스페이스.Name;

네임스페이스에서 .을 붙여야 쓸 수 있다.

let 변수 :네임스페이스.Name = 'kim';

이게 옛날 타입스크립트에서 타입명을 감추는 작업이다.

네임스페이스는 여러개가 있을 수 있다. 같은 파일 내에서 타입명이 중복이 일어나도 별 일이 일어나지 않는다.

namespace 네임스페이스 {
    export type Name = string | number;
}
namespace 네임스페이스2 {
    export type Name = string | number;
}

예전에는 export import 문법이 없어서 이렇게 썼다.

🕹️index.ts (옛날 typescript에서 import 해오는 문법)

///<reference path="./a.ts" />

그러면 a.ts에 있는 모든 내용을 가져다 쓸 수 있다. 그런데 그냥 갖다쓰면 Name이 갖다썼다가 겹칠 수가 있다. 그래서

네임스페이스.Name;

이렇게 갖다쓰면서 코드를 작성했다.

지금은 뭐 export import 문법을 그대로 갖다쓰면 되기 때문에 알 필요 없다.

• 평소 코드 쓸 땐 export import 쓰고,
• type 변수를 숨기고 싶으면 namespace를 만들어서 쓴다.

interface 이런 것들도 export 가능

export ineterface 인터페이스 {}

참고로 네임스페이스는 예전에 module이라고 썼다.

• module도 namespace와 같은 소리임

module 네임스페이스 {
    
}

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

(index.ts)

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

index.ts에 만들어놨는데 더러워서 다른 파일로 옮겨서 사용하고 싶습니다.

빨리 위 코드를 다른 파일 아무데나 저장하신 후 index.ts에서 가져와서 변수만들 때 사용해보십시오.

➡️

🕹️type.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 해와서 함수 만들 때마다 쓰려면 어떻게 코드를 짜야할까요

➡️

🕹️type.ts

export type ObjFunction = (input? :{}) => void

🕹️index.ts

import {ObjFunction} from './a'

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

함수({abc : '안뇽'});

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

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

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

위 코드에서 에러를 없애야합니다. 어떻게 코드를 짜면 될까요?

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

➡️

🕹️index.ts

namespace 네임스페이스1 {
	type Dog = string;
}
namespace 네임스페이스2 { 
    export interface Dog { name : string };
}

let dog1 :네임스페이스1.Dog = 'bark';
let dog2 :네임스페이스2.Dog = { name : 'paw' }