본문 바로가기
728x90
반응형

Major-

 (863)
타입스크립트 클래스 // 클래스 // class Car{ // constructor(color){ // this.color = color; // } // start(){ // console.log("start"); // } // } // const bmw2 = new Car("red"); //자바스크립트에서의 클래스 class Car{ color:string; //1. 멤버변수는 미리 선언해줘야한다. constructor(color:string){ //2. 매개변수 타입 명시 this.color = color; } start(){ console.log("start"); } } const bmw2 = new Car("red"); //타입스크립트에서의 클래스. - 멤버변수 미리 선언하는 방식 class Car2{ constru..
타입스크립트 리터럴, 유니온/교차타입 //리터럴, 유니온/교차타입 //JS 변수 선언 타입 //const : 상수 //let : 변수 const userName1 = "Bob"; //문자열 "Bob"이 타입 - 문자열 리터럴 타입 let userName2:string|number ="Tom"; //문자열이 타입 userName2=3; //숫자도 들어가게 하려면 선언시에 타입을 2개로 명시 //enum과 유사한 타입 type Job = "police" | "developer" | "teacher"; interface User6{ name : string; job : Job; } const user7:User6={ name :"Bob", job: "developer" }; //유니온 타입 interface HighSchoolStudent{ na..
타입스크립트 함수 function add2(num1: number, num2: number):number { console.log(num1+num2); return num1+ num2; } function add3(num1: number, num2: number):void { console.log(num1+num2); } function isAdult2(key:number):boolean{ return age>19; } //인터페이스처럼 함수의 매개변수도 옵셔널로 지정 가능 (optional parameter; 선택적 매개변수) function hello(name?:string){ //function hello(name:string){ return `Hello, ${name||"world"}`; //name이 없으면 wo..
자바스크립트 call, apply, bind (+ 스프레드 연산자, 나머지 매개변수) 함수 호출 방식(어디서, 어떻게)과 관계없이 this 지정하는 방법 : call, apply, bind call(this로 사용할 매개변수, ...매개변수: 호출한 함수에 전달할 매개변수) : 일반적인 함수와 같이 매개변수를 직접 받는다. call에 this로 사용할 객체를 파라미터를 담아서 함수를 호출하면 해당 함수가 주어진 객체의 메서드인 것처럼 사용 가능 즉, call의 첫 번째 매개변수: this로 사용할 값, 그 외의 매개변수 : 호출하는 함수로 전달 (1) this.name이 mike, tom이 됨 (2) update에 this로 사용할 매개변수 mike 전달, 나머지는 호출할 함수로 전달 1999, 'singer apply(this로 사용할 매개변수, 배열 [ ]) : 두 번째 매개변수를 배..
타입스크립트 DOM 타입스크립트는 html파일 내에서 직접 사용 불가 -> 터미널에서 변환 후 첨부 tsc -w -> ts를 js로 컴파일 index.html 안녕하세요 링크 버튼 tsconfig.json { "compilerOptions": { "target": "ES5" ,"module": "commonjs" ,"strictNullChecks": true // ,"strict": true //strict 모든 옵션 } } index.ts //안녕하세요 let 제목 = document.querySelector('#title'); //제목.innerHTML = '반가워요'; //자바스크립트 문법 - union type //: 타입이 명확하지 않기 때문에 (null 가능) //if(제목!=null){ if(제목 instanc..
타입스크립트 인터페이스 (구현과 상속) let user:object; //객체 생성 user ={ name : 'xx', age : 30 } //console.log(user.name); //에러발생 - object에는 특정 속성값에 대한 정보가 없기 때문에 //: 프로퍼티를 사용해 객체를 사용하기 위해서는 인터페이스 사용해야 한다. interface User{ name : string; age : number; gender? : string; readonly birthYear? : number; } let user2 : User={ name : 'xx', age : 30 } let user3 : User={ name : 'xx', age : 30, gender : 'male' } let user4 : User={ name : 'xx', ag..
타입스크립트 기본타입 //타입명시 let car:string ='bmw'; car = 'benz'; //car= 3; //에러 발생 //타입추론 let car2='bmw'; //car2는 string 타입 //기본 타입의 종류 let age:number = 30; let isAdult:boolean = true; let a = [1,2,3]; let a2:number[] = [1,2,3]; let a3:Array = [1,2,3]; let week1 = ['mon', 'tue', 'wed']; let week2:string[] = ['mon', 'tue', 'wed']; let week3:Array = ['mon', 'tue', 'wed']; //week1.push(3); //에러발생 //튜플 let b:[string, nu..
프론트엔드 자바스크립트 AJAX AXIOS 라이브러리 GET 요청 [프로미스 지원 함수] 2. POST 요청 및 FormData 전송 3. 주소창 한글 [인코드 : encodeURIComponent, 디코드 : decodeURIComponent] : 아스키문자로 표현 4. HTML 태크에 데이터 저장하기 위해 data attribute와 dataset : 서버의 데이터 -> 프론트엔드로 전송 목적 data-속성명으로 접근 dataset.'속성명'에 값 넣으면 속성이 생김 dataset.monthSalary = 10000 -> data-month-salary = "10000" querySelector: 특정 CSS 선택자에 일치하는 첫 번째 요소를 반환하는 메서드 getElementById: 주어진 ID에 해당하는 요소를 반환...
728x90
반응형

티스토리툴바