📘 TypeScript/개념

[코딩애플] 타입스크립트에서의 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..

[코딩애플] 타입을 변수에 담자 : type alias

type alias 타입을 변수에 담을 수 있다. type alias는 영문 대문자로 시작하는 규칙이 있다. type Name = string | number; let 이름 :Name = 'kim'; type MyObject = { name? : string, age : number } let 철수 :MyObject = { name : 'kim', age : 50 } Object 변경 에러띄우기 type MyObject = { readonly name : string, } let 철수 :MyObject = { name : 'kim', } 철수.name = 'Park'; // 에러 const는 변수 재할당이 불가능하지만, object의 내부 속성은 변경할 수 있다. 타입스크립트에서는 이것에 에러를 띄울 수..