타입스크립트(05)_객체와 타입

Kang Dong Hyun·2022년 11월 2일
0

typescript

목록 보기
5/6

타입스크립트의 타입

JS와 TS의 기본 타입

유형JS타입TS타입
수 타입Numbernumber
불리언 타입Booleanboolean
문자열 타입Stringstring
객체 타입Objectobject

변수 선언

JS는 var키워드를 사용해 변수를 선언할 수 있다. 그런데 var는 다른프로그래밍 언어와는 다르게 동작하기에 let,const키워드를 도입해 다른 프로그래밍 언어와 같은 방식으로 동작하도록 했다. 사실사 ESNext는 var키워드를 사용하지 말라고 권고한다.

let

let으로 선언한 변수는 코드에서 그 값이 수시로 변경될 수 있음을 암시한다.

let 변수이름 [=초기값]

const

const로 변수를 선언할 때는 반드시 초깃값을 명시해야한다. const 변수는 코드에서 변숫값이 절대 변하지 않는다는 것을 암시한다.

const 변수이름 = 초기값

any

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

let a: any = 0
a = 'hello'
a = true
a = {}

undefined

JS에서 undefined는 값이다. 변수를 초기화하지 않으면 해당 변수는 undefined값을 가진다
그러나 TS에서 undefined는 타입이기도 하고 값이기도 하다

let u: undefined = undefined

타입 상속 관계

타입 상속 관계를 따지자면 any는 최상위 타입, undefined는 최하위타입이다.
undefined로 타입을 설정하고 값을 number로 준다면 오류가 발생한다.

타입 주석

TS는 JS변수 선언문을 확장해 다음과 같은 형태로 타입을 명시할 수 있다.

let 변수이름: 타입 = [=초기값]
const 변수이름: 타입 = 초기값
let n: number = 1
let b: boolean = true
let s: string = 'hello'
let o: object = {}

타입 추론

TS는 JS와 호환성을 위해 타입 주석 부분을 생략할 수 있다.

let n = 1
let b = true
let s = 'hello'
let o = {}

템플릿 문자열

TS에서는 변수에 담긴 값을 조합해 문자열을 만들 수 있게 하는 템플릿 문자열을 제공한다.

`${변수 이름}`
let count = 10, message = 'Your count'
let result = `${message} is ${count}`
console.log(result) // Your count is 10

객체와 인터페이스

위 계층도에서 object타입은 인터페이스와 클래스의 상위 타입이다.
object타입으로 선언된 변수는 number,boolean,string타입의 값을 가질 수는 없지만,
다음처럼 속성 이름이 다른 객체를 모두 자유롭게 담을 수 있다.

let o: object = {name: 'Kang', age: 26}
o = {first: 1, second: 2}

이 코드에서 object타입은 마치 객체를 대상으로 하는 any타입처럼 동작한다. TS의 인터페이스 구문은 이렇게 동작하지 않게 하려는 목적으로 고안되었다.

인터페이스 선언문

TS는 객체의 타입을 정의할 수 있게 하는 interface키워드를 제공한다.
다음의 IPerson인터페이스의 목적은 name, age라는 이름의 속성이 둘 다 있는 객체만 유효하도록 객체의 타입범위를 좁히는데 있다.
필수 속성 -> 필수적으로 있어야 유효한 속성
선택 속성 -> 있어도 없어도 되는 속성

interface IPerson {
  name: string //필수속성
  age: number //필수속성
  etc?: boolean // 선택속성 -> 있어도 되고 없어도 되는 속성
}

익명 인터페이스

TS에서는 interface키워드를 사용하지 않고 인터페이스의 이름도 없는 인터페이스를 만들 수 있다.

let ai: {
  name: string
  age: number
  etc?: boolean
} = {name: 'Kang', age: 26}

클래스 선언문

TS는 객체지향언어에서 흔히 볼 수 있는 class, private, pulic, protected, implements, extend와 같은 키워드를 제공한다.

class Person1{
  name: string
  age: number
}

인터페이스 구현

다른 객체지향언어와 마찬가지로 TS클래스는 인터페이스를 구현할 수 있다.
클래스가 인터페이스를 구현할 때는 implements 키워드를 사용한다.
주의할 점은 클래스 안에는 반드시 인터페이스가 정의하고 있는 속성을 멤버속성으로 포함해야 한다.

interface IPerson4 {
    name: string
    age?: number
}

class Person4 implements IPerson4 {
    name: string
    age: number
}

추상 클래스

추상클래스는 자신의 속성이나 메소드 앞에 abstract를 붙여 나를 상속하는 다른 클래스에서 이 속성이나 메소드를 구현하게 한다.
다음 AbstractPerson5는 name속성앞에 abstract가 붙었으므로 new연산자를 적용해 객체를 만들 수 없다.

abstract class AbstractPerson5{
  abstract name: string
  constructor(public age?: number) {}
}

클래스의 상속

TS에서는 다음처럼 extends키워드를 통해 상속클래스를 만들 수 있다.

class Person5 extends AbstractPerson5{
  constructor(public name: string, age?: number) {
    super(age)
 	 }
}
let kang5: Person5 = new Person5('Kang', 26)
console.log(jack5)
profile
초보개발자의 스터디공간

0개의 댓글