231109 [Day38] TypeScript 기본 문법(1)
타입스크립트
- 2012년 마이크로소프트에서 발표하였다.
- 자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어이다.
정적 타입의 컴파일 언어
자바스크립트(동적 타입) - 런타임에서 동작할 때 타입 오류 확인
타입스크립트(정적 타입) - 코드 작성 단계에서 타입 오류 확인 => ts를 js로 변환 후, 브라우저나 Node.js 환경에서 동작 시켜야함.
자바스크립트와 완벽 호환
대부분의 플러그인, 라이브러리, 프레임워크가 지원된다.
자바스크립트 문법은 당연하게 가지고 있고 추가적인 문법까지 사용가능하다.
타입 종류
- 문자, 숫자, 불린 타입
=> string, number, boolean
- 객체 타입
=> {KEY : TYPE} = {KEY: VALUE}
obj 변수는 할당연산자(=)로 {a:0} (객체데이터)가 할당되어있다.
할당할 수 있는 타입은 { } 안의 a 속성과 그 속성은 number타입 이어야 한다.
- 배열 타입
TYPE[] = [] // 특정 아이템으로 초기화 안해도 됨.
Array<TYPE> = [] // 이런 패턴으로도 배열 타입을 지정할 수 있다.
- 함수 타입
1) 함수명: (매개변수: 매개변수 타입) => 반환 타입 = 매개변수 => { }
문자 데이터를 받아서 문자 데이터를 반환한다.
함수 자체에 타입을 명시할 수도 있다.
2) 함수명 = function (매개변수: 매개변수 타입) : 반환 타입 { }
함수 선언
3) function 함수명(매개변수: 매개변수 타입) : 반환 타입 { }
- Enum(이넘) 타입
타입 + 값(데이터)의 집합으로 역방향 매핑(reverse mapping) 가능.
enum을 사용하면 인덱스를 지정할 수 있다. 숫자로 지정
Red로 r을 조회하는 것은 가능하지만, r로 Red를 역으로 조회하는 것이 불가능
- Void 타입
값을 반환하지 않는 함수의 반환 타입(undefined)
- Tuple(튜플) 타입
고정된 길이(length)의 배열 타입
변수명: [아이템타입] = [값] // 아이템 타입을 원하는 길이 만큼 ,로 구분해서 작성한다.
push, splice 메서드를 이용하면 에러가 발생하지 않는다.
- Never 타입 (이해가 잘 안됨)
어떤 것도 할당할 수 없는 타입, 정상적으로 종료되지 않는 함수의 반환 타입
- Any 타입
어떤 것도 할당할 수 있는 타입, 다른 타입에도 할당 가능 -> ts가 아닌 js를 쓰는 것과 같다.
- Unknown 타입
어떤 것도 할당할 수 있지만, 정확히 무엇인지 알 수 없는 타입. 다른 타입에는 할당할 수 없다.
다양하게 데이터를 지정하는 것은 가능하지만, 실제로 사용할 때는 조건을 달아서 특정한 타입을 확인할 수 있을 때 사용
- Union(유니언) 타입
2개 이상의 타입이 허용되는 타입
변수명: TYPE | TYPE
- Intersection(인터섹션) 타입
2개 이상의 타입이 병합된 타입
타입 추론
'추론'이란, 어떠한 판단을 근거로 삼아 다른 판단을 이끌어 낸다.
=> 타입스크립트에서는 코드를 근거로 타입을 판단한다.
판단하는 방법
- 초기화된 변수
- 기본값이 지정된 매개변수
- 반환이 있는 함수
=> 타입 추론을 통해 매번 타입을 지정하지 않아도 된다.
타입 단언과 할당 단언
'단언'이란, 주저하지 않고 딱 잘라 말하는 것.
as
! (Non-null 단언 연산자)
1)
as HTMLButtonElement = 버튼 태그선택자로 요소를 찾을 것인데 단언컨대 개발자가 HTMLButtonElement 이다.
! 를 통해 null이 아니라고도 할 수 있음. (어떤 타입인지는 알 수 없으므로 주의)
=> 더이상 btn이 null 일 것이라는 가정은 하지 않는다.
2) val.toFixed(2). 숫자도 올 수 있지만 문자도 올 수 있어서 오류가 난다.
3) json 파싱
4) 값을 선언하고 초기화 하지 않았지만 값을 사용해야할 때 ! 단언연산자를 사용한다.
타입 가드(Guard)
타입 추론이 가능한 특정 범위(scope) 안에서 타입을 보장
typeof, instanceof, in
'button'요소를 찾지 못했는데 타입 단언(as나 !)을 하면 ts에서는 에러가 안나지만 런타임에서 에러가 발생할 수 있다.
if문을 통해 btn이 null이 아니고 요소임을 보장한다.
드래그 부분을 추가하면 더 명시적으로 조건을 작성할 수 있다.
함수를 만들어서 타입 가드로 사용할 수 있다.
반환 타입을 넣어야한다. => 변수명 is 타입
타입 별칭(Alias)
새로운 타입 조합 생성 = 타입에 이름을 부여
type 키워드를 사용해서 선언.
객체 데이터 안에는 타입의 속성이 다 들어가 있어야하고, 비어있으면 오류가 발생한다.
