TypeScript 개념 - 1
* 출처 : https://github.com/ZeroCho/ts-all-in-one
* 타입스크립트는 최종적으로 자바스스크립트로 변환함
* tsc 기능
- type을 검사
- 타입스크립트를 자바스크립트로 변환(설사 오류가 있더라도 진행됨)
- 자바스크립트로 변환 시 콜론, 제너릭, 타입인터페이스, 타입들, as는 변환 시 사라짐
* 타입스크립트는 자바스크립트에서 변수, 속성, 매개변수, 리턴값에 타입을 붙인 것
* 타입스크립트가 추론하는 타입은 타이핑하지 않고, 추론하지 못하는 타입은 타이핑할 것
* 자바스크립트에 비해서 자유도가 확 줄어듦(ex: 변수에 문자열을 넣었다가 숫자로 바꾸는 등의 행동 어려워짐)
* any를 최대한 쓰지 않는 것을 목표로 할 것
* !보단 if문을 위주로 쓸 것
* 템플릿 리터럴타입(기존 typescript의 string liter type을 기반으로 새로운 타입을 만드는 도구) 타입이 존재
참고 : https://toss.tech/article/template-literal-types
* 객체는 상세할수록 더 좁은 타입
type A4 = {name: string};
type B4 = {age: number};
type AB4 = A4 | B4
//객체는 상세할수록 좁은 타입
type C3 = {name: string , age: number}
* type과 interface 구분하기
참고 : https://yceffort.kr/2021/03/typescript-interface-vs-type
- interface : 타입과 마찬가지로 객체의 타입의 이름을 지정하는 또 다른 방법
- type과 interface의 차이점 :
▶ type은 새로운 속성을 추가하기 위해서 다시 같은 이름 선언 불가, interface는 항상 선언적 확장 가능
▶ interface는 객체에서만 사용 가능, interface끼리는 서로 합쳐짐
//type
type A = { a: string };
const a: A = { a: 'hello' };
//interface
interface B { a: string }
// const b: B = { a: 'hello' }; //interface B를 한 번 더 추가 시 오류로 나옴
// type A = {b: string} //중복이라고 나옴
interface B { b: string }
const b: B = {a: "hello", b: "typescript"}
* union, intersection
참고 : https://velog.io/@soulee__/TypeScript-Union-Type
- union : 자바스크립트 연산자 OR연산자 같이 'A' 거나 'B'이다 (| 사용)
- union 장점 : 타입스크립트 이점을 살려서 동작 가능
- intersection type : 여러 타입을 모두 만족하는 하나의 타입
type A = {
a: string;
}
type B = {
b: string;
}
const aa: A | B = { a: 'hello', b: 'world' };
const bb: A & B = { a: 'hello', b: 'world' };
* 객체 리터럴은 잉여 속성 검사가 있음
- 객체 리터럴 : 객체 생성 방식 중 간단한 방식, 컨텐츠를 그대로 대입
참고 : https://velog.io/@seeh_h/%EA%B0%9D%EC%B2%B4-%EB%A6%AC%ED%84%B0%EB%9F%B4
참고 : https://greatpapa.tistory.com/162?category=559680
interface A {
a: string;
}
const obj1: A = { a: string, b: string }; // b에 대해서 잉여속성 검사를 한다. (바로 대입할 때)
// b 타입이 없다고 나온다.
const obj2 = { a: "hello", b: "world" };
const obj3: A = obj2; // 잉여 속성 검사를 하지 않는다.