💻 들어가며
타입스크립트 학습 이유
나의 첫 프로그래밍 언어는 대학에서 컴퓨터언어 강의에서 배운 c언어다.
그리고 42서울 라피신에서 c로 과제를 진행했었어서 정적타입 언어에 익숙한 상태였다.
그러다보니 타입을 지정해주지 않아도 되는 자바스크립트는 편리하게 느껴지면서도
한편으로는 이렇게 자동으로 타입이 지정되도 괜찮을까 걱정이되기도했다.
그러던와중에 프로젝트에서 필터 기능과
원티드 과제의 로그인 컴포넌트에서 api함수를 호출할 때
인자의 타입에서 에러가 나와 수정을 한 경험이 있었던 이후로
실행한 후 에러를 뱉는게 아니라 잘못된 코드를 작성했을때 진작에 에러로 알려줬다면
쉽게 수정할 수 있었을 것 같다는 생각이 들었고 타입 지정의 필요성을 느꼈다.
그리고 수풀 프로젝트에 리팩토링에 사용할 겸 앞으로 사이드로 프로젝트 만들어볼때도
타입스크립트를 알면 유용할 것 같다 싶어서 타입스크립트를 배워보기로했고
복습도 할 겸 기록도 해둘 겸 포스팅하기로했다.
📗 Javascript의 타입 불안정성
1. 서로 다른 형끼리 연산을 하는데 타입에러 없이 값이 나옴
2. 필요한 인자가 다 들어오지 않았음에도 에러 없이 함수 실행이 됨
3. 런타임 에러만 발생 (실행전에 에러를 알려주지않음)
다른 정적타입 언어였다면 객체에 asd라는 key가 없다는 것을 실행전에 에러를 띄워주고 실행도 안 됨
즉, 자바스크립트는 실행을 해야 오류가 나는지 확인을 해볼 수 있다는 특징이 있음
📗 TypeScript 설치 및 컴파일
1. TypeScript 설치하기
npm i -g typescript2. TypeScript 파일 Javascript 로 컴파일
tsc 파일명.ts
자바스크립트는 코드가 한 줄씩 실행되는 인터프리터 언어이지만
타입스크립트를 사용하면 다른 컴파일 언어처럼 컴파일하는 과정이 추가되고
이 과정에서 타입에 에러가 있으면 아예 실행할 수 없도록 막는다.
📗 TypeScript에서 에러
1. 연산이 불가능한 경우
위에서 Javascript로 작동했을 때 '[] + true'가 잘 실행되었지만 TypeScript에서는 에러를 내고있음
2. 함수 선언 및 호출
함수의 매개변수에 타입을 지정해주지 않을 경우와
함수를 호출할 때 인자의 갯수가 일치하지 않거나 타입이 틀릴 경우 에러가 발생함
📗 JavaScript에는 없는 기능들
1. 원시자료형 타입 지정
let 변수명 : 타입 = 타입에 맞는 값;
변수 a 타입을 string 로 지정했는데 number 타입 값을 할당하면 에러를 낸다
2. 배열(Array) 타입 지정
let 변수명 : 타입[] = [];
number 값만 받는 배열에 string을 push 하려고하자 오류 발생
3. 객체(Object) 타입 지정
let 객체명 : {
key값 : 값의 타입
} = {
key값 : value값
}
3.1 선언된 key에 값이 할당되지 않을 경우
❌ 타입이 선언된 키값이 들어오지 않을 경우 에러를 낸다.
✅ 선언한 key값에 할당된 value가 없을경우 ? 옵션인자를 붙여서 에러를 제거할 수 있다.
3.2 객체 키값이 undefined일 경우
❌ age에 할당된 값이 없어 undefined일 경우
4. 타입을 변수에 할당하기 (Alias 타입) - 재사용가능한 타입
type 타입명 (대문자 시작) = number;type 타입명(대문자 시작) = {
key값 : 타입
}
5. 함수 retrun 값 타입 지정
function 함수명(매개변수:매개변수의 type) : return값의 type {
return (리턴값)
}
❌ playerMaker 함수에는 age라는 key가 없으므로 에러 발생
✅ playerMaker 함수의 리턴값의 타입이 Person이라는 것이라 명시함으로써
이후에 age key추가가 가능하게 됨
6. readonly : 읽기전용 변수 생성(변수의 불변성을 지킬수 있는 설정)
읽기전용 변수를 변경하려고 하면 에러 발생
let 변수: readonly 타입 = 값;
❌ name key 값은 readonly 설정되어서 수정 불가
❌ arr readonly 설정되어서 수정 불가
✅ readonly 배열에 배열 메소드 사용가능함 변수에 영향 없음
7. 배열의 각 요소에 타입 지정
let arr: [타입, 타입, 타입] = [값, 값, 값]
8. any : 타입스크립트의 제약을 없애는 타입
let 변수명 : any = 어떤 타입이든 들어올 수 있음
any를 사용하면 타입스크립트에서 허용하지 않은 연산까지 가능하게된다
📗 TypeScript만의 특별한 타입
1. unknown : api 통신시에 응답으로 어떤 타입의 자료형이 넘어오는지 모를때 사용
❌ 변수 a의 타입이 unkown이기 때문에 조건문으로 타입을 판별해야지만 사용가능함
✅ unknown 타입인 변수 a의 타입을 조건문으로 타입을 판변해주면 사용가능
2. void : 함수가 아무것도 리턴하지 않을 때 사용하는 타입
3. never: 에러를 내야하는 상황에 사용하는 타입, 사용할 수 없도록 막음
'TypeScript' 카테고리의 다른 글
| [TypeScript] TS class 사용하기 (0) | 2022.11.01 |
|---|---|
| [TypeScript] 함수 타입 작성 (0) | 2022.10.23 |