Typescript

TypeScript - 객체와 타입

규몽 2021. 3. 23. 21:48

 

TypeScript 객체와 타입을 공부하고 기록합니다.


타입 스크립트 기본 제공 타입

 

Javascript와는 다르게 소문자

  • 수타 입: number
  • 불리언 타입: boolean
  • 문자열 타입: string
  • 객체 타입: object 

타입 주석

 

타입 스크립트는 자바스크립트 변수 선언문을 확장해 다음과 같이 형태로 타입을 명시할 수 있습니다.

let으로 선언한 변숫값은 자바스크립트와는 다르게 타입 주석으로 명시한 타입에 해당하는 값으로만 바꿀 수 있습니다.

 

let n: number = 1
leb b: boolean = true
let s: string = "hello"
let o: object = {}

 

타입 추론

 

타입 스크립트는 자바스크립트와 호환성을 위해 타입 주석 부분을 생략할 수 있습니다.

타입 스크립트 컴파일러는 대입 연산자 = 오른쪽 값에 따라 변수의 타입을 지정

 

let n = 1  // n의 타입을 number로 판단
let b = true // b의 타입을 boolean으로 판단
let s = "hello" // s의 타입을 string으로 판단
let o = {} // o의 타입을 object로 판단

 

any 타입

 

any타입은 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있습니다.

자바스크립트와 호환을 위해 제공

 

let a: any = 0
a = "hello"
a = {}

 

undefined 타입 

 

자바스크립트에서 undefined는 값인데 반해 타입 스크립트에서는 undefined는 타입이기도 하고 값이기도 함

 

let u: undefined = undefined
u = 1 // Type error

 

타입 계층

 

 

타입의 상속 관계 

 

  • any 최상위 타입
  • object에서 interface, class 등 파생 
  • undefined 최하위 타입

객체와 인터페이스

 

object 타입은 인터페이스와 클래스의 상위 타입

object 타입으로 선언된 변수는 속성 이름이 다른 객체를 모두 자유롭게 담을 수 있음 like any 타입

 

그래서 타입 스크립트의 인터페이스 구문은 이렇게 동작하지 않게 하려는 목적으로 고안됨

 

인터페이스 선언문

 

interface 인터페이스 이름 {
	속성 이름: 속성 타입
}

 

Man 인터페이스는 name과 age라는 속성이 둘 다 있는 객체만 유효하고 job 같은 경우 선택 속성으로 있어도 되고 없어도 된다. 선택 속성은 속성 이름 뒤에 물음표 기호를 붙여서 만든다.

 

interface Man {
	name: string
    age: number
    job?: string
}

let mingyu: Man = {name:"mingyu, age:24}

let gyu = {name:"gyu"} // error

let gu = {} // error

let gyugyu = {
 name:"gyugyu",
 age:20,
 job:"student",
 gender: "male"
 } // error gender 속성이 있어서 에러

 

익명 인터페이스

 

interface 키워드도 사용하지 않고 인터페이스의 이름도 없는 인터페이스

주로 함수를 구현할 때 사용된다.

 

let mingyu:{
  name: string
  age: number
} = {name:"mingyu age:24}

function a(me: {name: string, age: number}) {
 console.log( `${me.name} ${me.age}`)
 }
 
 a(mingyu) // mingyu 24

타입 단언

 

특정 타입의 변숫값을 다른 타입의 값으로 변환

자바스크립트의 타입 변환 구문과 구분하기 위해서 타입 단언이라는 용어 사용

(<타입>객체)
(객체 as 타입)

interface A {
	name:string
}

let obj: object = {name:"mingyu"}

let name1 =(<A>obj).name
let name2 = (obj as A).name

console.log(name1, name2) // mingyu mingyu