본문 바로가기

Front-End: Web

 (163)
[코딩애플] ts part 2-5. protected & static class에서 사용가능한 protected, static 키워드 복습) class를 복사해서 갖다쓰고 싶을 때 -> 'extends' class User { x = 10; } class NewUser extends User { } let 사람 = new NewUser(); conosle.log(사람); // NewUser {x: 10} 복습) private 붙이면 class {} 안에서만 사용가능 class User { private x = 10; } protected 키워드 private, protected 붙이면 class {}안에서만 사용 가능 protected가 private의 연장선 protected 붙이면 현재 class {} 안에서 + extends 된 class {} 안에서 사용 가능 pr..
[코딩애플] ts part 2-4. public & private public, private 쓰는거 보니까 타입스크립트 귀여운편 타입스크립트의 장점 typescript의 장점은 자바스크립트에서 쓸 수 없는 문법도 제공한다는 거다. 예로 들면 객체지향언어에서 사용하는 public, private, protected, static 네 개 키워드를 사용할 수 있다는 거다. class 많이 만들어서 개발하려면 public, private, protected, static 키워드 유용 이걸 쓰면 장점이 뭐냐면, 객체지향으로 코드를 짤 때, 일명 class를 만들어서 코드 짤 일이 많다 할 때 코드를 더 예쁘게 만들 수 있다. 자바스크립트에서도 일부 키워드는 쓸 수 있긴 하지만, 전부는 다 못쓰니까.. 타입스크립트가 좋다! 많이 하는 질문 class를 만들어보자. class U..
[코딩애플] ts part 2-3. never type 함수에 사용하는 never 타입도 있긴 합니다 쓸데는 없는데 나오면 알아야하니까 배워보자. function return 값에 붙일 수 있는 never type function 함수() :never { } void와 유사하게 리턴을 하지 않아야 한다. 하지만 엄격한 조건들이 있다. 조건 1) return 값이 없어야 함2) 함수실행이 끝나지 않아야 함 (=endpoint가 없어야 함) 사실 1) 2)가 동일한 말이긴 하다. 사실 함수는 return을 하지 않아줘도 undefined를 반환한다. fuction 함수() { return undefined; } 그래서 항상 함수는 리턴값을 가진다. 그렇기에 조건2를 충족하면 조건1도 자동적으로 충족시킨다. 함수가 절대 끝나지 않아야 never 타입을 지정할 수 ..
[코딩애플] ts part 2-2. Type Narrowng(2) Narrowing 할 수 있는 방법 더 알아보기 typeof 연산자로는 부족하다 Narrowing할 때 typeof 연산자 갖다쓰면 된다 했다. 근데 가끔은 typeof 키워드로 할 수 없는 Narrowing 상황들이 있다. null & undefined -> 타입체크하는 경우 매우 잦음 그 전에 테그닉 하나만 배우고 가자. 실제 코드를 짤 때 'undefined'라는 타입을 체크하는 경우가 엄청 많다. 예로 들어서 함수를 하나 만들었다 하자. 이 함수는 string 혹은 undefined다. function 함수(a :string | undefined){ } 이때 a를 그냥 쓰면 안된다. if 문을 써서 a가 string인지, undefined인지 체크해야 한다. 근데 이게 귀찮아서 대신 typeof ..
[코딩애플] ts part 2-1. rest parameter & destructuring 함수 rest 파라미터, destructuring 할 때 타입지정 rest parameter 타입 지정 가능 rest parameter 문법 설명 함수에 여러 파라미터가 들어간다고 하자. 근데 몇 개의 파라미터가 들어올지 아직 모른다. function 함수() { } 함수(1,5,23,6,2,3) 그럴 때 점 3개를 붙여서 rest parameter를 쓰면 된다. 파라미터 100만개 들어올 수 있다는 뜻이다. function 함수(...a){ console.log(a); // [1, 5, 23, 6, 2, 3] } 함수(1,5,23,6,2,3) 특징 다른 파라미터 있으면 맨 뒤에만 사용 가능 rest parameter 자리에 들어온 데이터는 전부 **[어레이]에 담아줌** rest parameter 타입..
[코딩애플] ts part 1-11. interface interface: Object에 타입지정하려면 type 키워드로 타입 변수를 생성할 수 있다고 했다. 근데 object의 경우에는 초이스가 두 가지다. type 키워드로 타입변수 생성 가능 interface 키워드도 타입변수 생성 가능 네모 라는 오브젝트가 있다고 해보자. 1) type 키워드로 타입변수 생성 let 네모 = { color: 'red', width: 100 } 이거 타입지정하려면 어떻게 해야하나? 타입은 자동으로 된다! 근데 만약 어려운 타입이 미리 들어가야 한다, 하면 type alias를 만들어서 쓰면 된다. type Square = { color :string, width :number }; 2) object 타입지정 시 interface 사용가능 interface Square {..
[코딩애플] ts part 1-10. class types class 만들 때 타입지정 가능 class 만들기 class Person { constructor(){ this.name = 'kim' } } let 사람1 = new Person(); let 사람2 = new Person(); 이제 Person 속성을 물려받은 사람 오브젝트들을 만들 수 있다. class 필드값 (constructor와 똑같은 역할) class 내에 대충 변수를 만들어서 집어넣을 수도 있다. class Person { data = 0; } 그리고 모든 자식들은 이 data 속성을 가져다 쓸 수 있다. 사람1.data; // 0 사람2.data; // 0 근데 이 필드값에 타입지정을 할 수도 있다. 생략하면 컴파일러가 알아서 data의 type을 number로 타입지정해준다. TypeS..
[코딩애플] ts part 1-9. TypeScript DOM Manupulation 타입스크립트로 HTML 변경과 조작할 때 주의점 당연히 TypeScript로 HTML 조작 가능. 근데 좀 다르다. // js document.getElementById(); index.html 파일을 생성하자. 안녕하세요 링크 버튼 그리고 tsconfig.json에 코드를 추가해서 strict mode를 켜주자. { "compilerOptions": { "target": "es5", "module": "commonjs", "strictNullChecks": true ⬅️ } } Null type이 들어올 때 엄격하게 체크해달라고 설정하는 것임 안의 글자를 바꿔보자 // js의 경우 let 제목 = document.querySelector("#title"); 제목.innerHTML = "반가워요"; 근데..
반응형

티스토리툴바