참조사이트

https://typescript-kr.github.io/
인트런 타입스크립트 코리아 무료 강의 참조

설치 방법

npm install typescript -g

tsc --init

• tsconfig.json 파일이 생성 되며 해당 파일에서 compiler 옵션을 설정 할수 있다.

tsc --init

tsc test.ts

• typescript는 javascript 형태로 변경 후 컴파일해야 정상적으로 인식 됨.
• typescript 문법이 적용 된 .ts 확장자를 javascript로 변환 하는 명령어
• 아래 typescript 문법이 적용된 파일을 하나 만들고 tsc 명령을 수행하면 test.js로 파일이 생성되고 해당 파일을 node 명령어로 실행하면 된다.

let sum = (a: number, b: number) => {
  return a + b;
};

function minus(a: number, b: number) {
  return a - b;
}

tsc test.ts

tsc -w

• 소스 수정 사항을 자동으로 javascript로 변환하는 명령어

tsc -w typescript.ts

Data type

기본

let isDone: boolean = false;
let decimal: number = 6;
let hex: number = 0xf00d;
let color: string = 'blue';
let fullName: string = `Bob Bobbington`;
let list: Array<number> = [1, 2, 3];

튜플

• 배열에서 type을 두 개 이상 다른 타입으로 지정한다.

let listA: [string, number, boolean]; //튜플 타입
listA = ['hello', 20, false];
console.log(listA[0]);
console.log(listA[1]);
console.log(listA[2]);

Enum

• 특정 값을 지정하여 이름으로 구분하는 type이다.
• 값을 지정하면 지정한 값부터 증가 되고 지정 하지 않으면 0으로 시작 된다.
• string 값을 지정할 수도 있다

enum Color {
  Red,
  Green = 3,
  Blue,
}

enum Grade {
  A = 'A',
  B = 'B',
  C = 'C',
}

console.log(Color.Red);
console.log(Color.Green);
console.log(Color.Blue);
console.log(Grade.A);
console.log(Grade.B);

any

• 모든 type을 받는 형태이며 타입스크립트 컴파일러가 오류를 검출하지 않는다.

let time: any = '232';
time.substring();
let array: any[] = [1, {}, 'ssss'];

함수 파라미터 옵션널

• 함수 파라미터에 valueB?: string 이름 끝에 ?를 붙여 옵션을 지정할 수 있다 함수 호출 해당 파라미터 값에 값을 넣어도 되고 안넣어도 된다.
• 옵션널을 설정 하려면 맨끝에 위치해야 하면 중간에 위치할 수 없다. 연속으로도 사용이 가능 함

function testParameter(valueA: number, valueB?: string, valueC?: string): void {
  console.log('valueA', valueA);
  console.log('valueB', valueB);
}

type alias

• type 으로 형을 1개 이상 선언 할 수 있으며 type으로 StrigOrNumber 지정하면 해당 type인 string , number만 사용이 가능 하다

type StrigOrNumber = string | number;
let value: StrigOrNumber = 1111;
function getValue(value: StrigOrNumber) {
  if (typeof value == 'string') {
    return '문자열 이야 ';
  } else if (typeof value == 'number') {
    return '숫자야 ';
  }
}

console.log(getValue('dddd'));
console.log(getValue(111));

interface

• interface를 통해 object type을 명시 할 수 있다.
• readonly는 object 선언 한 값 이외에 수정이 불가능하다
• ? 은 object 생성 시 제외 해도 에러가 나지 않음
• [propName: string] interface에 지정 된 프로퍼티 이외에 추가할 경우 사용한다.

interface car {
  readonly name: string; // 읽기 전용 프로퍼티
  cc: number;
  color: string;
  is4doore?: boolean;  // 선택적 프로퍼티   
  [propName: string]: any; // 추가 프로퍼티 
}

let testCar: car = {
  name: 'k7',
  cc: 2000,
  color: 'red',
};

• 함수 타입은 interface로 만든 함수 형태를 따르지 않으면 error 난다.

interface searchFunc {
  (findKeyWrod: string): boolean;
}

let search: searchFunc;

search = (keyword: string) => {
  if (keyword == 'test') {
    return true;
  } else {
    return false;
  }
};

• interface Class에서 사용

interface ICar {
  name: string;
  engine: number;
  startEngine(): void;
  setOil?(type: number): void;
}

class Car implements ICar {
  name: string = '';
  engine: number = 0;
  constructor(name: string, engine: number) {
    this.name = name;
    this.engine = engine;
  }

  startEngine(): void {
    console.log('startengine=', this.engine);
  }

  setOil(type: number): void {
    console.log(`오일 종류가${type} 추가 됩니다.`);
  }
}

• 인덱서블 타입

let value: StringArray = {};
value[100] = 'ddd';
console.log('value', value);

interface StringArray {
  '[index: number]: string;
}

let value: StringArray = {};
value[100] = 'ddd';
console.log('value', value);

interface StringIndex {
  '[index: string]: string;
}

let test: StringIndex = {};
test.name = 'lee';
console.log('test', test);

Class

