TypeScript메모

Type Script를 vscode에 설치

nodejs로 전역으로 typescript 패키지를 설치
```
npm install -g typescript
```

tsconfig.json파일을 생성
해당파일에서 컴파일 설정과 자바스크립트 버전설정등을 할수있다
```
tsc --init
```
컴파일 방법
변경시 즉각적으로 컴파일
```
tsc -w index.ts
```

TypeScript 메모

유니온연산자 ( | => OR)와 인터섹션연산자( & => AND )

type MyType = string | number; // MyType은 string이나 number 중 하나일 수 있는 유니온 타입입니다.

interface Person {
  name: string;
  age: number;
}

interface Employee {
  salary: number;
  department: string;
}

type workerType = Person & Employee; // Worker는 Person과 Employee 인터섹션 타입입니다.

// 타입을 이용한 생성
const workerPerson:workerType={
  name: 'kim',
  age: 30,
  salary: 100,
  department: 'parttime'
}

타입 자체를 변수에 선언하고 할당해서 사용할수있다

//예제1 (객체)
type Person = {
  name: string;
  email?: string; // Optional property
}

//예제2 (인터페이스)
interface Person {
  name: string;
  age: number;
}
type Employee = Person & { employeeId: number };

// 예제2의 결과 설명
// 즉 이러한 타입만 허용한다는 말이다
{
  name: string;
  age: number;
  employeeId: number;
}

//예제3 (타입 alias)
type MyNumber = number;
type MyString = string;

let num: MyNumber = 10;
let str: MyString = 'hello';

Type과 Interface의 차이는 별로 없다. 그러나 Type은 | 나 & 를 이용하여 복잡한 정의를 할수있다. Interface는 확장이 가능하다

리터럴 타입과 튜플타입 예시

// 리터럴 타입
let foo: 'hello' = 'hello'; // foo는 'hello'만을 가질 수 있는 문자열 타입

// 튜플 타입
let tuple: [string, number] = ['hello', 123]; // tuple은 문자열과 숫자를 가진 배열 타입

typeof // 변수등에 할당중인 객체를 객체타입으로 변환할때 사용 (객체->객체타입)
keyof // 객체타입에서 키명만 추출할때 (객체타입->키명을 유니온(|) 형태로)

typeof 와 keyof를 사용한 예제

enum LogLevel {
  ERROR, WARN, INFO, DEBUG
}

// 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';
type LogLevelStrings = keyof typeof LogLevel;
// LogLevel이라는 객체(이넘)를 객체타입으로 변경후 해당 객체타입에서 키명만 추출하여 유니온형태(OR)로 저장

Enum // 상수의 객체 같은 역할

enum Response {
  No = 0,
  Yes = 1,
}
function respond(recipient: string, message: Response): void {
  // ...
}
respond("Captain Pangyo", Response.Yes);

readonly // 값을 참조만 하고 변경불가
? (선택적속성) // 값이 존재할수도 있고 없을수도 있다

객체의 인스턴스 생성후 해당 인스턴스에 값을 할당할때 get()과 set()으로 값을 체크할수있다

class Developer {
  private name: string;
  
  get name(): string {
    return this.name;
  }

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error('이름이 너무 깁니다');
    }
    this.name = newValue;
  }
}
const josh = new Developer();
josh.name = 'Josh Bolton'; // Error
josh.name = 'Josh';

제너릭에 대한 간단한 예제

function test3<T,U>(p1:T,p2:U,p3:U):U[] {
  // T를 문자열로 하고 출력함
  console.log(p1);
  
  // U를 숫자형으로 받은뒤 숫자형을 받는 배열을 생성
  const result:U[] = [];
  result.push(p2);
  result.push(p3);
  
  // U[]라는 숫자형 배열을 반환
  return result;
}

test3<string,number>('안녕하세요',1,2);

제너릭에서 호출시 생략가능한 부분과 인터페이스 타입을 활용한 예제

// 1. 제너릭 타입의 정의와 호출
// 호출시에 사용한 타입정의를 호출되는 함수내에서 사용한다 (예제에서 T = string)
function test1<T>(params:T):T {
  return params;
}
test1<Array<string>>(['string']);
test1<string[]>(['string']);
test1(['string']); // 호출시 제너릭 생략가능

// 2.인터페이스 타입을 사용해서 제너릭 타입의 test2함수를 만들기
interface genericTestInterface {
  <T>(params: T): T;
}

let test2:genericTestInterface = test1;
test2(['string']);

제너릭 타입을 사용한 클래스 예제

class GenericMath<T> {
  pi: T;
  sum: (x: T, y: T) => T;
}

let math = new GenericMath<number>();

제너릭 타입에 제약조건으로 힌트를 줄수있다
extends type 으로 힌트를 추가해서 좀더 타입의 범위르 줄일수있다
```
function test<T extends number>(params: T): void {
    let sum = params + 1;
}
test<number>(1); 
```

변수명! // 해당 변수명에 null이나 undefiend가 들어와도 경고를 표시하지않는다는 의미
//@ts-ignore // 해당 주석을 추가하면 그 아래의 라인의 경고를 표시하지않음

as 를 사용해서 타입 캐스팅한 예제


const addedRows = document.querySelectorAll(".added-rows");    
const addedRow = addedRows[0].cloneNode(true); // true:요소의 하위 요소까지 복사
(addedRow as Element).querySelector(".remove-rows")!.addEventListener("click", deleteRow); // Node를 Element로 타입캐스팅

tsconfig.json에 대한 내용과 이 글에 대해서 참조한 사이트
https://joshua1988.github.io/ts/config/tsconfig.html

230924추가

1. 콜론을 이용해서 타입을 지정하는 패턴

1-1 변수에 사용

let x: number = 10; // 변수 x의 타입을 number로 명시
const person: { name: string; age: number } = { name: "John", age: 30, }; // 객체 person의 속성과 속성값의 타입 명시

1-2 반환형과 매개변수 타입을 지정하는 패턴과 함수선언 예제

function add(a: number, b: number): number { return a + b; }  // 함수선언

const add = <T extends number>(a: T, b: T): T => a + b;  // 제너릭을 이용한 한줄 함수선언 
선언 형식은 (함수or변수명 , 제너릭 ,매개변수 , 반환형 , 함수내용 순이다)

add<number>(1, 2) // 함수사용
제너릭 부분<number>은 생략가능하다

제일 중요한 부분이 함수 선언 형식이 아래와 같다는 점이다

함수 선언 형식은 ( 함수or변수명 , 제너릭 , 매개변수 , 반환형 , 함수내용 순이다)