Literal Type
- 타입 스크립트에서는 number, string 등만 유효한 타입이 되는 것이 아니다.
- 일반 글자나 숫자 등도 타입이 될 수 있다.
let name : 'jth' // 'jth' 타입
let age : 25 // 25 타입이렇게 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을
literal type이라고 부른다. 더 엄격한 쉴드 일지도? 물론 union 타입처럼 | 기호를 사용할 수도 있다!
const
자바스크립트의 const 도 상수값을 저장하기 위해 사용하는데 비슷한 느낌 아닐까?
- const로는 변하는 중요한 정보를 표현할 수 없다. 예를 들면
const name = 'jeong' | 'taeho'이런 형식은 자바스크립트에선 불가능하다. - const의 업(옆)그레이드? 쯤으로 생각하자!
as const 문법
let answer = { school: "Hayo" }
function result(x: "Hayo") {
}
result(answer.school) // 오류위 코드에서는 오류가 발생한다. 분명 answer.school의 값은 Hayo 인데 오류가 발생하는 이유는 answer.school에 마우스를 갖다대보면 알 수 있듯이 저건 string 타입이지 Hayo 타입이 아니기 때문이다.
지금까지 배웠던 해결방법
- 타입을 생성할 때 제대로 지정해주기
let answer :{school : "Hayo"}= {
school: "Hayo",
}
function result(x: "Hayo") {
}
result(answer.school)- Assertion 사용
let answer = {
school: "Hayo",
}
function result(x: "Hayo") {
}
result(answer.school as "Hayo")새로운 해결방법
as const사용
let answer = {
school: "Hayo",
} as const
function result(x: "Hayo") {
}
result(answer.school)as const를 사용하면 타입을 Object의 value 값으로 변경해준다.- Object 안의 모든 속성을
readonly로 바꿔준다. 즉 속성 변경이 불가능 한 상태로 만들어준다.
함수와 메소드에 type alias 지정하기
함수
type NewType = (num : number) => number
const result :NewType = function(x){
return x * 2
}
result(2)위 코드처럼 화살표 함수를 사용하요 () => 타입 형식으로 작성한다.
- 함수 선언식
function 함수이름(){}이 아니라 위처럼 함수 표현식으로 작성해야 한다.
methods
- 함수와 비슷하다.
type PersonType = {
name: string
age: number
nextNumber: (num: number) => number
changeName: () => void
}
const newPerson: PersonType = {
name: "jth",
age: 1,
nextNumber: num => {
return num + 1
},
changeName: () => {},
}
newPerson.nextNumber(2)interface
interface는 Object 자료형에 사용 가능하다.- Object 자료형의 타입을 편리하게 지정 가능하다.
interface Square {
color :string,
width :number,
}
const 사각형 :Square = { color : 'red', width : 100 } 코드를 보면 type alias와 기능이나 코드가 비슷하다.
extends
- 사람과 동물 인터페이스가 필요하다고 가정해보자.
- 사람에는 name, age 속성이 필요하고 동물에는 name 속성이 필요하다.
interface Animal {
name :string,
}
interface Person extends Animal{
age :number,
}
const cat :Animal = {name : 'reo'}
const person1 :Person = {name : 'jth', age: 30}extends 를 사용해 Animal에 사용된 name 속성을 Person에도 적용시킬 수 있다.
type 키워드와의 차이점
type alias와interface는 거의 똑같은 기능을 제공하지만extends에서 차이가 있다.
interface의 경우
interface Animal {
name :string,
}
interface Person extends Animal{
age :number,
}위의 코드처럼 extends를 진행한다.
type alias의 경우
type Animal = {
name :string
}
type Person = Animal & { age :number }& 기호를 사용해서 object를 합칠 수 있다. 합집합 처럼 생각하자!
&기호를 사용하는 걸 intersection 이라 부르는데 extends와 유사하게 사용가능하다.interface에서도 사용 가능
📌 extends 쓸 때 타입끼리 중복속성이 발견될 경우 에러가 발생하지만 & 쓰면 때에 따라 아닐 수도 있다.
타입 이름을 중복 선언
- interface의 경우 타입이름 중복선언을 허용한다. 중복 시에 extends 한 것처럼 작용한다.
(장점) type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 내가 덮어쓰기, override 하기 편리하다.
- type의 경우 중복선언을 허용하지 않는다. 더 엄격하다고 생각할 수 있다.
일반적인 상황에선 type 키워드 자주 활용하면 되는데 다른 사람이 내 코드를 이용하는 상황이 많으면 interface로 유연하게 만드는게 좋다.. 그 이유에서 타입스크립트로 작성된 라이브러리들은 interface로 타입 정해놓은 곳이 많다. 혹은 object 자료형은 전부 interface로 만들고 다른 자료형은 type 키워드로 만들고 이런 것도 가능하다. 기준을 잘 세우고 만들어보자!
