1/17 타입스크립트 공부노트 ( 코딩애플 타입스크립트 강의!! )

tsconfig.json 중요한 부분들 정리 ( 코딩애플 강의 내용 )

{
 "compilerOptions": {
  //target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다.
  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

tsc -w

타입스크립트를 실시간으로 js로 변환하게 watch 하고 있어라

tsconfig.json에서

→ strictNullChecks 를 true로 해주면, strict모드를 몇개 킬 수 있는데 그걸 한번에 키는 것

간혹 null타입이 들어오면 그걸 엄격하게 체크해달라

---

깃허브에 올렸는데 기억하고 싶은 부분들

• 유니온타입

let 이름: string = "kim";
// let 괄호쳐도됨: (string | number) = 3;

let 유니온타입이후는: number | string = "kim";
// 유니온타입을 이렇게 지정해놨다가, 값이 할당이 되고 난 후에는
유니온타입이후는;
//마우스 올려보면 string으로 타입이 확정나있음
//but, 저따 숫자 할당하면 또 number가능해짐

// 오브젝트는 이런식으로 타입 지정
let 오브젝트: { name: string; age: number } = { name: "hong", age: 20 };
// 배열안에 숫자랑 string을 같이 넣고 싶을때?
// 소괄호로 묶어주기 !!!!
let 객체유니온지정: (number | string)[] = [1, 2, 3, "string"];
let 오브젝트유니온지정: { a: string | number } = { a: "string" };

• any VS unknown

// 🌸 Any타입 : 쉴드 해제 🌸
//암거나 다 집어넣으면 된다.
let 애니: any;
애니 = 123;
애니 = true;

// 🌸 unknown 타입 : any랑 비슷함 🌸
// 모든 자료형을 허용해줌
let 언노운: unknown;

// 👀 unknown이 any보다 안전한 이유?
// 언노운을 넣으면 string아니라고 에러가 잡혀주는데
// -----> any로 했었으면 여기서 안걸린다.(애니는 쉴드 해제시키는 바이러스같은애임)
// ex) let 변수1: string = 언노운;
let 변수1: string = 애니;

//타입스크립트는 사칙연산을 할때 'number'인 애만 가능하게 해줘서
// unknown으로 했다면 ,ts가 걸러주지만 any는 또 노룩패스임

//타입스크립트는 number아니면 즈얼대 안받아줌
let 나이: string | number;
// 나이 + 1;    <----얘 에러남!!
// 이유:  'string | number' 라는 새로운 타입이라고 인식하는 것!!!

• 물음표의 의미

// 🌸 물음표의 의미? 아래와 똑같은 의미임!!
// x : number | undefined === x? : number
function 물음표의의미(x: number | undefined): void {
  console.log(x);
}

• 타입 Narrowing & Assertion

// 🌸 타입 Narrowing & Assertion 🌸

function 내함수(x: number | string) {
  if (typeof x === "string") {
    let array: number[] = [];
    if (typeof x === "number") {
      array[0] = x;
    }
    // else문은 확실하게 넣어주기
    // 타입이 여러가지인 경우 if문만 쓰면 오류날수도 있다고 함.
    else {
    }
  }
}
// 🌸 Narrowing으로 판정해주는 문법들 🌸
// 1. typeof 변수
// 2. 속성명 in 오브젝트자료
// 3. 인스턴스 instanceof 부모

//  🌸 Assertion : 타입을 잠깐 덮어씌우는 것 🌸
function Assertion문법(x: number | string) {
  let 어레이: number[] = [];
  //   if (typeof x === "number") {
  //     어레이[0] = x;
  //   } else {
  //   }
  어레이[0] = x as number; // <--- x as number
  // 왼쪽에 있는 x를 number타입으로 덮어씌워주세영 하는 문법

  //  🌸 as 문법의 용도? 🌸
  // 1. 복잡하게 얽힌 유니온 타입을 '하나'로 확정하고싶을때 씀(어썰션) => 네로잉할때
  // 2. 어떤 타입이 들어올지 100% 확신할때 사용
  // 3. 한마디로 너무 타입이 확실할때, 남이짠코드에서 에러날때 한번 확인해보는것
  // but, as 문법자체가 구라로 타입을 정해주는거라서 대부분 If문으로 쓰면 됌->이래야 버그 추적이 가능
}

• const의 특징 → 타입스크립트에서 object 수정을 디펜드하는 방법

// const 출생지역 = 'seoul'하면 재할당이 안되지만
// 옵줵타입으로 이렇게 해놓으면, 안에 있는 object를 수정하는걸 막지는 않음
const 출생지역 = { region: "seoul" };
// 타입스크립트에서는 object수정을 막는것도 가능함(Lock)
// 실제 js에서 막아주는건 아님

//🌸 readonly : 읽기전용 속성 🌸
type 걸프렌드 = {
  readonly name: string;
};

const 여친: 걸프렌드 = {
  name: "엠버",
};

// 여친.name = '유라' <----이렇게 수정하려고 하면 에러가 난다.
// but, 주의!!!
// 타입스크립트에서 에러라고는 뜨지만
// 실제로 js가보면 여친.name이 여전히 '유라'로 바뀌고 있는걸 알 수 있음

• type alias 합치기

// 🌸 object를 extends한다 === 두가지 합치기 🌸
type 두가지옵줵타입을합쳐 = PositionX & PositionY;
// 두가지옵줵타입을합쳐 : {x: number,y: number }
let position: 두가지옵줵타입을합쳐 = { x: 10, y: 20 };

• 리터럴 타입의 문제점과 해결법

// 🌸 리터럴타입의 문제점 🌸

var 자료 = {
  name: "kim",
} as const;
// ⭐️⭐️ as const : 쩌 아래 해결법 3)번 주석보기

function 리터럴문제점(a: "kim") {
  console.log("뭐가문제야썸띵~");
}
리터럴문제점(자료.name);
// 🌸 이유 : a는 'kim'이라는 type이 들어올 수 있는거고
// 🌸 자료.name은 'string'타입, 그냥 값인거다.

// a : kim = 값;
// 자료.name은 그냥 'string 값'이라는것!!!

// 🌸 해결법?? 🌸
// var 자료에 확실하게 kim이 무슨타입인지 정해주기
// 1) var 자료: { name: "kim" } = {
// 라고 name을 "kim" 타입이라고 해주거나
// 2) 리터럴문제점(자료.name as "kim");
// 으로 사기치기
// 3) var 자료 = { name : 'kim'} as const ⭐️⭐️
// 이 object 자료를 만들때 '리터럴 타입'처럼 지정을 해달라 라고 말하는 것
//  ⭐️⭐️ as const
// 1. object value값을 그대로 타입으로 지정해주세여
// 2. object 속성들에 모두 readonly를 붙여주세여
// --> 자료.name=123; 이런식으로 변경 불가능해짐
// 결론 : object자료를 만들고 이를 추후 변경할 수 없게 + 타입마저도 리터럴타입으로 만들고 싶을때 사용!!!

• type alias 함수에 써주기

// 🌸 type alias에 함수타입 전체를 저장해서 쓰기 🌸
// 함수타입지정은 화살표함수로 써주깅
type 함수타입 = (a: string) => number;

let 함수: 함수타입 = function (a) {
  return 3;
};

type 옵줵에함수저장 = {
  name: "kim";
  plusOne: (a: number) => number;
  //changeName는 아무것도 리턴하지 않음
  changeName: () => void;
};

// 옵줵 안에 함수 실행하기
// 옵줵에함수저장.plusOne(3);