프리온보딩 7일차

---

✏️타입스크립트

타입스크립트란?

타입이 입혀진 자바스크립트

왜 타입스크립트 좋은지?

에러의 사전방지/ 자동완성
Typescript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있습니다. 명시적인 정적 타입 지정은 개발 자의 의도를 명확하게 코드로 기술할 수 있습니다. 이는 코드의 가독성을 높이며 예측할 수 있게 하고 디버깅을 쉽게 하게 만듭니다.

1. 타입별 선언

문자열
let str: string = 'hello'

숫자
let num: number = 10;

배열 
let arr: Array<number> = [1,2,3]
let arr2: Array<string> = ['Capt','Thor', 'Hulk']
let arr3: number[] = [1,2,3]

튜플_ 배열의 모든 인덱스의 타입까지 정의
let arr: [string, number] = ['gangnam', 3]

객체
let obj: Object = {}

객체 인덱스 타입까지
let person: {name: string, age: number} = {name: 'Thor', age: 100}

진위갑
let bool: boolean = true

함수
function sum(a: number, b?: number): number {
 return a + b;
}
+함수 파라미터와 반환값에 타입지정
+반환값은 안하더라도 해당 파라미터에 따라 타입추론.
+옵셔널파라미터_ 파라미터 옆에 물음표를 넣으면 해당 파라미터를 써도 되고 안써도 된다.

2. 인터페이스vs 타입별칭

인터페이스와 비교한 타입별칭의 특징

둘다 키워드를 사용하면 반복되는 타입을 인터페이스또는 타입으로 지정해 재사용가능

1. 새로운 타입을 생성하는게 아니라 정해진 타입에 대해 이름을 부여하는거고 프리뷰상태를 볼 수있음.
2. 가장 큰 차이는 type는 확장 불가능 interface는 가능__ 가능한 interface를 사용 추천

inferface 사용

지정
interface User {
    age:number;
    name:string;
  }
  
변수에 활용
var seho: User ={
    age: 33,
    name: "세호"
  }
  
함수인자에 활용
  function getUser(user: User){
    console.log(user)
}

함수의 구조를 정의
  interface SumFunction {
    (a:number, b:number): number
}
인터페이스 확장
interface Developer extends User {
   // name:string;
   // age:number; // extends 키워드를 쓰면 Person인터페이스에서 상속받을 수 있음
    language:string
}

type별칭 사용

type MyName = string
const name3: MyName= "capt"

3. 유니온타입과 인터섹션 타입

유니온타입

특정 파라미터나 변수에 한가지이상의 타입을 쓰고싶을때 사용 , 넣은만큼 추가됨
function logMessage(value: string | number){
     console.log(value)
 }

인터센션타입

두개가 가진모든속성 X 공통된 속성만 가능
유니온과 인터셉션의 차이 _ 인터셉션은 모든 속성에 접근 가능
var soho: string | number | boolean; // 교집합 속성
var capt: string & number & boolean; // 합집합 속성 
capt 갖다대면 never라는 타입 뜸

줄바꿈시 세미콜론 붙이기

.prettierrc.yml 파일에 semi: false를 삭제 후, .eslintrc.json 파일의 "semi":["warn","never"] 부분을 "semi":["warn","always"]로 수정