[Inflean 장기효] 입문강의

실습환경에서 주의할 내용

ESlint에서 잡아주는 문법을 보아야하기때문에 설치 확인을 꼭합시다

crtl +, 를 통해서 format on save 비활성화를 통해서 prettier와 beatify를 꺼야한다. (eslint만으로만 문법을 확인하기 위해서)

 

할일 관련 프로젝트 파일을 알아보자

tsconfig.json 

compilerOptions 세부사항을 어떤식으로 주느냐에 대한 얘기가 있따

allowJs , checkJs, noImplicaitAny 가 무엇인지 알아봐야겠구만 

 

붉은색 에러는 ts -=> js 로 변화할 때 제거를 꼭 해주어야한다.

 

esilnt가 ts 문법을 보조해주고 있다

 

any 라는 타입은 무엇인가? 모든 타입을 통칭하는 것

 

함수의 반환타입에 대해서 알아보자 void 란 무엇인가? 반환값이 없다는 것을 명시적을 알려주는 것임

 

---

 

인터페이스

- 인터페이스와 타입의 차이점 : 상속의 가능유무

interface User {
  age: number;
  name: string;
}
// boiler plate를 줄일 수 있고, User만 보더라도 속성을 알 수 있다
// 변수에 활용한 interface
const seho: User = {
  age: 33,
  name: "seho"
}

// 함수에 활용한 interface
const getUser = (user: User) => {
  console.log(user);  
}
const capt = {
  name: "captin"
}
// cpat는 객체에 name만 있기에 선언한 User 라는 interface와 맞지 않는다 
// age가 필요하다는 문구가 뜨게 된다 age: 100 이것을 추가로 넣어주자
getUser();


//api를 호출해서 api의 데이터를 interface로 정의해서 활용하는 부분이 가장 많다

// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunc {
  (a:number, b:number):number;  // 2개의 숫자를 받아서 숫자를 반환한다. 
}

const sum: SumFunc = (a:number, b: number): number => {
  return a + b;
}

// 인덱싱
interface StringArray {
  [index: number]: string;
}

const arr: StringArray = ["a", "b", "c"];
arr[0] = 10 // 배열 안에 들어가는 모든 값은 string이기에 10을 할당할 수 없다.

// 딕셔너리 패턴 (인덱싱과 유사한 방식)
interface StringRegexDictionary {
  [key:string]: RegExp // 객체의 키는 string이고 밸류는 RegExp라는 정규표현식 생성자 같은 예약어
}
const obj: StringRegexDictionary = {
  sth: /abc/,
  cssFile: "css", // error가 난다 오른편에 정규표현식이 아니므로 (RegExp) /\.css$/ 이렇게 고치자
} // 정규표현식이 들어오는 객체

Object.keys(obj).forEach((value)=> {})

// 인터페이스 확장
interface Preson {
  name: string;
  age: number;
}
interface Deveolper extends Person {
  ;anguage: string;
}

const cpat: Deveolper = {
  language: "hi" // language만 선언한다면 에러가 뜬다 확장으로 상속받은 내용도 정의를 해야 함
}

 

타입별칭

특정 타입이나 인터페이스를 참조할 수 있는 타입변수

const name: string = "capt";
// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = "capt";

// 간단한 예제

interface Preson {
  name: string;
  age: number;
}

type Person {
  name: string;
  age: number;
}


const seho: Person = {
  name: "seho",
  age: 30
}
// 타입과 인터페이스의 차이점은 지정한 Person에 hover했을 때 알 수 있음
// type으로 정의를 하면 안의 모습을 바로 볼 수 있다.

type Todo = {id: string; title: string; done: boolean};
const getTodo: Todo = () => {}
// 타입을 미리 지정하고 사용함으로써 boiler palte를 줄일 수 있다고 한다

//type과 interface의 차이를 알아보자

// 새로운 타입을 하나 생성하는 것이 아닌 정의한 타입에 대해 나중에 참고 할 수 있게 이름을 부여하는 것임
// VS code의 preview가 다르다 (type이 더 세부적으로 보임)

