Frontend42 [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. [TS] TS연습하기8 //never type // 조건1. 함수가 리턴하면 안된다. // 조건2. 엔드포인트가 없어야 한다. (끝나지 않아야한다.) // 어따쓰냐면 : 안쓴다. :void 쓰면 된다. // 알아야되는 이유는 ? 간혹 등장하기 때문이다. narrowing 에서 never가 등장하면 있을 수 없다는 뜻이다. const 네버타입 = ():never=>{ throw new Error('에러를 내는 방법이 있고,') //while(true){} 이것도 방법이고, } //OOP 키워드의 사용 //constructor 사용 이유는 : 파라미터 입력 가능. class User{ private familyName : string = '이' constructor(private name:string) { // 간결하게 축약 가능.. 2023. 4. 12. [TS] TS연습하기7 //Narrowing 할 수 있는 방법 더 알아보기 const 언디파인드찾기 = (a:string|undefined):void=>{ //null 타입도 찾아준다. if(a && typeof a === 'string'){ //&& 사용하기 : // string 이면 할거 } else{ // undefined 이면 할거 } } //in 키워드 : 속성명이 다를 경우 사용 가능하다. (Object Narrowing) type Fish = {swim : string} type Bird = {fly :string} const 애니멀 = (animal :Fish|Bird):void=>{ if('swim' in animal){ //Fish 타입 검사 //swim 이라는 속성이 들어있으면 할거 } else{ //이외에.. 2023. 4. 12. [TS] TS연습하기6 // Rest Parameter의 타입 지정 const resParams = (...a:string[]):void => { //파라미터에 ...a 이렇게 점을 붙여주면 파라미터가 여러개 올 수 있다. console.log(a) } resParams('a','b','c','d'); //destructuring 문법에서의 type const 옵젝트 = {student : true, age : 20} const 하암수 = ({student, age}:{student:boolean, age:number}):void=>{ console.log(student, age) } 하암수(옵젝트) //숫자를 여러개 입력하면 최대값을 return 해주는 함수 ? Math.max 사용금지 const 숫자여러개 = (...a:n.. 2023. 4. 12. [TS] TS연습하기5 //class 문법과 ts class Persona { personaName:string // 위에서 변수를 미리 만들어놔야 생성자를 사용할 수 있다. constructor(name:string){ this.personaName = name } 메소드(param:string):void{ console.log(this.personaName + param) } } let 사람1 = new Persona('이땡땡'); let 사람2 = new Persona('김땡떙'); console.log(사람1) 사람1.메소드('은 가나다') // interface 문법 : extends가 가능하다. 중복선언이 가능하다. // 장점 : type을 & 속성으로 연결할 때 중복속성이 발생하면 사용할때만 나중에 에러가 나는데,.. 2023. 4. 12. [TS] TS연습하기4 //함수 type 저장해서 사용하는 법 (Type Alias) type 함수타입 = (a:string) => number; const 뻥션1:함수타입 = (a) => 3 //Object 자료 const obj1:{name:string, count:number, func:()=>void} = { name : 'kim', count: 1, func : ()=>{ obj1.count++ } } //TypeScript를 사용하면서 DOM조작할 때 주의할 점 const 제목 = document.querySelector('#title') if(제목 instanceof Element){ //instanceof 를 이용한 narrowing을 해준다. (좋은방법) 제목.innerHTML = 'ㅇㅇㅇㅇ' } if(제목?... 2023. 4. 12. [TS] TS 연습하기3 //엄격한 type 지정 : literal Type let 이이름 : 'lee' = 'lee'; //'lee' 만 들어갈 수 있다 let 납니다 : '대머리' | '솔로' = '대머리'; //'대머리' 혹은 '솔로' 만 들어갈 수 있다. //함수에서 사용 function 뻥션(a:'hello'):1 | 0{ //파라미터는 'hello'만 받을 수 있고, 1|0 만 출력할 수 있다. return 1 } // 리터럴 연습하기 type rsp = ('가위'|'바위'|'보')[] const 가위바위보 = (a:'가위'|'바위'|'보'):rsp => { return ['보','가위'] } // 리터럴 타입의 문제점 : 값이 타입이다. const 자료 = { name : 'lee' } function 예시함수(a:.. 2023. 4. 12. [TS] TS 연습하기2 //변수에 type 넣어서 사용하기 (type Alias) //PascalCase로 타입이름을 지정하는 게 국룰 type Animal = string|number|undefined type Animal2 = {name:string, age:number}; const 동물 : Animal = '스트링/넘버/언디' ; const 동물2 : Animal2 = {name:'강아지', age:2} //reference data type 락걸기 (ts파일 안에서만 그럼) type Gf = {readonly name:string, age:number} // type에 readonly라고 지정해주면, 내부 수정이 불가능하다. const 여친:Gf = {name : '경아', age:30}; // 여친.name = '누.. 2023. 4. 12. 이전 1 2 3 4 5 6 다음
