TypeScript 타입스크립트 (2)

minkyung·2022년 11월 29일
1
post-thumbnail

문자열 인덱스

키가 넘버로 되어있고 값이 스트링으로 되어있는 프로퍼티를 여러 개 받을 수 있음

[grade : number] : string

문자열 리터럴 타입

타입이 해당 문자열인 것임!

type Score = 'A' | 'B' | 'C' | 'D'
.
.
.
interface User {
  [grade : number] : Score 
}

job 속성의 타입은 string이 아니라 "police" | "developer" | "teacher"

함수에서의 type

interface Add {
  (num1:number, num2:number):number 
}

(num1:number, num2:number) → 인자로 받는 값 타입 지정
:number → 함수 return 되는 타입 지정

💡 필수 매개 변수보다 선택적 매개변수가 앞에 위치하면 안됨!

function 함수명 (parameter1?: string, parameter2: string):void{} → ❌ 
function 함수명 (parameter1: string, parameter2?: string):void{} → ⭕️

타입에서 this

//User==인터페이스

function showName (this : User) {
  console.log(this.name)
}

→ 매개 변수가 있을 때에는 this를 맨 앞에 적고
그 뒤부터 순차적으로 매개변수 적어주면 됨!

클래스에서의 interface

Implements

Extends → 해당 interface의 속성을 선택해서 사용 가능
Implements → 해당 interface의 속성을 모두 사용!!

interface Car {
  color: string,
  start() : void
}

class BMW implements Car {
  color;
  constructor(c:string){
    this.color = c;}
  start(){
    console.log('go')
  }
}

const b = new BMW('Green')
//클래스 생성

interface ToyCar extends Car,Toy {
// extends를 사용해서 여러개의 인터페이스 확장도 가능함
//Car, Toy 인터페이스가 가지는 속성들을 기본적으로 가지고 있음
}

유니온 타입

| ← 이거

식별 가능한 유니온 타입

교차 타입 Intersection

유니온 타입이 || 이라면 교차타입은 &&

interface Car {
name : string;
start() : void;
}

interface Toy {
name : string;
color : string;
price : number;
}

//Toy와 Car가 가지고 있는 속성을 모두 써줘야함!
const ToyCar : Toy & Car = {
name : "타요",
start(){},
color : "blue",
price : 123456
}
profile
프론트엔드 개발자

0개의 댓글