ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Typescript - import & export & namespace
    Front-end/Typesrcipt 2023. 4. 18. 16:55
    728x90
    반응형

    Typescript exrpot

    typescript export 란 파일에 선언되어있는 변수 및 함수 등을 다른 파일로 내보내서 사용한다는 것이다.

    // test.ts 
    // export 키워드를써서 다른 파일에서 사용할 수 있도록 한다.
    export var myName: string = 'zelord';
    export var myAge: number = 27;

     

    export 키워드를 써서 다른 파일에 사용할 수 있도록 선언한다.

    export 키워드는 변수 뿐만 아니라 type 도 내보낼 수 있다.

    // test.ts
    export type MyName = string;	// export 키워드를 사용하여 type 도 내보낼 수 있다.

     

     

    Typescript import

    Typescript import란 다른 파일에서 export 키워드를 사용한 변수 및 함수를 받아와서 사용할 수있다.

    // index.ts
    // import { 변수명 } from '파일경로'
    import { myName, myAge } from './test' // import 키워드를 써서 불러온다.
    
    console.log(myName); // test.ts 에 불러온 변수를 사용할 수 있다.
    console.log(myAge);

    import 키워드를 사용해서 test.ts에 export 키워드로 사용된 변수명을 가져와 {}사이에 넣고  from 뒤에 경로를 붙여 불러와서 사용할 수 있다.

     

     

     

    반응형

     

     

     

    Typescript namespace

    Typescript namespace 란 논리적으로 연관된 코드를 묶는 방법이다. 여러파일에 걸쳐 하나의 namespace공유한다.

    namespace myNamespace {	// namespace 를 사용하여 타입을 선언할 수 있다.
        export type MyName = string | number;
    }
    
    let word: myNamespace.MyName	// namespace 를 활용하여 꺼내 사용할 수 있다.
    
    namespace myNamespace2 {
        export type MyName = string | number;	// 중복된 type명을 써도 사용이 가능하다.
    }

     

    728x90
    반응형

    'Front-end > Typesrcipt' 카테고리의 다른 글

    Typescript - tuple type  (0) 2023.04.18
    Typescript - generics  (0) 2023.04.18
    Typescript - protected & static  (0) 2023.04.18
    Typescript - public & private  (0) 2023.04.18
    Typescript - never type  (0) 2023.04.18
Designed by Tistory.