본문 바로가기

javascript23

[Refactoring] 변수 추출하기 1. 개요 - 지역변수를 활용해 표현식을 쪼개서 관리하기 쉽게 만든다 - 표현식에 이름을 붙이는 것 - 함수 추출하기와 상당히 유사하다. - 반대로 작업하면 변수 인라인하기이다. 2. 절차 - 불변 변수를 하나 선언하고 이름을 붙일 표현식의 복제본을 대입한다. - 원본 표현식을 새로 만든 변수로 교체한다. - 테스트 - 표현식을 여러 곳에서 사용한다면 변수로 바꿔준다. - 주기적으로 테스트해준다. 3. 예시 - 주문수량 * 개별가격 부분을 추출해보자 - 다음은 수량 할인 / 배송비 부분을 추출해본다. - 주석은 지워도 된다. 리턴 뒤 표현식 자체가 주석처럼 이해하기 쉽게 정리되었기 때문이다. 4. 예시 2 - OOP에서 - 변수로 추출할 수도 있지만, 메서드로 추출할 수도 있다. - 덩치가 큰 클래스에서.. 2023. 5. 3.
[TS] TS연습하기16 : 다이나믹 타입 지정(완) //타입파라미터를 이용한 다이나믹 타입 지정 type Age2 = T // 타입파라미터 지정 방법 const 에이지:Age2 = '스트링이어야지'; // 타입파라미터 사용 방법 //삼항연산자를 활용한 다이나믹 타입 지정 type Age3 = T extends string ? string : unknown ; const 에이지2:Age3 = '스트링이면' const 에이지3:Age3 = 123; // 에이지3 은 unknown이 된다. //연습하기 type FirstItem = T extends any[] ? T[0] : any //파라미터로 array를 입력할 경우 array의 첫자료의 타입을 그대로 남겨주고 아니면 any 타입 2023. 4. 13.
[TS] TS연습하기15 : index signature, keyof 연산자 //index signature 문법 interface StringOnly { [key : string] : string //모든 문자로된 속성은 string 타입이다. } const car이다:StringOnly = { name : 'carName', age : '32', //string이어야 한다. } //깊은 object의 type (Recursive) : 쓸 일이 거의 없다. interface TypeFont { 'font-size': TypeFont|number } const cssFont:TypeFont = { 'font-size':{ 'font-size':{ 'font-size' : 123 } } } // 조건부 타입변환기(keyof 연산자) type Car1 = { //type을 잘못 지정.. 2023. 4. 13.
[TS] TS연습하기14 : d.ts 1. d.ts - 이름.d.ts - 타입, 인터페이스 등을 담는 곳 2. 자동생성 - tsconfig에 "declaration" : true 로 해주면 ts파일마다 d.ts가 자동으로 생성됨. - d.ts 파일은 export import 해서 사용해야 한다. - override 가 가능하다. - tsconfig에 "typeRoots":["./types"] 이렇게 작성하면 여기에 있는 type들은 글로벌하게 이용이 가능하다. (types/common/이름.d.ts 이렇게 루트를 설정해줘야 한다.) 3. 외부 라이브러리 사용 시 타입정의가 안되어있으면 - typescript 공식 홈페이지에 가서 찾아보면 된다. - npm 설치 시 대부분 들어온다. - typeRoots 옵션을 설정한 경우 node_modul.. 2023. 4. 13.
[TS] TS연습하기13 : declare //외부 .js에 있는 변수를 .ts에서 이용하고 싶은 경우 // declare을 통해 변수를 재정의한다. declare let a:number; //declare 정의 내용은 힌트이므로 js로 변환되지 않음. console.log(a+1) //ts파일 -> ts파일로 변수를 가져다쓰고 싶은 경우 //명시적으로 import export 사용한다. // import {어쩌고} from './data' 이렇게 //global 만드는 방법도 있긴 하다. d.ts 만들지 이건 안쓴다. 다음시간은 d.ts declare global{ type HumanName = string } export{} 2023. 4. 13.
[TS] TS연습하기12 : array와 tuple, rest parameter //array 의 tuple 자료형 const 멍멍:[string, number, string, boolean?] = ['혜자',3,'번 짖는다'] //optional ? 은 맨 뒤에 쳐야한다. //사용 const bark = (...x:[string, number, string, boolean?]):void =>{ //rest parameter의 엄격한 타입지정 console.log(x) } bark(...멍멍); //[ '혜자', 3, '번 짖는다' ] //Spread Operator의 타입지정 let arr = [1,2,3]; let arr2:[number,number, ...number[]] = [4,5, ...arr]; //rest parameter랑 똑같다 // 연습하기 const test:[.. 2023. 4. 13.
[TS] TS연습하기10 //type도 ESM을 사용할 수 있다. import {Atype, age} from './index10_1'; const aType:Atype = 'string aType' + age //Generic : 함수를 쓸 때 Generic 함수를 만든다 (파라미터로 타입을 입력하는 함수) const 제네릭함수 = (x:T[]):T => { //타입이 파라미터처럼 된다. return x[0] } const 제네릭1 = 제네릭함수([4,2]); const 제네릭2 = 제네릭함수(['string', 'Hi']) // 사용할 때 이거 지정 안해도 잘 작동하긴 한다. //Generic 타입에서 제한두기 interface LengthCheck{ length : number } const 제네릭함수2 = (x : T)=.. 2023. 4. 13.
[TS] TS연습하기9 (public, private, protected, static) class ProtectedPractice { protected x:number = 10; static y:number = 50; //static 키워드는 부모class에 직접 부여됨(자식들도 못씀) private static z:number = 100; //static은 다른 키워드랑 병합이 가능하다. } class NewUser extends ProtectedPractice{ public 변경():void{ //protected는 x 사용 가능하다 //private는 x 사용 불가능하다 this.x = 20 } } const newUSER = new NewUser() newUSER.변경(); //protected라서 접근 가능 console.log(newUSER); console.log(`부모는 st.. 2023. 4. 12.

티스토리툴바