angsu

🍎 class 안에서 쓰는 protected 키워드 private 이거랑 비슷한 키워드가 하나 있는데 private인데 약간 보안을 해제하고 싶을 때 씁니다. protected를 달아놓으면 1. private 이거랑 똑같은데 2. extends 된 class 안에서도 사용가능하게 약간 보안을 풀어줍니다. class User { protected x = 10; } User 라는 class의 x 속성은 protected 입니다. 그럼 private와 동일하게 class 안에서만 사용이 가능해지며 User의 자식들도 함부로 사용이 불가능합니다. class User { protected x = 10; } class NewUser extends User { doThis(){ this.x = 20; } } User..

🍎 public, private 키워드로 사용제한두기 타입스크립트는 class 안에서 public 키워드를 사용가능 public이 붙은 속성은 자식 object들이 마음대로 사용하고 수정가능 class User { public name: string; constructor(){ this.name = 'kim'; } } let 유저1 = new User(); 유저1.name = 'park'; //가능 (참고) public 키워드는 class 내의 prototype 함수에도 붙일 수 있음 근데 private 키워드를 붙이면 수정이 불가능해짐 무조건 class { } 중괄호 안에서만 수정 및 사용가능 class 중괄호 내부가 아니라서 class로 부터 생산된 자식 object에서도 private 붙은건 사용불..

함수에 사용하는 never 타입도 있긴 합니다 🍎 Never type 함수에 붙이는 return type으로 사용가능 function 함수() :never{ } 조건 1) 절대 return을 하지 않아야 함 조건 2) 함수 실행이 끝나지 않아야 함(전문용어로 endpoint가 없어야합니다) function 함수() :never{ while ( true ) { console.log(123) } } while 문법은 ( ) 소괄호안의 조건식이 true일 경우 계속 내부 코드를 실행해라 라는 뜻 무한히 실행되기 때문에 never 타입을 사용가능 function 함수() :never{ throw new Error('에러메세지') } throw new Error() 문법은 그냥 강제로 에러내라 라는 뜻 에러가 나..

Narrowing 할 수 있는 방법 더 알아보기 🍎 null & undefined 체크하는 법 if (변수 && typeof strs === "string") {} // if문 조건식안에 falsy 값이 남으면 if문 실행되지 않음 이렇게 사용하면 변수가 undefined라면 undefined가 남아서 if문이 실행되지 않고, 변수가 string 타입이면 if문이 실행됨 && 연산자의 다른 기능 원래 && 이건 조건식 2개가 참이면 전부 참으로 판정해주세요~ 라는 논리연산자인데여러개를 사용하면 이상한 현상이 있습니다. && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣으면&& 사이에서 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막 값을 남겨줍니다.falsy 값은 fals..

함수 rest 파라미터, destructuring 할 때 타입지정 🍎 rest 파라미터 타입지정 function 전부더하기(...a :number[]){ console.log(a) } 전부더하기(1,2,3,4,5) rest 파라미터는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해주시면 됩니다. 끝 🍎 Spread operator와 다름 array 혹은 object 괄호 벗기고 싶을 때 왼쪽에 사용 let arr = [3,4,5]; let arr2 = [1,2, ...arr] console.log(arr2) // 출력 : [1,2,3,4,5] array 혹은 object 왼쪽에 점3개 붙이면 괄호 벗겨주세요~ 라는 뜻 괄호벗겨주는 ...spread는 array, object 자료 왼쪽에, ..

Object에 타입지정하려면 interface 🍎 Object에 쓸 수 있는 interface 문법 interface Square { color :string, width :number, } let 네모 :Square = { color : 'red', width : 100 } type alias와 용도와 기능이 같음 1. 대문자로 작명 2. { } 안에 타입을 명시 만들어두면 앞으로 object자료 만들 때 interface 만든걸 집어넣으시면 간편하게 타입지정이 가능 (참고) 한 줄 끝나면 콤마대신 세미콜론도 가능 🍎 interface 장점은 extends도 가능 extends 문법은 interface 에 복사 가능 interface Student { name :string, } interface Te..

class 만들 때 타입지정 가능 🍎 필드값 타입지정 class Person { data:number = 0; // 타입 지정 } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 🍎 constructor 타입지정 class Person { constructor (){ this.name = 'kim'; this.age = 20; } } // Error : Property 'name' does not exist on type 'Person' 해결책. class Person { name; age; // 필드값 지정해야 오류가 안남 constructor (){ this.name = 'kim..

🍎 타입스크립트로 HTML 변경과 조작할 때 주의점 strictNullCheck 옵션 설정 { "compilerOptions": { "target": "ES5", "module": "commonjs", "strictNullChecks": true } } tsconfig.json 파일을 열어서 strickNullChecks 옵션을 true로 변경 "strict" : true 이런걸 써두면 strickNullChecks 옵션도 자동으로 true로 켜짐 HTML 파일 준비 (index.html) 안녕하세요 링크 버튼 타입이 확실하지 않아서 에러를 출력할 때 방법 🍎 해결책 1. narrowing 방법 let 제목 = document.querySelector('#title'); if (제목 != null) { ..