📘 TypeScript

타입스크립트 숙제 Part 2 (5~9) : 클래스, 오브젝트 타입지정

Car 클래스 만들기 { model : '소나타', price : 3000 } 이렇게 생긴 object를 복사해주는 class를 만들어야 한다. 그리고 복사된 object 자료들은 .tax() 라는 함수를 사용가능한데 현재 object에 저장된 price의 10분의1을 출력해주어야한다. model과 price 속성과 tax() 함수의 return 타입지정 하자. class Car { model: string; price: number; constructor(model: string, price: number) { this.model = model; this.price = price; } tax() :number{ return this.price / 10; } } const morning = new Car..

[코딩애플] 타입스크립트에서의 class : constructor, prototype 타입지정

타입스크립트에서 class의 constructor 사용하기 일반적인 JavaScript 클래스 및 객체 생성의 예시이다. // JavaScript class Candidate { constructor(personality, age, gender) { this.personality = personality; this.age = age; this.gender = gender; } } const candidate1 = new Candidate('good', 28, 'woman'); JavaScript에서는 타입 정보를 명시적으로 선언하지 않는다. 그렇게 때문에 위처럼만 표기해도 되지만, 타입스크립트에서는 각 속성과 매개변수에 타입지정을 해주어야 한다. // TypeScript class Candidate { ..

[코딩애플] 타입스크립트 HTML 조작시 주의점 (2) : 더 narrowing하기

우선.. { "compilerOptions": { ... "strictNullChecks": true, ... }, } tsconfig.json 파일에서 strictNullCheck 옵션을 true로 바꾼다. (혹은 "strict" : true로 써둬도 된다) 이렇게 설정하면 TypeScript 컴파일러는 더 엄격한 규칙을 적용하며, 변수에 대한 null 체크가 강제된다. href 조작시 오류 let link = document.querySelector('#link'); if(link instanceof HTMLElement){ link.href = 'https://kakao.com'; } HTMLElement 타입은 href 속성이 없다는 오류가 뜬다. 링크태그의 경우에는 좀더 좁게 narrowing해..

[코딩애플] 타입스크립트 HTML 조작시 주의점 (1)

우선.. { "compilerOptions": { ... "strictNullChecks": true, ... }, } tsconfig.json 파일에서 strictNullCheck 옵션을 true로 바꾼다. (혹은 "strict" : true로 써둬도 된다) 이렇게 설정하면 TypeScript 컴파일러는 더 엄격한 규칙을 적용하며, 변수에 대한 null 체크가 강제된다. HTML 조작시 오류 let title = document.querySelector('#title'); title.innerHTML = '안녕하세요'; // title is possibly Element | null TypeScript에서 strictNullChecks 옵션이 활성화된 경우, 위 메서드의 반환 타입은 Element | ..

[코딩애플] 함수와 object 메서드에 type alias 지정하기

함수 type alias 함수 타입도 type alias로 저장해서 쓸 수 있다. type NumOut = (x : number, y : number ) => number let ABC :NumOut = function(x,y){ return x + y } function 키워드에는 파라미터 내부나 {} 바로 왼쪽에만 타입지정이 가능하기 때문에 function 함수이름 :NumOut (){} 형태는 사용할 수 없어서 위 코드처럼 사용한다. *** 주의사항 : 함수 type alias를 부착하려면 함수표현식으로 써야 한다. object 메서드 type alias type Member = { name : string, age : number, plusOne : ( x :number ) => number, c..

[코딩애플] 타입을 특정 값으로 지정하자 : Literal Types (+ as const)

Literal Types 타입지정을 더욱 strict하게 특정 글자나 숫자만 가질 수 있게 제한을 둘 수 있다. // 문자열 리터럴 타입을 사용한 파라미터 function greet(name: "Alice" | "Bob"): "Hello, Alice!" | "Hello, Bob!" { return `Hello, ${name}!`; } // 숫자 리터럴 타입을 사용한 파라미터 function multiply(a: 2 | 3, b: 2 | 3): 6 { return a * b; } // 불리언 리터럴 타입을 사용한 리턴값 function isAdmin(userType: "admin" | "regular"): boolean { return userType === "admin"; } // 사용 예시 consol..