티스토리

Stack flows in you

검색하기

블로그 홈

Stack flows in you

sunshineyellow.tistory.com/m

길게 생각하고 짧게 그리기

구독자: 4

방명록 방문하기

주요 글 목록

[코딩애플] 타입스크립트에서의 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 { .. 공감수 0 댓글수 0 2023. 12. 20.
[코딩애플] 타입스크립트 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해.. 공감수 0 댓글수 1 2023. 12. 17.
[코딩애플] 타입스크립트 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 | .. 공감수 0 댓글수 0 2023. 12. 17.
[코딩애플] 함수와 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.. 공감수 0 댓글수 0 2023. 12. 13.
[코딩애플] 타입을 특정 값으로 지정하자 : 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.. 공감수 0 댓글수 0 2023. 12. 13.
[코딩애플] 타입을 변수에 담자 : 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의 내부 속성은 변경할 수 있다. 타입스크립트에서는 이것에 에러를 띄울 수.. 공감수 0 댓글수 0 2023. 12. 11.
타입스크립트 타입 유추(Type Inference) TypeScript는 정적 타입 언어로, 변수, 매개변수, 반환값 등의 타입을 명시적으로 선언할 수 있다. 그러나 TypeScript는 타입 유추(Type Inference)라는 기능을 제공하여, 타입을 명시적으로 선언하지 않아도 컴파일러가 코드를 분석하여 타입을 유추할 수 있도록 한다. 변수 선언 let myNumber = 10; // 자동으로 number 타입으로 유추 let myString = "Hello"; // 자동으로 string 타입으로 유추 매개변수와 반환값 function add(x, y) { return x + y; // x와 y를 자동으로 any 타입으로 유추 } let result = add(5, 10); // result를 number 타입으로 유추 배열과 객체 let number.. 공감수 0 댓글수 0 2023. 12. 7.
[코딩애플] 타입스크립트 타입 지정 방법 변수 타입 지정하기 일반 타입 지정 let 이름 :string = 'kim' //string, number, boolean, bigint, null, undefined,[], {} 여러가지 타입 지정 let 이름 :string | number = 'kim'; object 타입 지정 let 나이 :{ age : number } = { age : number } 한꺼번에 타입 지정하기 type MyObject = { [key :string] : number, } let 철수 :MyObject = { age : 50, weight : 100, } 어떤 속성이 들어갈지 모를 때 사용 가능하다. array 타입 지정 let 이름 :string[] = ['kim', 'park'] let 나이 :{ age : num.. 공감수 0 댓글수 0 2023. 12. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.