자바스크립트와 타입스크립트의 기본타입
유형 자바스크립트 타입 타입스크립트 타입
수 타입 Number number
불리언타입 Boolean boolean
문자열타입 String string
객체타입 Object object
let과 const 키워드
ES5 자바스크립트는 variable의 앞 세글자를 딴 var 라는 키워드를 사용해 변수를 선언할 수 있습니다. 그런데 var는 다른 프로그래밍 언어와는 다르게 동작합니다. 이 때문에 ESNext자바스크립트는 let과 const라는 키워드를 도입해 다른 프로그래밍 언어와 같은 방식으로 동작하도록 함
const로 변수를 선언할 대는 반드시 초깃값을 명시해야함
const num = 1
타입 주석
타입스크립트는 자바스크립트 변수 선언문을 확장해 다음과 같은 형태로 타입을 명시할 수 있습니다. 이를 타입 주석이라고 합니다.
let 변수 이름 : 타입 [=초깃값]
const 변수이름: 타입 = 초깃값
let n : number = 1
let b : boolean = true
let s : string = 'hello'
let o : obejct = {}
타입스크립트는 자바스크립트와 다르게 let으로 선언한 변숫값은 타입 주석으로 명시한 타입에 해당하는 값으로만 바꿀 수 있습니다.
타입 추론
타입스크립트는 자바스크립트와 호환성을 위해 타입 주석 부분을 생략할 수 있습니다. 타입스크립트 컴파일러는 다음과 같은 코드를 만나면 대입 연산자 = 오른쪽 값에 따라 변수의 타입을 지정합니다. 이를 타입 추론이라고 합니다.
let n = 1 // n의 타입을 number로 판단
let b = true // b의 타입을 boolean으로 판단
let s = 'hello' // s의 타입을 string으로 판단
let o = {} // o의 타입을 object로 판단
any 타입
타입스크립트는 자바스크립트와 호환을 위해 any라는 이름의 타입을 제공합니다. 다음 코드에서 변수 a는 타입이 any이므로 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있습니다.
let a : any = 0
a = 'hello'
a = true
a = {}
undefined 타입
자바스크립트에서 undefined는 값입니다. 변수를 초기화하지 않으면 해당 변수는 undefined값을 가집니다. 그러나 타입스크립트에서 undefined는 타입이기도하고 값이기도 합니다
let u : undefined = undefined
변수 u는 undefined 타입으로 선언되었으므로 오직 undefined 값만 가질수 있습니다.
템플릿 문자열
타입스크립트에는 변수에 담긴 값을 조합해 문자열을 만들 수 있게하는 템플릿 문자열을 제공
객체와 인터페이스
object 타입으로 선언된 변수는 number, boolean , string 타입의 값을 가질 수는 없지만, 다음처럼 속성 이름이 다른 객체를 모두 자유롭게 담을 수 있습니다.
let o : object = { name: 'Jack' , age: 32}
o = {first : 1, second: 2}
이 코드에서 object 타입은 마치 객체를 대상으로 하는 any 타입처럼 동작합니다 타입스크립트의 인터페이스 구문은 이렇게 동작하지 않게 하려는 목적으로 고안되었습니다. 즉, 변수 o 에는 항상 name 과 age 속성으로 구성된 객체만 가질 수 있게 해서 02행과 같은 코드는 오류가 발생하게 합니다.
인터페이스 선언문
타입스크립트는 객체의 타입을 정의할 수 있게 하는 interface라는 키워드를 제공합니다.
인터페이스는 객체의 타입을 정의하는 것이 목적이므로 다음처럼 객체를 의미하는 중괄호 {}로 속성의 이름과 타입을 나열하는 형태로 사용합니다. 다음은 인터페이스의 내용을 한 줄로 표현할 때의 구문입니다.
interface 인터페이스 이름 {
속성이름[?]: 속성타입[,...]
}
인터페이스 구문 예
interface IPerson {
name : string
age: number
}
IPerson 인터페이스의 목적은 name과 age라는 이름의 속성이 둘다 있는 객체만 유효하도록 객체의 타입 범위를 좁히는데 있습니다.
선택 속성 구문
인터페이스를 설계할 때 어떤 속성은 반드시 있어야 하지만, 어떤 속성은 있어도 되고 없어도 되는 형태로 만들고 싶을 때 -> 선택 속성(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}
익명 인터페이스
타입스크립트는 interface 키워드도 사용하지 않고 인터페이스의 이름도 없는 인터페이스를 만들수 있음
이를 익명 인터페이스라고 합니다
예)
let ai: {
name : string
age: number
etc?:boolean
} = {name: 'Jack' , age: 32}
