Web/TypeScript

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

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"..

[TypeScript] tsconfig.json

tsconfig.json 파일은 TypeScript 컴파일러의 옵션을 설정하는 파일이며 다음의 방법으로 파일을 생성할 수 있습니다. tsc --init 위 명령으로 인해 생성된 파일은 tsconfig.json이며 파일을 열어보면 대략 아래 내용들이 들어가 있음을 알 수 있습니다. { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (defau..

[TypeScript] 일반화 (Generic)

클래스나 함수에서 타입을 미리 결정짓지 않고 그것을 사용할 때 타입을 결정해 사용하는 것을 말합니다. let list = []; const Add = (x: number) => { list.push(x); }; Add(10); console.log(list[0]); 위 예제는 Add함수를 통해 list에 요소를 추가한 뒤 이를 보여주는 함수입니다. 그런데 Add를 보면 number만 받을 수 있습니다. 만약 string이나 기타 다른 형식이 다뤄져야 한다면 그에 맞는 형식의 배열과 변수를 모두 만들어야 한다는 뜻이 되지만 제네릭을 이용해 문제를 해결할 수도 있습니다. let list = []; function Add(x: T) { list.push(x); }; Add(10); Add('abc'); con..

[TypeScript] 객체지향 프로그래밍

※ Javascript에서의 객체지향과 크게 다르지 않습니다. TypeScript만의 객체지향을 말하는것이 아니니 주의해 주세요. 1. 클래스(Class) TypeScript에서 클래스는 아래와 같이 생성합니다. class Car { color: string = 'red'; speed: number = 0; Drive(acc): void { this.speed += acc; console.log('speed : ', this.speed); }; Stop(): void { this.speed = 0; console.log('stop'); }; }; const car = new Car(); console.log(car.color); Car라는 클래스는 color와 speed라는 멤버변수와 Drive(), S..

[TypeScript] 데이터 타입

1. 기본 타입 TypeScript에서 사용 가능한 기본 타입에는 number, string, boolean, undefined, null, unknown, any, void, never, object와 같은 것들이 있습니다. TypeSscript에서 변수를 선언할 때 타입을 지정할 수 있는데 아래 방법으로 변수를 선언하고 값을 할당할 수 있습니다. const mynum: number = 10; console.log(mynum); 물론 타입은 생략될 수 있습니다. 그러면 대입되는 값에 따라 타입이 자동으로 결정됩니다. 이를 타입 추론이라 하는데 함수를 사용할 때 매개변수나 반환되는 타입도 생략하면 매개변수는 any나 반환 형태는 return 되는 값의 타입에 따라 자동으로 결정됩니다. let myValu..

[TypeScript] 개요및 준비

1. 개요 TypeScript는 아주 간단하게만 말하면 Javascript에서 문제가 되었던 동적 타입과 OOP의 문제를 보완한 것이라고 생각하면 됩니다. 동적 타입이 아닌 정적 타입을 사용하고 OOP(Object Oriented Programming) 개념을 도입해 OOP의 프로그래밍 이점을 그대로 가져갈 수 있습니다. 동적 타입의 가장 큰 문제점은 오직 실행단계에서만 오류를 확인할 수 있다는 것입니다. 기존의 javascript는 다음과 같은 처리가 가능합니다. var i = 10; i = 'abc'; 변수에 대입되는 값의 형태에 따라 변수의 타입이 결정되는 방식이기에 여기까지는 아무런 문제 없이 지나갈 수 있습니다. 그런데 var i = 10; i = 'abc'; var j = 10 + i; 위와 ..