개발 일기

만약에 Generics을 사용하지 않았을 경우에는 다음과 같이 사용을 해야합니다. function identity(arg: number): number { return arg; } or function identity(arg: any): any { return arg; } 하지만 위에 같이 any를 했을 경우에는 타입을 잃기 때문에 다음과 같이 Generic을 통해서 할수가 있습니다. function identity(arg: T): T { return arg; } 이제 사용은 다음과 같이 두가지 방법이 있습니다. let output = identity("myString"); let output = identity("myString"); // type of output will be 'string' 하지만..

Enum은 Javascript에 대한 확장이 아니며 Typescript에 몇가지 특징중에 하나 입니다. Enum을 사용하면 개발자가 정의한 상수이름을 지정할수가 있습니다. Typescript은 숫자와 문자열을 지원합니다. Numeric enums 만약에 다른 언어로부터 왔다면 enum keyword는 되게 친숙할것 입니다. enum Direction { Up = 1, Down, Left, Right } 다음과 같이 데이터가 있을때 초기값을 1로써 자동적으로 1 씩 증가 하게 됩니다. 따라서 아래에서는 Up = 1 , Down = 2 , Left = 3 , Right = 4 입니다. 만약에 자동적으로 1씩 증가가 아닌 직접적으로 결정을 하고 싶은 경우에는 다음과 같이 사용이 가능합니다. enum Respo..

가끔 함수 안에서 매개변수를 넘길 때 string 혹은 number을 원할 때 다음과 같이 구현이 가능합니다. /** * Takes a string and adds "padding" to the left. * If 'padding' is a string, then 'padding' is appended to the left side. * If 'padding' is a number, then that number of spaces is added to the left side. */ function padLeft(value: string, padding: any) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + valu..

String Literal Types ? // We're making a guarantee that this variable // helloWorld will never change, by using const. // So, TypeScript sets the type to be "Hello World" not string const helloWorld = "Hello World"; // On the other hand, a let can change, and so the compiler declares it a string let hiWorld = "Hi World"; 다음과 같은 Literal Types는 Primitive Type의 하위 타입입니다. 따라서 Primitive Type 보다 Liter..

Typescript에서는 다음과 같이 함수를 정의할수가 있습니다. function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; }; 함수의 반환 부분을 보고 많은 부분을 파악할수 있어서 다음과 같은 내용을 생략을 할수도 있습니다. let myAdd: (baseValue: number, increment: number) => number = function( x: number, y: number ): number { return x + y; }; Typescript에서는 Javascript에서와는 다르게 함수에서 제공하는 매개 변수와 실제로..

TypeScript에서 class는 JAVA와 C#와 비슷하게 생겼습니다. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); 이 클래스에서는 greeting이라는 변수 , 생성자 , greet() 이라는 함수를 가지고 있습니다. class에 member 변수에 접근 하고 싶으면 this을 통해 접근을 할수가 있습니다. 상속 :) class Animal { move(distanceInMeters: number = 0) { console.log(`..

Interface을 사용하여 추상 메소드를 정의하여 코드의 약속을 지정할 수가 있습니다. [간단한 예시] interface LabeledValue { label: string; } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); 여기에서 출력 값은 다음과 같이 "Size 10 Object"입니다. 만약에 myObj에서 label값이 없으면 에러가 발생합니다. 개발을 하다보면 interface에서 모든 값들이 필수일 필요는 없습니다. 그럴 때 사용할 수 있는게 Optional property..

Typescript도 Javascript에 상위 집합이므로 당연히 var , let , const을 지원합니다. 기본적으로 var보다는 let , const을 선호하고 그 이유는 아래와 같이 스코프 규칙에 있습니다. function f(shouldInitialize: boolean) { if (shouldInitialize) { var x = 10; } return x; } f(true); // returns '10' f(false); // returns 'undefined' 위와 같이 if문에서 x을 생성을 했지만 아래에서 x을 참조하고 있습니다. var선언은 블록과 관계없이 이를 감싸고 있는 함수 , 모듈 , 네임스페이스 , 전역 스코프에서 접근 할수 있습니다. 더구나나 여러번 선언도 가능하기 때문에..