// type은 확장이 되지 않는다 그래서 interface로 주로 사용하는 것이 좋다.

 

연산자를 이용한 타입 선언 인터섹션과 유니온

const logMessage(value: string) {
  console.log(value);
}
logMessage("hello");  
logMessage(100); // 출력되지 않음 value가 string이기 때문에 value:any일 경우 가능

// number도 같이 되게 하고싶을때는? 유니온타입
const logMessage(value: string | number) {   // 유니온타입 하나이상의 타입을 사용할 수 있게 함
  console.log(value);
}

logMessage("hello");  
logMessage(100);  // 둘 다 가능

// 유니온 타입을 사용했을 때 장점

const seho: string | number;
const logMessage(value: string | number) { // 이 함수 안에 들어오는 타입은 2가지인데 이를 if문을
  if (typeof value === "number") {         // 통해서 구분해서 사용할 수 있다.
  	valuer.toLocaleString();
  }
  if (typeof value === "string") {
  	valuer.toString();
  }
  throw new TypeError("value must be string or number") // 타입이 지정한 것이 아닐 시 에러를 발생
}
// 타입가드라고 하는 유니온타입을 통한 구분이다

// 유니온타입의 특징
// 별도의 속성과 공통속성을 가지는 2가지 인터페이스
interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
  age: numver;
}

const askSomeone = (someone: Developer | Person) => {
  someone.name  // someone에 접근 할 수 있는 것은 name 밖에 없다 (공통속성만 접근 가능)
  someone.skill // error 둘 다 가능한 상태여야하기 때문에 공통속성에만 접근이 가능하다 
}
// | 연산자가 쓰이는 타입 == 유니온 타입    &는 어떤 의미를 가질까?

const capt: string & number & boolean; 

const askSomeone = (someone: Developer & Person) => {
  someone.name  
  someone.skill // 인터섹션 타입은 디벨로퍼와 펄슨의 속성을 모두 가지는 타입이 된다.
}


const askSomeone = (someone: Developer | Person) => {
  someone.name  
  someone.skill
  someone.age
}

askSomeone({name: "developer", skill: "create web"});
askSomeone({name: "capt", age: 100});

// 유니온타입이 상대적으로 많이 쓰이고 위와같은 방식으로 인터섹션처럼 사용 할 수는 있다.

// 인터섹션을 쓰게 되면 세개의 속성을 다 넘겨줘야만 한다 새로운 타입이 생기는 듯한 느낌이 든다

askSomeone({name: "developer", sill: "create web", age: 30})

 

이넘

타입의 일종으로 특정 값들의 집합을 의미하는 자료형이다

숫자형 이넘과 문자형 이넘이 있다

// 숫자형 이넘 
enum Shoes {
  Nike,  // 0    실질적으로 할당을 하지 않는다면 초기값은 0이다.
  Adidas // 1    다음데이터는 2... 1씩 추가 된다.
} // 2개의 데이터가 들어가있다

const myShoes = shoes.Nike;
console.log(myShoes); // 0이 출력된다 별도의 값을 지정하지 않으면 숫자형 이넘으로 취급을 한다

// 문자형 이넘

enum Shoes {
  Nike = "나아키",  
  Adidas = "아디다스" 
} 

const myShoes = shoes.Nike;
console.log(myShoes); // nike가 출력이 된다

// 어디에 활용을 하면 될까??

const askQuestion =(answer: string) => {
  if (anwer === "yes") console.log("true");
  if (answer === "no") console.log("false");
}
// 어떠한 문자열이든 맞겠지만 이넘으로 내용으로 제약을 하게 된다면 특정 필요한 값만 받아 올 수 있다

enum Answer = {
  Yse = "Y",
  Mo = "N"
}

const askQuestion =(answer: Answer) => {
  if (anwer === Answer.Yse) console.log("true");
  if (answer === Answer.No) console.log("false");
}
askQuestion(Answer.Yes) //이넘을 통해서 정의를 했기 때문에 이넘에서 제공되는 데이터를 호출을 해야함
askQuestion("Yes") // 안되는 코드