타입스크립트(TS, TypeScript) 공부 5

23. Generic

- 함수에 <> 이런 괄호를 열면 파라미터를 또 입력할 수 있습니다. 

- 근데 여기 안엔 타입만 입력할 수 있습니다. 타입파라미터 문법

function 함수<MyType>(x: MyType[]) :MyType {
  return x[0];
}

let a = 함수<number>([4,2])
let b = 함수<string>(['kim', 'park'])

- 타입파라미터는 자유작명가능 보통 <T> 이런걸로 많이 합니다.

- 일반 함수파라미터 처럼 2개 이상 넣기도 가능합니다 

 

interface lengthCheck {
  length : number
}
function 함수<MyType extends lengthCheck>(x: MyType) {
  return x.length
}

let a = 함수<string>('hello')  //가능
let a = 함수<number>(1234) //에러남

- extends를 이용한 type 제

 

24. Tuple 타입

- tuple type은 array에 붙일 수 있는 타입, 자료의 위치까지 정확히 지정할 수 있는 타입

function 함수(...x :[string, number] ){
  console.log(x)
}
함수('kim', 123)  //가능
함수('kim', 123, 456)  //에러
함수('kim', 'park')  //에러

- 배열의 갯수 및 타입지정을 정확하게 지정 가능

type Num = [number, number?, number?];
let 변수1: Num = [10];
let 변수2: Num = [10, 20];
let 변수3: Num = [10, 20, 10];

- ? 옵션을 이용하여 값이 없어도 되는 경우 지정 가능

- 중간을 빼는 방식이 아닌 뒤에서 부터 사용 가능

let arr = [1,2,3]
let arr2 :[number, number, ...number[]] = [4,5, ...arr]

- rest 방식을 포함하여 작성도 가능

 

25. decleare

declare let a :number; 
변수 재정의가 가능한 declare문법

// ts -> ts파일로 변수 쓰려면 import export 사용
// ts 특징
// 모든 ts파일은 ambient module 글로벌 모듈
// export 하나 적어두면 ambient 식으로 적용 x -> 로컬모듈로 변경
// ex) export {}
// 로컬 모듈에서 글로벌 모듈로 사용하고 싶을때 declare global 사용하여 적용

declare global{ 
 type Dog = string  
}

- 모든 ts파일은 ambient module로 글로벌 모듈로 적용

- export 하나 적어두면 ambient식으로 적용 x -> 로컬 모듈로 사용하는 법

- 로컬 모듈에서 글로벌 모듈로 사용하고 싶을 때 declare global 옵션을 이용하여 적용

 

26. implements 키워드를 이용한 타입 체크

// interface는 오브젝트의 타입지정으로 사용 가능한데
// 추가적인 기능으로 class의 타입 확인도 가능
// implements 를 이용하여 interface에 있는 속성이 다 포함되어 있는지 확인가능
// 타입 체크용도이지 타입할당용도 x

interface CarType {
  model : string,
  price : number
}

class Car implements CarType {
  model : string;
  price : number = 1000;
  constructor(a :string){
    this.model = a
  }
}

let 붕붕이 = new Car('morning');

- interface를 class의 타입 확인용도로 사용할 수 있음

- 해당 class의 변수의 type값이 interface의 속성의 타입값과 일치하는지 여부 확인하는 방식으로 사용 가능

- 빠진속성이 있으면 에러로 알려줌

- 타입 지정방식이 아니기 때문에, 가지고 있는지 확인만 가능

- 타입 할당이나 변형을 주는 키워드가 아님을 주의

 

27. index signatures

interface Molaseo {
  [key:string]:string|number;
}

let obj3:Molaseo = {
  model : 'k5',
  brand : 'kia',
  price : 6000,
  year : 2030,
  date : '6월',
  percent : '5%',
  dealer : '김차장',
}

- { [key:string]: 타입 }  string 형태를 가진 모든 속성값에 특정 타입을 넣는 방식으로 사용 가능

- 속성을 추가로 적어줌으로써 특정 속성의 타입을 다른값으로 지정가능하나 논리적으로 말이 안되면 적용 x

 

* Recursive index signatures

interface Esang {
  "font-size":number;
  [key:string]:Esang|number;
}

let obj2:Esang = {
  'font-size' : 10,
  'secondary' : {
    'font-size' : 12,
    'third' : {
      'font-size' : 14
    }
  }
}

- 다음과 같이 자기 자신을 타입으로 가지고 있는 방식으로도 제작 가능