KEEP CODING

타입 단언 타입스크립트에서는 자체적으로 타입을 추론한다. 그런데 처음 변수를 만들 때 타입을 명시하지 않으면 타입을 추론하기 어렵다. 1 2 3 4 var a; // any 타입(특별한 타입 명시하지 않음) a = 20; a = 'a'; // 복잡한 코드들을 거침 var b = a; // 코드들을 추적할 수 없어 b의 타입도 any로 추측 cs 그런데 개발자가 코드를 작성하다가 타입을 잘 알 수 있을 때 타입 단언을 사용할 수 있다. 1 var c = a as string; // c의 타입은 string으로 지정됨 cs as (타입) 을 사용하면 타입을 지정할 수 있다. a를 string으로 간주한다는 의미로, c는 자연스럽게 string이 된다. 타입 단언의 예시 -DOM API 조작 DOM API란 ..

타입스크립트에서는 타입을 명시해줘야 하지만, 스스로 타입을 추론할 수 있다. 1. 변수를 선언할 때의 타입 추론 변수를 선언할 때 타입 추론이 일어난다. 1 2 3 4 5 6 7 8 9 10 // 변수를 선언할 때 타입 추론이 일어난다. var a = 'abc'; // string function getB(b = 10) { var c = 'hi'; // string return b + c; } getB(); // string console.log(getB()); // 10hi cs getB함수에서 b나 c의 타입을 정해주지 않았지만 처음 선언될 때 타입 추론이 일어난다. number + string = string 이므로 getB()는 string타입이 되고, 10hi를 출력한다. 2. 인터페이스와 제네..

Promise Promise는 대기/완료/거부 상태를 가진다. 그러므로 생성되었을 때는 완료 후에 어떤 값을 가지게 될지 알 수 없다. 그러므로 제너릭을 통해 어떤 형태의 반환값을 가질지 미리 명시해줘야 한다. 1 2 3 4 5 6 7 8 9 10 // Promise function fetchItems(): Promise { let items: string[] = ['a', 'b', 'c']; return new Promise(function (resolve) { resolve(items); }); } fetchItems().then((value) => console.log(value.length)); cs 위의 fetchItems 는 제너릭을 통해 string[]을 반환할 것이라고 명시해뒀다. 그래서 ..

제네릭을 사용하면 여러 타입의 입력값을 처리할 수 있다. 하지만 타입이 명시되지 않아서 API를 사용할 수 없는 단점도 존재한다. 이런 상황에서 제네릭으로 입력받을 타입에 대한 힌트를 줄 수 있다. 제네릭의 타입 제한 1 2 3 4 5 6 7 8 9 10 // 제네릭의 타입 제한 // T[] : T타입 요소들이 들어간 array임을 명시 // 타입에 대한 힌트를 제공 function logTextLength(text: T[]): T[] { // 타입제한으로 .length가 가능해진다 console.log(text.length); return text; } logTextLength(['h', 'i']); cs 함수를 호출할 떼 제네릭으로 string을 전달하면, string[]타입을 입력받을 것이라는 힌트..

제네릭이란? TS코드에서 타입을 함수의 파라미터처럼 사용하는 방법이다. 함수의 재사용성을 위해 타입별로 여러 함수를 만들지 않고 하나의 함수로 여러 타입의 입력값을 처리할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // 타입을 명시하지 않을 때(any타입) function logText(text) { console.log(text); return text; } // 반환값은 logText(100); // 숫자 10 logText('hi'); // 문자열 hi logText(true); // 진위값 true // 제네릭을 사용할 때 function logText2(text: T): T { console.log(text); return text; }..

TS에서의 클래스 클래스를 만들 때 사용할 변수들의 속성도 미리 정의해줘야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // JS에서의 클래스 class Person { constructor(name, age) { this.name = name; this.age = age; } } // 클래스 문법은 생성자 함수와 같다. // 작성하는 방법만 다른 것이다. function Person2(name, age) { this.name = name; this.age = age; } // TS안에서의 class class Person { // 클래스에서 사용할 변수들의 속성을 미리 정의해줘야 한다. // 변수의 접..

이넘 타입 이넘은 특정 값들의 집합을 의미하는 자료형이다. 숫자형 이넘과 문자형 이넘이 있다. 1. 숫자형 이넘 enum을 만들고 값을 초기화하지 않으면 자동적으로 0으로 시작하는 이넘 타입이 만들어진다. 1 2 3 4 5 6 7 8 9 10 11 // 숫자형 이넘 enum Shoes { Nike = 10, Adidas, Sth, }; // 첫 번째 값을 초기화하면 그 다음 요소부터는 1씩 증가한다. // 정해진 숫자로 취급한다. console.log(10 === Shoes.Nike); // true console.log(typeof Shoes.Nike); // 10이므로 number라고 나온다. cs 2. 문자형 이넘 문자형 이넘은 문자를 모든 요소에 지정해주어야 한다. 1 2 3 4 5 6 7 8 /..

연산자를 이용한 타입 정의에는 유니온 타입과 인터섹션 타입이 있다. 1. 유니온 타입 | 를 이용해 A 혹은 B 타입을 받겠다고 명시하는 방법. 하나 이상의 타입을 사용할 수 있다. 1 2 3 4 5 6 // 유니온 타입 ( | ) function logMessage(value: string | number) { console.log(value) } logMessage(100); cs logMessage() 에는 숫자나 문자가 들어갈 수 있다. 여러가지 타입을 | 으로 계속 이어서 사용할 수 있다. ( string | number | boolean | ...) 유니온타입으로 입력받은 value는 함수 내에서 string과 number가 공통으로 가지고 있는 API만을 사용할 수 있다. TS입장에서는 st..

인터페이스의 확장 인터페이스는 확장이 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 인터페이스 확장 interface Person { name: string; age: number; } // interface Developer { // name: string; // age: number; // language: string; // } // 상속을 통한 확장 interface Developer extends Person { language: string; } var Captain: Developer = { language: "TS", age: 100, name: "캡틴", }; Colored by Color Scripter cs Per..

배열의 인덱싱 인터페이스를 사용해 인덱싱을 설정할 수 있다. 1 2 3 4 5 6 7 8 9 // 인덱싱 interface StringArray { [index: number]: string // 인덱스를 숫자로 접근할 수 있다 // Array의 요소들은 string형식만 입력받는다 } var arr: StringArray = ['a', 'b', 'c']; arr[0] = 10; // string이 아닌 number를 입력했기 때문에 에러가 생성된다 cs interface에서 배열의 인덱싱을 설정할 수 있다. 위 코드의 StringArray는 숫자로 인덱스를 설정했다. 그래서 StringArray 인터페이스로 만든 arr에 [0]으로 각 요소에 접근할 수 있다. 접근한 값은 string으로 설정되었으므로..