3장 객체와 타입

3-1 타입스크립 변수 선언문

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

자바스크립트는 다음 표에서 보는 타입을 기본으로 제공한다. 타입스크립트는 자바스크립트와 호환성을 위해 자바스크립트 타입은 물론 그에 대응하는 타입스크립트 타입 도한 제공한다.

 

유형 자바스크립트 타입 타입스크립트 타입

수 타입	Number	number
불리언타입	Boolean	boolean
문자열 타입	String	string
객체 타입	Object	object

let과 const 키워드

ES5 자바스크립트는 variable의 앞 에 글자를 딴 var라는 키워드를 사용해 변수를 선언할 수 있었다. 아지만 다른 프로그래밍 언어와는 다르게 동작하기 때문에 ESNext 자바스크립트는 let과 const라는 키워드를 도입해 다른 프로그래밍 언어와 같은 방식으로 동작하도록 했다. 즉, var 키워드를 사용하지 말라고 동작한다.

 

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

let 변수이름[=초깃값]

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

const 변수 이름 = 초깃값

타입 주석

타입스크립트는 자바스크립트 변수 선언문을 확장해 다음과 같은 형태로 타입을 명시할 수 있다. 이를 타입 주석이라고 하낟.

let 변수이름 : 타입 [= 초깃값]
const 변수이름 : 타입 = 초깃값

다음은 타입 주석을 붙여 변수를 선언한 예

let n: number = 1;
let b: boolean = true; // or false
let s: string = "hello";
let o: object = {};

타입 추론

타입스크립트는 자바스크립트와 호환성을 위해 타입 주석 부분을 생략할 수 있다. 즉, 연산자 = 오른쪽 값에 따라 변수의 타입을 지정한다. 이를 타입 추론이라 한다.

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

즉, 변수 선언문에 타입 주석을 명시하지 않았지만, 컴파일러가 초깃값에 따라 타입을 추론하므로 각 변수는 초깃값에 해당하는 타입으로 지정된다. 이후 각 변수에는 해당 타입의 값만 저장할 수 있다.

 

any타입

타입스크립트는 자바스크립트와 호환을 위해 any라는 이름의 타입을 제공한다. 즉, 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있다.

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

undefined 타입

자바스크립트에서 undefined는 값이다. 변수를 초기화하지 않으면 해당 변수는 undefined값을 가진다. 그러나 타입스크립트에서 undefined는 타입이기도 하고 값이기도 하다.

let u: undefined = undefined;
u = 1 // Type "1" is not assignable to type "undefined" 오류 발생

u는 undefined 타입으로 선언되었으므로 오직 undefined값만 가질 수 있다.

타입의 상속 관계를 보면 any는 모든 타입의 루트 타입, 즉 최상위 타입이다. 반면에 undefined는 모든 타입의 최하위 타입이다.

 

템플릿 문자열

타입스크립트에는 변수에 담긴 값을 조합해 문자열을 만들 수 있게 하는 템플릿 문자열을 제공한다. 역다옴표로 문자열을 감싸고, 변수를 ${} 기호로 감싸는 형태로 만들 수 있다.

3-2 객체와 인터페이스

object 타입으로 선언된 변수는 number, boolean, string 타입의 값을 가질 수는 없지만, 속성 이름이 다른 객체를 모두 자유롭게 담을 수 있다.

let o:object = {name: "Jack", age: 32}
0 = {first: 1, second: 2}

object 타입은 마치 객체를 대상으로 하는 any 타입처럼 동작한다.

 

인터페이스 선언문

타입스크립트는 객체의 타입을 정의할 수 있게 하는 interface라는 키워드를 제공한다. 객체의 타입을 정의하는 것이 목적이므로 다음처럼 객체를 의미하는 중괄호 {}로 속성의 이름과 타입을 나열하는 형태로 사용한다.

interface 인터페이스 이름{
	속성이름[?]: 속성 타입[...]
}

선택 속성 구문

인터페이스를 설계할 때 어떤 속성은 반드시 있어야 하지만, 어떤 속성은 있어도 되고 없어도 되는 형태로 만들고 싶을 때가 있다. 이러한 속성을 선택 속성이라고 한다.

interface Person{
	name: string;
	age: number;
	etc?: boolean;
}

익명 인터페이스

타입스크립트는 interface 키워드도 사용하지 않고 인터페이스의 이름도 없는 인터페이스를 만들 수 있다. 이를 익명 인터페이스라고 한다. 익명 인터페이스는 주로 다음처럼 함수를 구현할 때 사용된다.

function printMe(me:{name:string, age:number, etc?:boolean}){
	console.log(me.etc ? `${me.name}${me.age}${me.etc}` : `${me.name}${me.age}`
	)
} 
printMe(ai); // Jack 32

3-3 객체와 클래스

클래스 선언문

타입스크립트는 C++나 자바와 같은 객체지향 언어에서 흔히 볼 수 있는 class, private, public, protected, implements, extend와 같은 키워드를 제공한다.

class 클래스 이름{
	[private | protected | public] 속성 이름[?]: 속성 타입[...]
}

접근 제한자

클래스의 속성은 public, private, protected와 같은 접근 제한자를 이름 앞에 붙일 수 있다. 만약 생략하면 모두 public이다.

 

