Web Study/TypeScript5 타입스크립트 시작하기 매번 python flask 만 다루다가 nestjs 를 배워보기 위해 타입스크립트를 배워보려고 한다.역시 모든 언어의 시작은 개발환경 세팅과 옵션 설정이 아니던가! 차근차근 다루면서 확장해나갈 예정이다. 초기 설정npm initnpm i @types/node // nodejs의 api에 대한 타입 정의 파일npm i typescript -g // 최초 1회(X) npm i ts-node -g // TS 파일을 JS 로 즉시 실행해줄 때 사용 (디폴트는 tsc로 컴파일한 후 nodejs로 실행해야 함)==> 20 버전 이후로는 tsx 사용npm i tsx -g // 최초 1회tsc --init // tsconfig.json 파일 생성을 위해 tsconfig.jsoninclude타입스크립트 컴파일러에게 컴.. 2025. 7. 27. 리액트와 타입스크립트 useState useState(초기값) 형태로 사용 import React, { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0); return ( {count} setCount((cur :number) => cur + 1)}>+ setCount((cur :number) => cur - 1)}>- ) } useRef HTML DOM 요소를 컨트롤할 때 컴포넌트가 리렌더링 되더라도 값을 유지하는 변수로 사용할 때 HTML DOM 요소를 컨트롤하려면 HTML태그명Element 의 타입으로 접근 const inputRef = useRef(null); ... import React, {.. 2023. 4. 30. 타입스크립트 필수 문법 정리 인터페이스 interface readonly 읽기전용 키워드 ? 선택적 프로퍼티/메서드 키워드 열거형 enum 리터럴 타입, | 를 사용 Any 어느 타입이든 가능하게 설정 유니언 타입 | 를 사용하여 여러 타입들을 동시에 지정 타입 검사 typeof 커스텀 타입 만들기 type 매개변수의 기본값 지정 (= 기본값) 접근 제한자 private public protected 클래스의 constructor 클래스로부터 객체를 만들 때 호출되어 객체의 초기화 담당 private로 정의된 프로퍼티를 다루기 위한 Getter/Setter get 프로퍼티() { return } set 프로퍼티(value) { } 타입스크립트와 HTML 자바스크립트 -> document.querySelector() 로 DOM 에 접.. 2023. 4. 25. 타입스크립트 기초 인터페이스 키워드 : interface 인터페이스명은 보통 i- 접두사를 붙여줘서 명명하지만 타입스크립트에선 지양한다. 그리고 첫글자는 대문자를 사용해준다. interface 인터페이스명 { 키: 타입; 키: 타입; ... } interface Student { studentID :number; studentName :string; age :number; gender :string; subject :stirng; courseCompleted : boolean; } 명시된 인터페이스는 타입처럼 사용해줄 수 있다! 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다! function getStudentDetails(studentID :number) :Student { retur.. 2023. 4. 20. 이전 1 2 다음
