📚 23.11.09
- TypeScript - 타입 종류, 추론, 단언, 가드, 별칭
타입스크립트
자바스크립트 기반에 정적 타입 문법을 추가한 프로그래밍 언어
타입 종류
- string
- number
- boolean
- { KEY : TYPE } = { KEY : value |
- TYPE[] = [] 혹은 Array<TYPE> = []
- 함수
함수명 : (인자 : 인자의타입) => 반환 타입 = (인자) => { }
혹은함수명 = function (인자: 인자타입) : 반환타입 { }
혹은함수 선언식으로 function (인자: 인자타입): 반환타입 { } - enum
- 역매핑 가능!
- void
값을 반환하지 않는 함수의 반환타입 - 튜플
튜블타입변수명 : [원하는 길이만큼 각 타입] = 값 - never
어떤것도 할당할 수 없는 타입, 혹은 정상적으로 종료되지 않는 함수의 반환타입 - any
어떤것이든 할당할 수 있는 타입
다른 타입에도 할당 가능 - unknown
어떤 것이든 할당할 수 있지만 정확히 무엇인지는 모름
다른 타입헤 할당 불가능 - Union 타입
2개 이상 타입 허용 (or)
TYPE | TYPE | ... - Intersection 타입
2개 이상 타입 병합 (and)
TYPE & TYPE & ...
병합한 타입들을 모두 다 만족해야함
타입 추론
타입스크립트에서 코드를 근거로 타입을 판단.
판단하는 방법
- 초기화된 변수
- 기본값이 지정된 매개변수
- 반환이 있는 함수
타입 추론 덕분에 매번 타입을 지정하지 않아도 된다.
타입 단언과 할당 단언
“개발자가” 타입스크립트에게 타입을 단언해서 알려주는것
- as
- ! (Non-null 단언 연산자)
const btn = document.querySelector('button')
btn.classList.add('btn')
// error : ‘bnt'는 ‘null’일 수도 있습니다. 이런 상황에서 다음과 같이 타입 단언으로 에러를 해결할 수 있다.
- as로 해당 타입으로 단언한다
(btn as HTMLButtonElement).classList.add('btn')- 선언 당시에도 타입으로 단언할 수 있다.
const btn = document.querySelector('button') as HTMLButtonElement- non-null로 단언할 수도 있다.
btn!classList.add('btn')
//여기보단 선언 당시 ! 가 나음- 또한 선언 당시에 단언할 수 있다.
const btn = document.querySelector('button')!
// ! 앞의 코드가 null이 아니다!
// null이 아닌것만 단언. 어느 타입인진 모름~
// 단언해줘서 런타임에서 오류날 수 있음 ->타입가드로 해결!는 특정한 타입으로의 단언이 아닌 null이 아님만을 보증해준다.
++ 타입 단언에 대해 구글링하면서 더 알아본 결과, unknown일떄만 사용하는 것이 좋으며 맹신하지 말아야 한다는 첨언
타입 가드
타입 추론이 가능한 특정 범위(scope) 안에서 타입을 보장
typeof ,instanceof ,in
위와 같은 예시에서,
정말로 'button'요소를 찾지 못했는데, 타입 단언(as나 !)를 하면 ts에선 에러가 안나지만 런타임에서 에러가 난다!!
const btn = document.querySelector('button')
if (btn){ //btn이 null이 아닐 때 실행됨 -> 요소임을 보장
btn.classList.add('btn')
}혹은 더 명시적으로
if (btn instanceof HTMLButtonElement){ // JS에도 유효한 코드
btn.classList.add('btn')
}별도의 함수로 만들 수 있다
단, 변수 is 타입 을 함수의 반환타입으로 지정하여야한다.
타입 별칭
타입 선언부를 type 키워드를 사용한 선언으로 변수처럼 쓸 수 있다.
type MyTypeName = string | number //하나의 타입으로 쓸 수 있음
type MyArray = MyTypeName[]
type UserA = {
name : string
age: number
}
type UserB = {
isValid = boolean
}
type UserX = userA & userB // {name : string , age: number , isValid = boolean }
const a : MyTypeName = 'A'
const b: MyArray = [ 1, 'A', true] //boolean은 못들어옴!
const userA : UserA = {
// 안이 비어도 오류!
// 타입인 UserA의 속성 전부가!!! 있어야함
// 갑이 다른 타입이어도 오류!
}
🤔 오늘 회고
강의는 하루 늦게 들었지만,, 하루를 회고해보자면
종일 과제를 뿌셔보았다.
자유로운듯 자유롭지 않은 클론코딩이어서 나름 재밌었다. JS 같은 SCSS여서 함수화, 변수화를 일부러 많이 많이 해봤다. 너무 어거지로 쓴건 아닐까 하는 고민
Keep
과제를 미리 시작해서 많이 해두어서 조급하거나 힘들진 않았다 !
Problem
강의, 공부, 과제 밸런스를 맞추기가 어렵다..
강의를 들으면서 이해도 잘 되었고 잘 쌓나 싶었는데 막상 하나하나 다 해보려니까 힘들었다.
Try
SCSS모음 정리글을 올려볼까 한다! 올리긴 어설프더라도 정리를 한번 해두어야겠다.