• 자바의 Class와 비슷
• 상속이 가능 하며 public, protected, private 지정이 가능
• 상속을 받으면 부모 생성자는 super() 함수에서 받아서 처리 해야함.
• static 사용 가능 자바랑 비슷

class Person {
  protected name: string;
  protected age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

class User extends Person {
  private address: string = '';
  public static version = '1.0';

  constructor(name: string, age: number) {
    super(name, age);
  }

  showInfo(): void {
    console.log(`사람의 이름은 ${this.name} 나이는 ${this.age}`);
  }
}

const user: User = new User('lee', 200);
User.version; // static 자바처럼 사용 가능
user.showInfo();

Class 활용

• interface를 통해 implements를 하면 해당 interface에 선언한 함수는 해당 class에서 모두 선언해야 한다.
• 보통 class에서는 interface를 통해 외부로 노출할 함수인 public 함수들을 선언하여 외부로 노출 시킨다.
• 아래는 자동차 class를 상속 받아 전기차 class를 만드는 예제이다
• car function을 class로 변경해보자

function Car(name) {
  this.name = name;
  this.speed = 0;

  this.honk = function () {
    console.log('부우우웅');
  };

  this.accelerate = function (speed) {
    this.speed = this.speed + speed;
  };
}

//위의 car function을 글래스로 변경 

interface ICar {
  honk(): void;
  accelerate(speed: number): void;
  getSpeed(): number;
  getName(): string;
}

class Car implements ICar {
  protected name: string = '';
  protected speed: number = 0;

  constructor(name: string) {
    this.name = name;
  }

  public honk(): void {
    console.log('차가 움직이고 있어요');
  }
  public getSpeed(): number {
    return this.speed;
  }
  public getName(): string {
    return this.name;
  }

  public accelerate = (speed: number): void => {
    this.speed = speed;
  };
}

interface IElectricCar {
  getBatteryCharge(): number;
  getName(): string;
}

class ElectricCar extends Car implements IElectricCar {
  private batteryCharge: number = 20;

  constructor(name: string) {
    super(name);
  }

  getBatteryCharge(): number {
    return this.batteryCharge;
  }
}


실행 코드 
let car: ICar = new Car('벤츠');
car.honk();
car.getSpeed();
car.accelerate(20);

let electricCar: IElectricCar = new ElectricCar('아이오닉5');
electricCar.getName();
electricCar.getBatteryCharge();

generic

• 어떤 데이터 타입이 올지 모를 경우 사용하며 직접 데이터 타입을 지정해서 사용한다.

generic Array

let listA: Array<string> = ['a', 'b', 'c'];
let listB: Array<string> = ['a', 'b', 'c'];

generic function

function setValue<T>(value: T): T {
  return value;
}

setValue<string>('스트링 타입');
setValue<number>(1);
setValue<boolean>(true);

generic class

• generic클래스에서 1개 혹은 2개 이상 사용 가능

class BigData<T> {
  private dataType: T;
  constructor(dataType: T) {
    this.dataType = dataType;
  }

  public getDataType(): T {
    return this.dataType;
  }
}


let bigData1 = new BigData<number>(1);
bigData1.getDataType();
let bigData2 = new BigData<string>('BBBB');
bigData2.getDataType();
let bigData3 = new BigData<boolean>(true);
bigData3.getDataType();

class BigDataB<T, K> {
  private dataType: T;
  private value: K;
  constructor(dataType: T, value: K) {
    this.dataType = dataType;
    this.value = value;
  }

  public getDataType(): T {
    return this.dataType;
  }

  public getValue(): K {
    return this.value;
  }
}

let bigDataA = new BigDataB<number, string>(1, 'ddd');
bigDataA.getDataType();
let bigDataB = new BigDataB<string, boolean>('BBBB', false);
bigDataA.getDataType();

generic extends

• T에 상속받아서 유니온 타입으로 설정이 가능 하며 제너릭에는 string 과 number 만 올수 있다.

class BigDataA<T extends string | number> {
  private dataType: T;
  constructor(dataType: T) {
    this.dataType = dataType;
  }

  public getDataType(): T {
    return this.dataType;
  }
}

let bigDataA1 = new BigData<number>(1);
bigDataA1.getDataType();
let bigDataA2 = new BigDataA<string>('BBBB');
bigData2.getDataType();
// boolean은 extends에 없기 때문에 에러 발생
let bigDataA3 = new BigDataA<boolean>(true); 
bigData3.getDataType();

keyof

• keyof를 사용하면 interface의 key 값인 name, age 값의 형태로만 type을 받을 수 있다.
• type user는 'name' , 'age' 값만 변수에 넣을 수 있게 된다.

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

type user = keyof User;

let keyName: user = 'name';
let KeyAge: user = 'age';
let other: user = 'age111'; //에러 발생

type 과 keyof 제너릭 활용

function getProperty<T, K extends keyof T>(object: T, key: K) {
  return object[key];
}

function setProperty<T, K extends keyof T>(object: T, key: K, vlaue: T[K]) {
  object[key] = vlaue;
}

let People = {
  name: 'jjjj',
  age: 1,
};

getProperty(People, 'name');
getProperty(People, 'age');
getProperty(People, 'n111'); //name이 아니라서 에러 발생 
setProperty(People, 'age', 1);