놀러와요 버그의 숲

이번글을 마지막으로 코딩애플 강의 타입스크립트 part1 수강을 완료했다. 그래도 꾸준히 강의를 들어서 뿌듯하다. 아마 강의를 듣게 된다면, 타입스크립트 다른 강의를 들을 예정이다. 간단한 후기를 남기면, 처음 배울 때는 굉장히 쉬워서 좋았다. 근데 지금은 이제는 조금 더 실제 서비스에 적용해보고 싶다. 약간 이번에 강의를 들으면서 배운 것들은 타입스크립트 기초 문법? 느낌이 강하다. 이제 활용을 해보고 싶다. 그래도 초기 목표를 이룬것 같아서 기분이 좋다. 처음에 이 강의를 듣는 목적을 감귤 프로젝트할 때 타입스크립트 오류가 나면, 최소한 어떻게 해결해야겠다 대책이 서는 것을 목표로 했는데, 이제는 조금 알게되었다. 이렇게 목표를 조금씩 잡고 성장해나가는 것도 중요하다는 것을 느낀다. 앞으로도 목표를 ..

// 10강 타입스크립트로 HTML 변경과 조작할때 주의점 // 잘 찾으면 html object 자료가 남고 // 요소를 예를들어 못찾으면 null이 남기 때문에 // union type으로 설정해주어야 함 let title = document.querySelector("#title"); if (title != null) { title.innerHTML = " 반가워요"; } // HTML 조작시 narrowing 방법 5가지 // 1. instanceof연산자 => 가장 많이 쓰게 될 확률 높음 if (title instanceof Element) { title.innerHTML = "반가워요"; } // 2. as로 사기치기 // as는 타입 assertion으로 , Element 타입으로 사기쳐주세..

// 9강 함수와 methods에 type alias 지정하는 법 // type alias에 함수 type 저장해서 쓰는 법 // 함수 타입 지정할 때 ()=>{} 모양으로! // 함수표현식에만 type alias 사용 가능 // type alias 만들기 싫으면 그냥 함수만들 때 직접 타입작성하면 된다. type Func = (x: string) => number; let myFunc: Func = function (x) { return 1; }; // object안에 함수 타입 지정은 어떻게 할까? // type alias도 사용가능 let myComputer = { name: "mac", changeComputer(x: string): string { return x; }, }; myComputer..

// 8강 Literal Types로 만드는 const 변수 유사품 // literal type은 strings, numbers,booleans를 의미함. // 더 엄격한 타입지정 가능. => ~이런 문자만 들어올 수 있다. // Literal types 변수에 더 뭐가 들어올지 엄격하게 관리 가능. // 책이라는 변수에는 'book' 밖에 못들어옴 let 책: "book"; // 이 number라는 변수에는 123 밖에 못들어옴 let number: 123; // union type도 지정가능 let computer: "애플" | "삼성"; // computer = '샤오미' => 에러가 난다. // 함수도 가능하다. // 파라미터로 어떤걸 받을지 어떤걸 리턴값으로 받을지 결정 가능 function m..

// 7강 타입도 변수에 담아쓰세요 type 키워드 써서 & readonly // type alias (타입 변수 만들기) // 작명할때 type은 영어 대문자로 시작하는게 관습. // union type , obeject type등 여러개 쓸 수 있다. type Animal = string | number | undefined; let animal: Animal = 123; // object type alias 적용해보기 type Human = { name: string; age: number }; let human: Human = { name: "jung hee", age: 27 }; // js에서 const 변수는 등호로 재할당을 막는 역할 // const로 담은 object 수정은 자유롭게 가능...

// 6강 타입 확정하기 Narrowing & Assertion // type이 아직 하나로 확정되지 않았을 경우, Type Narrowing을 써야한다. // 어떤 변수가 타입이 아직 불확실하면 if문 등으로 narrowing 해줘야 조작가능 // 참고로 typeof는 문자열을 반환하기 때문에 'string' 이런 형식으로 써줘야한다. function myFunc(x: number | string) { if (typeof x === "string") return x + "1"; else { return x + 1; } } // 배열 nrrowing 해보기 myFunc(123); function myFunc2(x: number | string) { let arr: number[] = []; if (typ..

// 5강: 함수에 타입 지정하는 법 & void 타입 // 변수만 만들면 any가 자동할당 된다. let y; // 결국 매개변수도 변수를 선언하는 것이기에 아무것도 지정안하면 any가 할당된다. // 함수는 파라미터, 리턴 값 타입 지정이 가능하다 function double(x: number): number { return x * 2; } // 함수에서 void 타입 활용 가능 // void => 실수로 뭔가 return하는 것을 사전에 막을 수가 있다. // void: 존재하지 않음, 아무것도 없이 비어있음 function 함수(x: number): void { 1 + 1; } //참고) 파라미터 타입 지정을 해주었다면, 함수 호출할때 인수가 반드시 들어가야한다. 아니면 에러남! (JS랑 다른점 ..

// 1. Union type => 타입 2개 이상 합친 새로운 타입 만들기 let box1: string | number = "안녕"; // 언제든 수정 가능 box1 = 123; // 만약에 type이 많다면? let box2: string | number | boolean = true; // 배열안에 문자 or 숫자가 껴있는 타입 지정 let arr1: (number | string)[] = [1, "2", 3]; let arr2: Array = [1, "2", 3]; // 객체 타입 지정도 마찬가지 let obj: { age: number | string } = { age: 32 }; // 2. any => 모든 자료형 허용. 타입 실드 해제(타입스크립트 쓰는 의미가 사라진다. 버그 잡아주지 못한..

변수에 타입을 지정한다 => 변수에 베리어를 씌우는거랑 유사 // 타입 스크립트 기본 타입 정리 var 이름 = "kim jung hee"; var 나이 = 27; var 결혼했니 = undefined; var 담배했니 = null; var 회원들 = ["영희", "철수"]; var 컴퓨터들 = { computer1: "apple", computer2: "samsung", }; // 3강 타입스크립트 과제 // 1. 나의 이름, 나이, 출생지역을 변수로 저장하기 var myName = "kim jung hee"; var myAge = 27; var myHomeTown = "서울"; // 2.내가 가장 좋아하는 곡과 가수 이름을 변수에 object 자료형으로 담아보기 var myFavorite = { so..

타입스크립트 : 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 정적 타입의 컴파일 언어이며, 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다. 타입스크립트 장점 1. 타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 2. 자바스크립트 보다 에러메세지 퀄리티가 높다. 3. 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 타입스크립트 단점 1. 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다. 2. 코드가 길어져 가독성이 떨어질 수 있다. tsconfig.json 파일 설정 //tsconfig.json { "compilerOp..