제네릭을 활용하자 function swap(a: T, b: U) { return [b, a]; } const [a, b] = swap("1", 2); 2개의 타입 변수가 필요한 위와 같은 상황에서는 타입 변수를 T, U 이렇게 2개를 사용할 수 있다. function returnFirstValue(data: T[]) { return data[0]; } let num = returnFirstValue([0, 1, 2]); // number let str = returnFirstValue([1, "hello", "mynameis"]); // number | string 다양한 배열 타입을 인수로 받는 제네릭 함수를 만들어야 한다. 함수 매개변수 data의 타입을 T[]로 설정했기 때문에 배열이 아닌 값은 인..
제네릭 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 TS의 기능 제네릭 함수는 두루두루 모든 타입의 값을 적용할 수 있는 범용적인 함수다. function func(value: any) { return value; } let num = func(10); // any 타입 let str = func("string"); // any 타입 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수를 만들려고 한다. 이 때 다양한 타입의 매개변수를 받기 위해 매개변수의 타입을 any로 정의했다. 그랬더니 누가 봐도 10, string인 변수의 타입이 any로 고정되어 버렸다. 이는 func 함수의 반환값 타입이 return문을 기준으로 any라고 추론되었기 때문..
인터페이스와 클래스 TS의 인터페이스는 클래스의 설계도 역할을 할 수 있다. 인터페이스를 이용해 클래스에 어떤 필드가 존재하고, 어떤 메서드가 존재하는지 정의할 수 있다. interface CharacterInterface { name: string; moveSpeed: number; move(): void; } // 인터페이스로 클래스를 구현하다 // 인터페이스는 무조건 pubulic class Character implements CharacterInterface { constructor(public name: string, public moveSpeed: number) {} move(): void { console.log(`${this.moveSpeed} 속도로 이동`); } } CharacterI..
접근 제어자(Access Modifier) 클래스의 특정 필드나 메서드에 접근할 수 있는 범위를 설정하는 기능 TS에는 pubilc(모든 범위에서 가능), private(클래스 내부에서만 가능), protected(클래스/파생 클래스 내부에서만 가능)이 있다. public class Employee { // 필드 name: string; // 자동으로 public age: number; // 자동으로 public position: string; // 자동으로 public // 생성자 constructor(name: string, age: number, position: string) { this.name = name; this.age = age; this.position = position; } // 메..
타입스크립트의 클래스 타입스크립트에서도 똑같이 클래스를 만들기 전 객체를 만들어보자. const employee = { name: 'summermong', age: 27, position: 'developer', work() { console.log('일함'); }, }; 이런 객체를 찍어낼 클래스 Employee를 만든다. class Employee { // 필드 name: string; age: number; position: string; // 생성자 constructor(name: string, age: number, position: string) { this.name = name; this.age = age; this.position = position; } // 메서드 work() { con..
인터페이스 // 인터페이스 interface Person { name: string; age: number; } const person: Person = { name: "이정환", age : 27 }; 타입 별칭처럼 타입의 이름을 지어주는 문법으로 상호간에 약속된 규칙 상속, 합침 등의 특수한 기능을 제공해 객체의 구조를 정의하는 데 더 특화된 문법 interface Person { readonly name: string; age?: number; } const person: Person = { name: "summermong", // age: 27, }; person.name = 'wintermong' // 읽기 전용으로 수정 불가 선택적 프로퍼티 설정도 동일하게 사용 가능하다. 읽기 전용 키워드인 r..
함수 타입 함수를 가장 잘 설명하는 방법은 [어떤 타입의 매개변수]를 받고 [어떤 타입의 결과값]을 반환하는지 설명하는 것 // 일반 함수 function func(a: number, b: number): number { return a + b; } // 화살표 함수 const add = (a: number, b: number): number => a + b; 함수의 매개변수 타입이 지정되면 결과값은 TS가 추론한다. // 함수의 매개변수 function introduce(name = 'summermong', tall?: number) { console.log(`name: ${name}`); if (typeof tall === 'number') { console.log(`tall: ${tall + 10}..
타입스크립트는 어떤 기준으로 타입을 정의하는가? 타입 스크립트는 어떤 기준으로 타입 간의 관계를 정의하는가? 타입 스크립트는 어떤 기준으로 타입의 오류를 검사하는가? 타입 스크립트 문법만 정리된 Cheat Sheets도 있지만 원리를 이해해야 정확히 사용할 수 있다. 타입은 집합이다 동일한 속성과 특징을 갖는 여러 개의 값들을 모아둔 집합 let num: 20 = 20; 의 20은 넘버 리터럴 타입이지만 동시에 넘버 타입에 속하기도 한다. 이와 같이 타입들끼리 어떤 계층을 갖게 된다. 타입 간의 호환성은 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것 넘버 리터럴 타입의 값인 20을 넘버 타입의 값으로 취급해도 되지만, 반대는 불가능하다. (ex. 직사각형과 정사각형의 관계) let num1:..
타입스크립트의 기본 타입 타입은 부모 자식 관계를 이루며 계층을 형성하게 된다. 원시 타입과 리터럴 타입 단 하나의 값만 저장할 수 있다. :number와 같이 타입을 정하는 부분을 타입 주석(type annotation)이라고 한다. // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = 'hi'; let str2: string = 'hi'; let str3: s..
타입스크립트 실행하기 시작 npm init -> package.json 확인 npm i @types/node 로 패키지 설치 후 dependencies 확인 (TS 타입 이해하는 패키지) npm install typescript -g: TS 컴파일러도 위와 같이 node.js 패키지로 공급되고 있어서 같이 설치 tsc 로 TS 컴파일러 실행 (tsc -v로 버전 확인): tsc 경로 이 때 ts 파일에서 문제가 없다면 JS 파일이 생성된다. ts node 설치 지금은 TS 타입을 이해하고, 컴파일 하는 패키지만 설치했다. 콘솔에서 TS를 node 로 실행 시키려면 ts node를 설치해야 한다. npm install ts-node -g ts-node 경로 를 입력하면 해당 TS 파일을 VSC에서 실행시킬..
