TypeScript 개념 - 1

 

* 출처 : https://github.com/ZeroCho/ts-all-in-one

GitHub - ZeroCho/ts-all-in-one

 

 

* 타입스크립트는 최종적으로 자바스스크립트로 변환함

 

* tsc 기능

- type을 검사

- 타입스크립트를 자바스크립트로 변환(설사 오류가 있더라도 진행됨)

- 자바스크립트로 변환 시 콜론, 제너릭, 타입인터페이스, 타입들, as는 변환 시 사라짐

 

 

* 타입스크립트는 자바스크립트에서 변수, 속성, 매개변수, 리턴값에 타입을 붙인 것

 

* 타입스크립트가 추론하는 타입은 타이핑하지 않고, 추론하지 못하는 타입은 타이핑할 것

* 자바스크립트에 비해서 자유도가 확 줄어듦(ex: 변수에 문자열을 넣었다가 숫자로 바꾸는 등의 행동 어려워짐)

* any를 최대한 쓰지 않는 것을 목표로 할 것

* !보단 if문을 위주로 쓸 것 

* 템플릿 리터럴타입(기존 typescript의 string liter type을 기반으로 새로운 타입을 만드는 도구) 타입이 존재

참고 : https://toss.tech/article/template-literal-types

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

Home

- 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

[TypeScript] 유니온 타입과 인터섹션 타입 (Union Type & Intersection Type) #4

- 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 

[TypeScript] 잉여 속성 검사, void, 타입 선언(declare), 타입 가드

interface A {
  a: string;
}

const obj1: A = { a: string, b: string }; // b에 대해서 잉여속성 검사를 한다. (바로 대입할 때)
// b 타입이 없다고 나온다.

const obj2 = { a: "hello", b: "world" };
const obj3: A = obj2; // 잉여 속성 검사를 하지 않는다.