Chap03 객체와 타입
3-1) 타입스크립트 변수 선언문
(1) 타입스크립트 기본 제공 타입
자바스크립트와 타입 스크립트 타입의 비교
|
유형 |
자바스크립트 타입 |
타입스크립트 타입 |
|
수 타입 |
Number |
number |
|
불리언 타입 |
Boolean |
boolean |
|
문자열 타입 |
String |
string |
|
객체 타입 |
Object |
object |
(2) let과 const 키워드
- ES5 자바스크립트는 variable 앞 세 글자를 딴 var 키워드를 사용해 변수를 선언할 수 있음
- 그러나 var는 다른 프로그래밍 언어와 다르게 동작하기 때문에 ESNext 자바스크립트는 let과 const라는 키워드를 도입해 다른 프로그래밍 언어와 같은방식으로 만듦
☆ let 사용법 – let은 코드에서 그 값이 수시로 변경될 수 있음을 암시
let 변수 이름 [=초깃값]
☆ const 사용법 – const는 코드에서 그 값이 변숫값이 절대 변하지 않는다는 것을 암시
const 변수 이름 = 초깃값
(3) 타입 주석
- 타입스크립트는 자바스크립트 변수 선언문을 확장해 다음과 같은 형태로 타입을 명시할 수 있으며 이를 타입 주석(type annotation)이라고 함
let 변수 이름: 타입 [=초깃값]
const 변수 이름: 타입 = 초깃값
n,b,s는 각각의 타입이 일치하지 않으므로 타입 불일치 오류가 발생한다.
(4) 타입 추론
- 타입스크립트는 자바스크립트와 호환성을 위해 타입 주석 부분을 생략할 수 있다.
- 이 경우 대입 연산자(=) 오른쪽 값에 따라 변수 타입을 지정하며 이를 타입 추론(type inference)라고 함
- 각 변수는 초깃값에 따라 타입을 추론하므로 각 변수는 초깃값에 해당하는 타입으로 지정되며, 이후에는 해당 타입의 값만 저장할 수 있음
(5) any 타입
- 타입스크립트는 자바스크립트와의 호환을 위해 any라는 타입의 이름을 제공
- any 타입은 값의 타입과 무관하게 어떤 종류의 값도 저장 가능
(6) undefined 타입
- 자바스크립트에서 undefined는 값이며, 변수를 초기화하지 않으면 해당 변수는 undefined 값을 가짐.
- 그러나 타입스크립트에서 undefined는 타입이기도 하며 값이 기도 함
Undefined 타입의 예
let u: undefined = undefined
u = 1 // Type '1' is not assignable to type 'undefined' 오류 발생
타입의 상속 관계
Any > (number, boolean, string) , (object) > undefined
(7) 템플릿 문자열
- 타입스크립트에는 변수에 담긴 값을 조합해 문자열을 만들 수 있게 하는 템플릿 문자열(template string)을 제공
- 역따옴표(backtick) `으로 문자열을 감싸고, 변수를 ${}기호로 감싸는 형태로 만들 수 있음
`${변수 이름}`
Template string 예시
let count = 10, message = 'Your account'
let result = `${message} is ${count}`
console.log(result)
3-2) 객체와 인터페이스
- object 타입은 인터페이스와 클래스의 상위 타입으로, number, boolean, string 타입의 값을 가질 수는 없지만, 속성 이름이 다른 객체를 모두 자유롭게 담을 수 있음
Object 타입 예시
let o: object = {name: 'Jack', age: 32}
o = {first: 1, second: 2}
- 단 위의 예시의 경우 o는 항상 name과 age 속성으로 구성된 객체만 가질 수 있으므로 2행에서는 오류가 발생함.
(1) 인터페이스 선언문
- 타입스크립트는 객체의 타입을 정의할 수 있게 하는 interface 키워드를 제공
- 인터페이스는 객체의 타입을 정의하는 것이 목적이므로 다음처럼 객체를 의미하는 중괄호 {}로 속성과 속성의 타입 주석을 나열하는 형태로 사용
interface 인터페이스 이름 {
속성 이름[?]: 속성 타입[,…]
}
- 인터페이스의 목적은 인터페이스 내 속성과 이름이 모두 일치하는 객체만 유효하도록 객체의 타입 범위를 좁히는 데 있다.
(2) 선택 속성 구문
- 인터페이스 설계시 속성에 따라 꼭 필요한 것과 있어도 되고 없어도 되는 형태로 만들고 싶을 때는 선택 속성(optional property)을 사용함
- 선택 속성은 속성 이름 옆에 ?를 붙여서 만듦
선택 속성 예시
interface IPerson2 {
name: string // 필수 속성
age: number // 필수 속성
etc?: boolean // 선택 속성
}
let good1: IPerson2 = {name: 'Jack', age: 32}
let good2: IPerson2 = {name: 'Jack', age: 32, etc: true}
(3) 익명 인터페이스
- 타입스크립트는 interfacㄷ 키워드도 사용하지 않고 인터페이스의 이름도 없는 인터페이스를 만들 수 있으며 이를 익명 인터페이스(anonymous interface)라고 함
익명 인터페이스 예시
let ai: {
name: string
age: number
etc?: boolean
} = {name: 'Jack', age: 32}
- 익명 인터페이스는 주로 다음과 같이 구현시 사용
3-3) 객체와 클래스
(1) 클래스 선언문
- 타입스크립트는 C++나 자바와 같은 객체지향 언어에서 흔히 볼 수 있는 class, private, public, protecte, implements, extend와 같은 키워드를 제공, 문법적인 차이만 있을 뿐 의미는 동일
Class 클래스 이름 {
[private | proteced | public] 속성 이름[?]: 속성 타입[…]
}
(2) 접근 제한자
- 클래스 속성은 public, private, protect와 같은 접근 제한자(access modifier)를 이름 앞에 붙일 수 있음. 생략하면 public으로 간주
(3) 생성자
- 타입스크립트 클래스는 constructor라는 이름의 특별한 메서드를 포함하며, 이를 생성자(constructor)라고 함.
- 다른 언어와 달리 타입스크립트 클래스는 클래스 속성을 선언할 수 있지만, 생성자의 매개변수에 public 같은 접근 제한자를 붙이면 해당 매개변수의 이름을 가진 속성이 클래스에 선언된 것처럼 동작함.
Public을 선언한 Person2와 선언하지 않은 Person3 클래스의 차이점 살펴보기
class Person2 {
constructor(public name: string, public age?: number) {}
}
let jack2 : Person2 = new Person2('Jack', 32)
console.log(jack2)
class Person3 {
name: string
age?: number
constructor(name: string, age?: number) {
this.name = name; this.age = age
}
}
let jack3: Person3 = new Person3('Jack', 32)
console.log(jack3)
(4) 인터페이스 구현
다른 객체지향 언어처럼 타입 스크립트 클래스는 인터페이스를 구현할 수 있으며 implements 키워드를 사용함
class 클래스 이름 implements 인터페이스 이름 {
…
}
인터페이스를 구현할 때 속성을 정의하는 것은 이러한 속성이 있어야 한다는 규약만을 나타내는 것이기 때문에 물리적으로 해당 속성을 만들지 않으므로, 클래스 body 부분에 반드시 인터페이스 속성을 멤버 속성으로 표현해주어야 함
interface IPerson4 {
name: string
age?: number
}
class Person4 implements IPerson4 {
name: string
age: number
}
(5) 추상 클래스
- 타입스크립트는 다른 언어처럼 abstract 키워드를 사용해 추상 클래스를 만들 수 있음
- 추상 클래스는 abstract 키워드를 class 키워드 앞에 붙여서 만들며, 자신의 속성이나 메서드 앞에 abstract를 붙여 나를 상속하는 다른 클래스에서 이 속성이나 메서드를 구현하게 함.
abstract class 클래스 이름 {
abstract 속성 이름: 속성 타입
abstract 메서드 이름() {}
}
(6) 클래스의 상속
- extends 키워드를 사용해 상속 클래스를 만듦
class 상속 클래스 extends 부모 클래스 { … }
(7) static 속성
- 다른 객체지향 언어처럼 타입스크립트 클래스는 정적인 속성을 가질 수 있다.
class 클래스 이름 {
Static 정적 속성 이름: 속성 타입
3-4) 객체의 비구조화 할당문
구조화가 필요한 코드 예
let personName = "Jack"
let personAge = 32
let companyName = 'Apple Company, Inc'
let companyAge = 43
이와 같은 코드는 작성도 번거로울 뿐더러 기능 확장도 어려움, 따라서 인터페이스나 클래스를 사용해 관련 정보를 묶어 새로운 타입으로 표현하는 구조화(structuring)를 사용함
import {IPerson, ICompany} from './IPerson_ICompany'
let jack: IPerson = {name: 'Jack', age: 32},
jane: IPerson = {name: 'jane', age: 32}
let apple: ICompany = {name: 'Apple Computer, Inc', age: 43},
ms: ICompany = {name: 'Microsoft', age: 44}
console.log(jack)
(1) 비구조화란?
- 구조화된 데이터는 어떤 시점에서 데이터 일부만 사용해야 할 때가 있음.
예를 들어 name과 age 속성을 갖고 있는 jack 변수에서 name과 age를 분리해 각각
let name = jack.name, age = jack.age 와 같이 분리해서 적용해 사용하면 jack은 사용하지 않고 name과 age변수만 사용하며 이를 비구조화(destructuring)라고 한다.
(2) 비구조화 할당
- 비구조화 할당은 ESNext 자바스크립트의 구문으로 타입스크립트에서도 사용 가능함
- 객체 뿐 아니라 배열과 튜플에도 적용 가능하며 적용하고 싶은 속성을 중괄호로 묶음
Ex) let {name, age} = jack
Jack의 name과 age 속성을 가진 name, age 변수가 생김
(3) 잔여 연산자
- ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 … 연산자를 제공하며 사용되는 위치에 따라 잔여 연산자(rest operator) 혹은 전개 연산자(spread operator)라고 부름
Ex) 5개 속성을 가지고 있는 변수 address에서 country, city를 제외한 나머지 속성을 별도의 detail이라는 변수에 저장하고 싶다면 잔여연산자를 detail 앞에 붙임
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)
(4) 전개 연산자
- 점3개 연산자가 비구조화 할당문이 아닌 곳에서 사용될 때 전개 연산자(spread operator)라고 함
- 전개 연산자는 객체의 속성을 모두 ‘전개’해 새로운 객체로 만들어 줌
let part1 = {name: 'jane'}, part2 = {age:22}, part3 = {city: 'Seoul', country: 'Kr'};
let merged = {...part1, ...part2, ...part3}
console.log(merged)
3-5) 객체의 타입 변환
(1) 타입 변환
- 타입이 있는 언어들은 특정 타입의 변숫값을 다른 타입의 값으로 변환할 수 있는 기능을 제공하며 이를 타입 변환(type conversion)이라고 함
◈ ‘type conversion’, ‘type casting’, ‘type coercion’의 차이
- type conversion : type casting과 type coercion을 모두 포함하는 의미
- type casting: 명시적 타입 변환(explicit type conversion)을 의미
- type coercion: 암시적 타입 변환(implicit type conversion)을 의미
(2) 타입 단언
- 타입스크립트는 타입 변환이 아닌 타입 단언(type assertion)이라는 용어 사용
① (<타입>객체)
② (객체 as 타입)
- 이들 모두 ES5 자바스크립트 구문이 아니기 때문에 자바스크립트 타입 변환과 구분하기 위해 타입 단언이라는 용어 사용
'TypeScript' 카테고리의 다른 글
| Do it! 타입스크립트 프로그래밍 6장 (0) | 2020.05.06 |
|---|---|
| Do it! 타입스크립트 프로그래밍 5장 (0) | 2020.05.03 |
| Do it! 타입스크립트 프로그래밍 4장 (0) | 2020.04.28 |
| Do it! 타입스크립트 프로그래밍 2장 (0) | 2020.04.25 |
| Do it! 타입스크립트 프로그래밍 1장 (0) | 2020.04.23 |
