자바스크립트에서는 class 사용시 마땅히 내부의 값을 은닉화 할 수 있는 방법이 없었으나 타입스크립트에서는 접근제한자인 public, protected, private를 지원한다. 이를 통해, 외부에서 특정 메소드나 프로퍼티에 접근범위를 지정 할 수 있다. public은 어디에서나 접근 가능하며 생략가능한 default값. public class Aboutme { name: string constructor(name: string) { this.name = name } // public 생략 가능 public greet() { console.log(`hi! ${this.name}`) } } const me = new Aboutme('sophie') me.greet() // output: 'hi! sop..
[Typescript] HTML 변경과 조작
자바스크립트의 원래 목적? html 조작과 변경 index.html 안녕하세요 링크 버튼 타입스크립트로 HTML 변경과 조작 HTML 조작시 narrowing을 해야하는데 5가지 방법이 있다. 1. let 제목 = document.querySelector('#title'); if(제목 != null){ 제목.innerHTML = '반가워요' } 2. instance 연산자 맞으면 true를 퉤퉤퉤 해줌 제목이 Elment로 기인해서 true가 된다. 3. as로 사기치기 let 제목 = document.querySelector('#title') as Element 제목.innerHTML = '반가워요' 4. object에 ?. 붙이는것 let 제목 = document.querySelector('#titl..
[Typescript] 함수에 type alias지정하기
함수 타입 표현 방법 함수 타입은 아래와 같은 형식으로 사용한다. type 함수타입 = (x: string) => number; 함수에 type alias 부착하려면 함수표현식 써야됨 함수표현식? function 함수 () { } 이거 말고!! 쟤는 함수선언식 let 함수 = function (){ } 이모양! 얘가 함수표현식 type 함수타입 = (x: string) => number; let 새함수 : 함수타입 = function(x){ return 10 } object 안에 함수 만들기 아래와 같은 형식으로 객체안에 함수를 넣어주고 .으로 꺼내쓴다. let 챙친구 = { name : 'kim', plusOne(){ } } 챙친구.plusOne() 여기서 잠시 Recap! 콜백함수에 대해서 알아보자 ..
[Typescript] type 변수 만드는법
Type 변수 만들기 변수는 대문자로 하는것이 좋다! 1. type 변수 = {어쩌구저쩌구} let 동물: 변수 = {비슷한 폼} type Animal = {name: string, age : number} let 동물: Animal = {name: 'kim', age: 20}; readonly 기능 🚨 const 변수는 바꿀수없는것들을 쓰고싶을때 사용하는 변수 const 출생지역 = {region : 'seoul'} => 등호로 재할당만 막는 역할이다. const로 담은 object 수정은 자유롭게 가능하다. (자바스크립트때도 몰랐는데 지식 get) ✔️타입스크립트를 쓰면 object 자료수정도 막을 수 있다. 에러가 발생~~ 속성 몇개가 선택사항이라면? 물음표를 사용하면 color가 없어도 에러가 나..
[Typescript] 함수에 타입 지정하는 법 & void 타입 / 타입확정 : Narrowing, Assertion
Recap 함수 함수 이렇게 만들어 씁니다. 1. 길고 복잡한 코드 한단어로 축약 가능하다. 2. 숫자 집어넣으면 다른숫자나오는 매직 블랙박스 역할 함수에 타입지정하는 법 let y; 물음표를 사용하자 차이점! => 렉안뿜어! ⭐️ 중요 ⭐️ ? 물음표 연산자 는 들어올수도 있다~ 라는 뜻이긴한데 변수 ? : number 랑 변수 : (number | undefined) 랑 똑같음 함수에서도 엄격한걸 좋아하는 타입스크립트 지금 x는 UNION 타입이다. (새로운타입!) string + number 가능 console.log('sophie'+3) number + number 가능 console.log(1+3) =>> 엄격하게 코드를 짜줘야됨 전문용어로 네로잉~ Narrowing Type Narrowing ..
[Typescript] 기본 타입 정리 (primitive types) / union type, any, unknown
설치 1. 터미널에 명령어 : npm install -g typescript 2. tsconfig.json 만든다. 3. index(파일명).ts 만들고 코딩시작 4. 터미널에 tsc -w해둔채로 타입스크립트를 실시간으로 컴파일해준다. (브라우저는 타입스크립트를 못읽는다. 자바스크립트로 변환) 변수만들기 변수에 타입지정가능 콜론을 붙이고 타입명 기입. 타입 : string, number, boolean, null, undefined ... let 이름 : string = "kim"; 이름 = 1234; 해버리면? 🚨에러가 나버림. 변수에 실드 씌우는것 let 이름: string = "sophie"; let 나이: number = 50; let 결혼했니: boolean = true; let 회원들: str..