본문 바로가기
반응형

JavaScript/TypeScript

 (7)
타입스크립트 제네릭 (+상한 제한) //제네릭 //:클래스나 함수, 인터페이스를 다양한 타입으로 재사용 가능 // -> 실제로 사용할때 타입을 선택할 수 있다. //즉, 특정한 타입을 고정하지 않고 나중에 실제로 사용될 타입을 동적으로 지정 //function getSize(arr):number{ //에러 발생 : 타입을 명시하지 않았기 때문에 // function getSize(arr:number[]):number{ //-> 숫자배열이라고 타입 명시 -> 문자열로도 이 메서드를 쓰고 싶은데? //(1) 함수 오버로드 // 함수 오버로드 정의 function getSize(arr: string[]): number; function getSize(arr: number[]): number; function getSize(arr:number[]..
타입스크립트 클래스 // 클래스 // 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..
타입스크립트 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..
반응형

티스토리툴바