생성자

타입스크립트 클래스는 constructor라는 이름의 특별한 메서드를 포함하는데, 이를 생성자라고 한다.

class Person {
	constructor(public name:string, public age?:number){}
}
let jack = Person = new Person("Jack",32)
console.log(jack) // Person{name:"Jack",age:32}

인터페이스 구현

타입스크립트 클래스는 인터페이스를 구현할 수 있다.

class 클래스 이름 implements 인터페이스 이름{
}

추상 클래스

타입스크립트는 다른 언어처럼 abstract 키워드를 사용해 추상 클래스를 만들 수 있다. 추상 클래스는 다음처럼 abstract 키워드를 class 키워드 앞에 붙여서 만든다. 추상 클래스는 자신의 속성이나 메서드 앞에 abstract를 붙여 나를 상속하는 다른 클래스에서 이 속성이나 메서드를 구현하게 한다.

abstract class 클래스이름{
	abstract 속성 이름 : 속성 타입
	abstract 메서드 이름(){}
}

클래스의 상속

객체지향 언어는 부모 클래스를 상속받는 상속 클래스를 만들 수 있는데, 타입스크립트는 다음처럼 extends 키워드를 사용해 만든다.

class 상속 클래스 extends 부모 클래스{}

static 속성

다른 객체지향 언어처럼 타입스크립트 클래스는 정적인 속성을 가질 수 있다.

class 클래스 이름{
	static 정적 속성 이름 : 속성 타입
}

3-4 객체의 비구조화 할당문

다음 코드는 name과 age라는 단어가 각기 다른 의미로 사용되므로 personName, companyName처럼 이 둘을 구분하고 있다.

let personName = "Jack";
let personAge = 32;

let companyName = "Apple Company, Inc";
let companyAge = 43;

하지만 이런 방식은 작성하기도 번거롭고 기능을 확장하기가 어렵다 따라서 인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현 즉, 구조화하는게 좋다.

export interface IPerson{
	name:string
	age:number
}

export interface ICompany{
	name:string
	age:number
}

이처럼 구조화하면 비슷한 유형의 변수를 쉽게 만들 수 있으므로 코드의 기능 확장이 수월해진다.

 

비구조화란?

구조화된 데이터는 어떤 시점에서 데이터의 일부만 사용해야 할 때가 있다. 예를들어 jack 변수에서 jack이 아닌 jack.name , jack.age 부분을 각각 name과 age 변수에 저장한다면 이 시점부터는 jack변수는 사용하지 않고 그대신 name, age 변수만 사용한다. 이처럼 구조화된 데이터를 분해하는 것을 비구조화라고 한다.

 

비구조화 할당

비구조화 할당을 객체에 적용하려면 얻고 싶은 속성을 중괄호로 묶는다.

let { name, age } = jack

잔여 연산자

ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 … 연산자를 제공한다. 사용되는 위치에 따라 잔여 연산자 혹은 전개 연산자라고 부른다.

let address: any = {
  country: 'Korea',
  city: 'Seoul',
  address1: 'Gangnam-gu',
  address2: 'Sinsa-dong 123-456',
  address3: '789 street, 2 Floor ABC building'
}
const { country, city, ...detail } = address
console.log(detail)

// 결과
{ address1: 'Gangnam-gu',
  address2: 'Sinsa-dong 123-456',
  address3: '789 street, 2 Floor ABC building'
}

 

• 실행 결과를 보면 detail 변수에 country / city를 제외한 나머지 속성이 담겨있다.

전개 연산자

점 3개 연산자가 비구조화 할당문이 아닌 곳에서 사용될 때 이를 전개 연산자라고 한다.

let part1 = { name: 'jane' },
  part2 = { age: 22 },
  part3 = { city: 'Seoul', country: 'Kr' }

let merged = { ...part1, ...part2, ...part3 }
console.log(merged) // { name: 'jane', age: 22, city: 'Seoul', country: 'Kr' }

let coord = { ...{ x: 0 }, ...{ y: 0 } }
console.log(coord) // {x:0, y: 0}

// 결과
{name: 'jane' age: 22 city: 'Seoul', country: 'Kr' 
}

3-5 객체의 타입 변환

타입 변환

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

let person: object = { name: 'Jack', age: 32 }
;
person.name // error

• person 변수의 타입은 object이다. 그런데 object 타입은 name 속성을 가지지 않으므로 오류가 발생한다.

let person: object = { name: 'Jack', age: 32 };

(<{ name: string }>person).name

• person 변수를 일시적으로 name 속성이 있는 타입, 즉 {name:string} 타입으로 변환해 person.name 속성값을 얻게 했다.

타입 단언

타입 단언문은 다음 두 가지 형태가 있다.

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

이들은 모두 ES5 자바스크립트 구문이 아니다. 따라서 자바스크립트의 타입 변환 구문과 구분하기 위해 타입 단언이라는 용어를 사용한다.

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
console.log(name1, name2) // Jack Jack

• INameable 객체로 변환되어 자신에게 담긴 객체의 name 속성값을 얻는다.

이처럼 타입 단언의 두 가지 구문은 서로 형태만 다를 뿐 내용상으로는 같다.