본문 바로가기

typescript

타입스크립트(TypeScript) 객체와 타입

반응형

오늘은 타입스크립트(TypeScript)의 객체와 타입에 대해서 살펴보겠습니다.

 

* 타입 주석

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

let 변수 이름: 타입 [= 초깃값]
const 변수 이름: 타입 = 초깃값
let n: number = 1;
let b: boolean = true; // 혹은 false
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 타입 

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

 

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

 

* undefined 타입 

- 자바스크립트에서 undefined는 값입니다. 

 

* 인터페이스 선언문

- 타입스크립트는 객체의 타입을 정의할 수 있게 하는 interface라는 키워드를 제공합니다.

- 인터페이스는 객체의 타입을 정의하는 것이 목적

 

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

 

* 선택 속성

- 어떤 속성은 있어도 되고 없어도 되는 형태로 만들고 싶을 때가 있습니다. 

- 이러한 속성을 선택 속성이라고 합니다.

interface IPerson {
  name: string // 필수 속성
  age: number // 필수 속성
  etc?: boolean // 선택 속성
}

 

* 익명 인터페이스 

- interface 키워드도 사용하지 않고 인터페이스의 이름도 없는 인터페이스를 만들 수 있습니다. 이를 익명 인터페이스(anonymous interface)라고 합니다.

 

let ai: {
  name: string
  age: number
  etc?: boolean
} = {name: 'Jack', age: 32}

 

* 클래스 선언문 

class Person1 {
  name: string
  age?: number
}

  - 접근 제한자 : 클래스의 속성은 public, private, protect와 같은 접근 제한자(access modifier)를 이름 앞에 붙일 수 있습니다. (만약 생략하면 모두 public으로 간주합니다)

 

* 인터페이스 구현

interface IPerson4 {
  name: string
  age?: number
}

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

 

* 타입 단언

  - 타입이 있는 언어들은 특정 타입의 변숫값을 다른 타입의 값으로 변환할 수 있는 기능을 제공합니다. 

  - 두 가지 형태가 존재합니다.

 

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

 

export default interface INameable {
  name: string
}

import INameable from './INameable';
let obj: object = {name: 'Jack'};

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

 

반응형

'typescript' 카테고리의 다른 글

프론트엔드 webpack + typescript 설정  (0) 2021.09.17
타입스크립트 프로젝트 만들기  (0) 2021.08.15