반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- axios
- 백준 #직각삼각형
- 이친수
- 코드스테이츠 #알고리즘 #그리디
- 노마드 코더 #타입스크립트 #typescript #class
- npm #not being able to find a file #npm install Error
- React-Query
- React #리액트 이벤트 주기 #리액트 이벤트
- 백준 #적록색약
- html entities
- raect typescript #react #typescript #styled-component
- #useRef #언제 쓰는데?
- React #effect hook #useEffect
- donwstream #upstream #origin
- useState #Hooks
- RateLimit
- 빡킹독
- interceptors
- react #useCallback #react Hook
- react
- DP #c++
- 버블링 #갭쳐링 #이벤트 #JS
- 얕은 복사 #깊은 복사 #shallow copy #deep copy
- JWT #토큰 #refreshToken #accessToken #Token #token #localStorage #sessionStorage
- react fragment
- React #Hook rules #Hook 규칙
- 플로이드 #c++
- React #controlled component #비제어 컴포넌트 #제어 컴포넌트
- rate limit
- 다익스트라 #파티 #백준
Archives
- Today
- Total
꿈꾸는 개발자
2장 타입 시스템 본문
2.1 타입의 종류
- 타입: 값의 형태에 대한 설명 ⇒ 형태: typeof 연산자가 설 명하는 것을 의미
- 타입스크립의 가장 기본적인 타입은 JS의 일곱 가지 기본 원시 타입과 동일
- null
- undefined
- boolean
- string
- number
- bigint
- symbol
let bestSong= Math.random()>0.5 ? "chain of fools": "respects";
- 위는 무조건 string이기 때문에 type은 string으로 표시됨
2.1.1 타입 시스템
- 타입 시스템은 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이다
- 기본적인 타입 시스템의 작동 규칙:
- 코드를 읽고 존재하는 모든 타입과 값을 이해함
- 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다.
- 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인
- 값의 사용법이 타입과 일치하지 않으면 사용자에게 요류를 표시
let firstName= " whitney";
firstName.length();
- 오류 표현 순서는 다음과 같다
- 코드를 읽고 firstName이란 변수를 이해
- 초깃값이 “whitney”이므로 fistName이 string 타입이라고 결론
- firstName의 .length 멤버를 함수처럼 호출하는 코드를 확인
- string의 length 멤버는 함수가 아닌 숫자라는 오류를 표시함 ⇒ 즉 함수처럼 호출 불가!
2.1.2 오류 종류
- 구문 오류: 타입스크립트가 JS로 변환되는 것을 차단한 경우
- 타입 오류: 타입 검사기에 따라 일치하지 않는 것이 감지되는 경우
구문 오류:
- 타입스크립트가 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생 ⇒ 타입스크립트가 파일에서 자바스크립트 파일을 생성할 수 없도록 차단함. ⇒ 물론 설정에 따라서 변환은 가능 하지만 결과값은 예상과 다름 주의!
타입 오류;
- 타입스크립트 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생 ⇒ JS로 변환되는 것 은 차단하지 않음 ⇒ BUT, 출둥 or 예기치 못한 작동 발생 가능
2.2 할당 가능성
- 타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정함 ⇒ 해당 변수에 새로운 값이 할당될 경우 새롭게 할당된 값의 타입이 변수의 타입과 동일한지 확인함
let firstName "hoin";
firstName="Joan";
let lastName ="King";
lastName=true; //처음에 입력했던 타입과 다른 타입은 입력 불가!
- 할당 가능성: 타입스크립트에서 함수 호/변수 값 제공 여부 확인 (객체를 비교할 때 중요하게 작용함)
2.2.1 할당 가능성 오류 이해하기
“Type … is not assignable to type….”타입스크립트 코드를 작성할 때 직면하게 되는 일반적인 오류 중 하나
- 첫 번째 type은 코드에서 변수에 할당하려고 시도하는 값
- 두 번째 type은 값이 할당되는 변수
2.3 타입 애너테이션
- 초깃값이 없는 경우 타입 파악 시도X ⇒ 암묵적인 any 타입으로 간주함
- 진화하는 any타입 : 초기 타입을 유츄할 수 없는 변수
let hellor; //type:any
hellor= "Joan Jett"; //type: string
hellor.toUpperCase(); //가능
hellor=19.58;
hellor.toPrecision(1); //가능
hellor.toUpperCase(); // 에러 발생!
- any 타입은 타입스크립트의 타입 검사 목적을 부분적으로 무용지물로 만듦 ⇒ 어떤 값인지 알고 있을 때에만 가장 잘 작동한다.
- 타입 애너테이션(type annotation): 초깃값을 할당하지 않 고도 변수의 타입을 선언할 수 있는 구문
let hellor:string;
hellor="asdlfkasldf";
//지정된 타입 외의 값을 넣게 되는 경우 에러 발생
- TS에만 존재 런타임 코드에 영향X ⇒ 유효한 JS구문X ⇒ tsc 명령어를 실행해 JS코드로 컴파일하면 해당 코드는 삭제
"use strict";
let hellor;
hellor = "asdlfkasldf";
- 위처럼 트렌스파일링 됨
2.3.1 불필요한 타입 애너테이션
- 타입 애너테이션은 TS가 자체적으로 수집할 수 없는 정보를 TS에 제공 가능 ⇒ 타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션 사용 가능
let hellor:string="asdlfkasldf"; //해당 코드의 경우 중복된 정보를 TS에게 준다
let firtName:string = 42; // 에러 발생 ( 타입 오류)
- 아무것도 변하지 않는 변수에는 타입 애너테이션을 추가하지 않는 것을 권장
- 코드 문서화/타입 변경 실수 방지를 위해 변수에 명시적으로 타입 애너테이션을 포함하는 것은 경우 따라 유용함
2.4 타입 형태
- TS는 객체에 어떤 멤버 속성이 존재하는지 앎 ⇒ 코드에서 변수 속성에 접근하는 경우 해당 변수 타입이 존재하는지 확인함
let hellor="asdlfkasldf";
hellor.length; //속성 접근 가능
hellor.push("1") //해당 속성이 없다고 에러 발생
- 객체인 경우:
let cher={
firstName: "helloworld",
lastName: "hoin",
}
cher.middleName; // Error: 해당 객체에 존재하지 않음을 표시함 JS에서는 임의로 생성 가능했음!
2.4.1 묘듈
- 모듈: export/import가 있는 파일
- 스크립트: 모듈이 아닌 모든 파일
- TS에선 최신 모듈 파일을 기존 파일과 함께 실행 가능
Reference:
조시 골드버그, 러닝 타입스크립트, 고승원 옮김, 2023