클리엘
CLIEL LAB
클리엘
전체 방문자
117,050
오늘
281
어제
116
  • 분류 전체보기 (396)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (187)
      • C# (24)
      • ASP.NET Core (31)
      • Windows API for .NET (128)
    • Server (50)
      • SQL Server (8)
      • MariaDB (18)
      • Windows Server (5)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (5)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

  • [C#] Thread(스레드)와 Task(태⋯
    2021.10.24
    [C#] Thread(스레드)와 Task(태⋯
  • [C#] TCP/IP 통신
    2021.10.28
    [C#] TCP/IP 통신
  • [ASP.NET Core] IIS 배포 (게시)
    2021.12.15
    [ASP.NET Core] IIS 배포 (게시)
  • [MSSQL] MS SQL Server 다운로⋯
    2022.02.23
    [MSSQL] MS SQL Server 다운로⋯
  • [C#] 인터페이스와 추상클래스
    2021.10.07
    [C#] 인터페이스와 추상클래스

태그

  • apache nifi
  • HTML5
  • jQuery
  • NestJS
  • asp.net core web api
  • android
  • TypeScript
  • android studio
  • Kotlin
  • CentOS
  • asp.net core
  • MariaDB
  • JavaScript
  • c#
  • 변수
  • class
  • Cookie
  • CSS3
  • Windows API
  • node.js

최근 댓글

  • 흠... CACLS는 더이상 사용하지⋯
    클리엘
  • 안녕하세요! 아래 명령 하고부⋯
    방문자
  • 죄송합니다. 관련글을 작성한지⋯
    클리엘
  • 네 맞습니다. 본문에서는 표기⋯
    클리엘
  • 6000 ms 는 6초아닌가요?
    react

최근 글

  • [TypeScript] Visual Studio에⋯
    2022.05.06
    [TypeScript] Visual Studio에⋯
  • [C#] 함수(메서드)의 실행과 디⋯
    2022.05.06
    [C#] 함수(메서드)의 실행과 디⋯
  • [C#] 흐름제어, 형변환, 예외처리
    2022.04.27
    [C#] 흐름제어, 형변환, 예외처리
  • [C#] C# 개요
    2022.04.20
    [C#] C# 개요
  • C#과 .NET6 시작하기
    2022.04.13
    C#과 .NET6 시작하기

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

[TypeScript] Visual Studio에서 TypeScript사용하기
Web/TypeScript

[TypeScript] Visual Studio에서 TypeScript사용하기

2022. 5. 6. 17:44
728x90

Visual Studio를 실행하고 ASP.NET Core Web App형식의 프로젝트를 'WebTest'라는 이름으로 생성합니다.

프로젝트에서 'Microsoft.TypeScript.MSBuild'라는 이름의 NuGet Package를 찾아 설치합니다.

프로젝트에 다음과 같이 'tsconfig.json'라는 이름의 TypeScript 설정파일을 추가합니다.

설정파일을 다음과 같이 수정합니다.

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [ "tsscript/**/*" ]
}

compileOnSave는 ts파일을 저장할때마다 js로의 compile을 시도하는 옵션이며 include는 컴파일할 대상 ts가 존재하는 폴더를, 그리고 outDir은 컴파일된 js가 저장될 위치를 의미합니다. include에 tsscript라고 지정하였으므로 프로젝트에 'tsscript'라는 폴더를 생성하고 'app.ts'라는 이름의 TypeScript파일을 추가합니다.

 

그리고 다음과 같이 두수의 합을 계산하는 간단한 함수를 app.ts에 하나 추가한뒤

let myfunc = function (x: number, y: number) {
    return x + y;
}

파일을 저장해 보면 outDir에서 지정한 위치에 컴파일된 js파일이 app.ts와 같은 이름으로 저장되어 있는것을 확인할 수 있습니다.

저장된 app.js파일을 열어 컴파일된 결과를 확인합니다.

var myfunc = function (x, y) {
    return x + y;
};
//# sourceMappingURL=app.js.map

Pages페이지의 Index.cshtml파일을 열어 다음과 같은 내용을 추가하고 실행합니다.

<button onclick="cal()">확인</button>

<script src="~/js/app.js"></script>

<script>
    var cal = function() {
        var result = myfunc(10, 20);

        alert(result);
    };
</script>

 

728x90
저작자표시비영리변경금지

'Web > TypeScript' 카테고리의 다른 글

[TypeScript] Visual Studio에서 TypeScript사용하기  (0) 2022.05.06
[TypeScript] tsconfig.json  (0) 2021.03.13
[TypeScript] 일반화 (Generic)  (0) 2021.03.11
[TypeScript] 객체지향 프로그래밍  (0) 2021.03.11
[TypeScript] 데이터 타입  (0) 2021.03.10
[TypeScript] 개요및 준비  (0) 2021.03.10
    'Web/TypeScript' 카테고리의 다른 글
    • [TypeScript] tsconfig.json
    • [TypeScript] 일반화 (Generic)
    • [TypeScript] 객체지향 프로그래밍
    • [TypeScript] 데이터 타입
    TypeScript, Visual Studio
    클리엘
    클리엘
    누구냐 넌?
    댓글쓰기
    이전 글
    [C#] 함수(메서드)의 실행과 디버깅및 테스팅
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 5
    • ···
    • 396
    • 다음

    티스토리툴바