내가 보려고 쓰는 기록

class에 대한 기억을 더듬어 보면 object 복사 기계라고 할 수 있다. constructor 함수를 사용해서! class Car { model: string; price: number; constructor(이름: string, 가격: number) { this.model = 이름; this.price = 가격; } tax(): number { return this.price / 10; } } let 카푸어 = new Car("소나타", 3000); class에서는 type을 constructor 보다 위에서 지정해줘야 this.model에서 가져다 쓸 수 있다. constructor의 파라미터 type도 지정가능하다. constructor의 return 값은 type 지정할필요 없음 ( Car로..

prototype function 공격(스킬, 스킬2) { this.q = 스킬1; this.w = 스킬2; } const 캐릭터1 = new 공격("strike", "snowball"); 공격이라는 객체의 prototype을 콘솔창에 입력하면 위와 같이 검색된다. prototype은 유전자 역할을 한다고 생각하면 됨 공격.prototype.name = "kim";​ 공격의 prototype에 name을 추가하면 공격(부모)이라는 객체로부터 만들어진 캐릭터1(자식)도 name을 사용할 수 있다. 캐릭터1에 name을 지정한 적이 없지만 부모의 유전자이므로 상속받아서 가져다 쓸 수 있는 것! const arr = [4, 2, 1]; arr.sort( ); // 1, 2, 4 arr라는 배열에 요소들을 오름..

narrowing narrowing이란 애매한 변수의 타입의 범위를 좁혀나가는 것을 의미한다. 안녕하세요 링크 버튼 기존 js에서 id가 title인 태그 안의 글자를 바꾸고싶으면? let 제목 = document.querySelector("#title"); 제목.innerHTML = "반가움"; querySelector로 요소 찾고 innerHTML으로 바꿔주면 된다. 근데 에러남잼 querySelector로 찾은 요소는 ' Element | null ' 타입이기 때문에 querySelector를 사용해서 찾은 요소를 사용할 때는 ' null ' 체크를 해서 해당 요소가 찾아진 경우에만 사용하는 것이 안전하다. 이때 ' null ' 인지 아닌지 if문으로 타입을 확인해서 사용하는걸 narrowing 한..

함수에 type alias 지정하기 function 함수(a : string) : number{ } 함수에 타입 지정하는 방법은 코드가 너무 길어진다. 너무 길고 복잡할 땐 함수타입도 type alias로 저장해서 쓸 수 있음 파라미터는 문자로 받고 숫자를 return 하는 타입을 만들고 싶으면 type 함수타입 = ( a : string ) => number 화살표 함수에 넣으면 된다. 만든 타입을 함수에서 사용하려면? 함수를 만들 때 함수 표현식으로 만들어서 함수명 옆에 타입을 넣어줘야 한다. *함수 표현식 : 변수에 함수를 할당하는 방식으로 함수 정의 let 함수명 = function( ){ } let 함수 : 함수타입 = function (){ } * 함수 만드는 법 //함수 표현식 let 함수 ..

Literal types 변수에 뭐가 들어올지 더 엄격하게 관리 가능 자동완성 힌트 있음 let 이름 : string; 위의 타입보다 더 엄격하게 타입 지정이 가능하다. ex) kim이라는 문자만 들어올 수 있다~라고 지정 가능 let 이름 : "kim"; 타입 넣을 자리에 원하는 문자 or 숫자 등을 넣으면 된다. 이름이라는 변수엔 kim 이라는 문자만 들어올 수 있음 function 함수( a : 'hello') : (1 | 0) { return 1; } 위의 함수 실행시키려면 파라미터 값에 무조건 hello만 들어와야하고 return되는 값은 1 or 0 이다 Lieral type의 문제점 var 자료 = { name : 'kim' } function 내함수(a:"kim"){ } 내함수(자료.nam..

type alias let 동물 : string | number | undefined 위와 같이 타입이 너무 긴 경우 or 반복해서 사용하는 경우 따로 변수에 담아서 사용할 수 있다. type이라는 키워드를 사용! type Animal = string | number | undefined; let 동물: Animal = "kim"; type 타입변수명 = 타입종류 이렇게 type 키워드로 변수 만드는 것을 type alias문법 이라고 한다. object인 경우도 가능하다. type Animal = { name: string; age: number } let 동물: Animal = { name: "kim", age: 20 }; *일반변수와 차별화를 두기 위해서 타입변수명의 맨앞문자는 대문자를 사용한다. ..

함수에 타입 지정 함수의 파라미터, return 값에 타입지정이 가능하다. return 값 타입지정은 파라미터 타입지정한 곳의 오른쪽에 지정! function 함수(x : number, y: number) : number{ return x * y } void 타입 함수에서 void 타입 활용 가능하다. return 할 자료가 없을 때, 함수에서 return 하고 싶지 않을 때 사용한다. 실수로 뭔가 return하는걸 사전에 막을 수 있음 function 함수(x : number, y: number) : void{ return x * y } 타입스크립트와 자바스크립트의 차이점 - 함수에서 파라미터에 타입이 지정되어있다면 파라미터는 반드시 작성해야한다. 만약 파라미터가 옵션인 경우(=파라미터 있어도 되고 없..

드디어 타입스크립트 시작! 요즘 프론트엔드 채용공고에 아주아주 많이 보이기때문에 타입스크립트는 꼭꼭 공부해야겠다고 생각했었다. typescript란? javacript + type 문법 (자바스크립트 업글버전) 1. node.js 최신버전으로 설치 2. 터미널 오픈 후 npm install -g typescript 3. 작명.ts 파일 생성 4. tsconfig.json 파일 생성 후 아래의 코드 복붙 *컴파일시 옵션설정이 가능한 곳 { "compilerOptions": { "target": "es5", "module": "commonjs", "noImplicitAny": true, "strictNullChecks": true } } ts파일은 웹브라우저가 읽을 수 없다. 브라우저는 js만 읽을 수 있기..