Frontend/TypeScript7 [TypeScript] 객체 타입 1. 객체 타입 / 비원시 타입① objectJavaScript의 객체 Object의 정의에 맞게 대응되는 타입'any' 타입과 유사하게 모든 타입 값을 유동적으로 할당할 수 있음const player : object = { name: "홍길동", age : 25, isMarried: false}; player 객체의 타입을 object로 지정하고, 이후 name, age, isMarried 속성을 추가하였다.다만 이 방식은 객체 속성의 타입을 지정할 수 없다는 특징을 가지고 있다.② '{ }' JavaScript에서 객체를 생성할 때는 'new Object()' 혹은 '{ }' (객체 리터럴) 방식을 사용한다.이와 마찬가지로 TypeScript에서 변수 타입을 object로 지정할 때o.. 2024. 6. 10. [TypeScript] Data Type's 메모 TypeScript의 Data TypeC, C++, Java와 같은 강타입 언어처럼, 변수 선언 시 타입을 명시할 수 있다.물론 JavaScript처럼 별도의 타입 지정 없이 변수만 선언하는 것도 가능하다.변수 선언 시 타입을 명시하지 않았다면, TypeScript가 자체적으로변수에 할당된 값의 타입에 따라, 해당 변수의 타입을 추론한다. (타입 추론)let a = "hello"; //TypeScript가 자체적으로 변수 a가 string 타입 변수라고 추론한다.a = "Hello World"; //문제 Xa = 10; //Error, //변수 a는 String 타입의 변수라고 파악했는데//number 타입의 값, 10을 할당하려고 시도하면 Error가 발생함.//변수 타입과 값, 데이터의 타입 불일치로.. 2024. 6. 10. [TypeScript] create-react-app에 TypeScript 설치하기 1. 'create-react-app'에 TypeScript 설치하기npx create-react-app my-app 위의 명령어는 React App을 만들 때 사용하는 명령어이다.여기서 아래와 같이 '--template typescript' 추가하면 TypeScript를 같이 설치할 수 있다.npx create-react-app my-app --template typescript설치가 완료되면, 기존에 'create-react-app'으로 생성된 React App 초기 파일에서TypeScript와 관련된 파일이 추가 혹은 변경된 것을 확인할 수 있다.(CRA 기본 프로젝트와 관련된 파일들을 개별적으로 정리한 뒤에 캡쳐한 것이다.)앞에서 다룬 명령어는 React App을 처음부터 생성하는 명령어이다.즉,.. 2024. 4. 20. [TypeScript] 타입 단언 Type Assertion 1. 개요 ① 문제 발생 (ts2339: Property does not exist on type) ② 문제 해결과정 1 (변수 SearchInput에 저장되는 DOM 객체의 타입을 HTMLElement로 단언) ③ 문제 해결과정 2 (변수 SearchInput에 저장되는 DOM 객체의 타입을 HTMLInputElement로 수정) 2. 타입 단언 (Type Assertion0) 3. Reference 1. 개요 ① 문제 발생 (ts2339: Property does not exist on type) '나만의 크롬 시작화면'의 검색창을 구현하다가 아래와 같은 Error를 보게 되었다. const SearchInput = document.getElementById("Search_Input"); const .. 2023. 10. 6. [TypeScript] Object is possibly 'null' 현재 수강 중인 자바스크립트 강의에서 나온 '나만의 크롬 시작화면 만들기' 프로젝트에 타입 스크립트를 무작정 도입을 시도했다가 자잘한 부분부터 문제가 생기기 시작했다. 이번에 정리한 것은 프로젝트를 빌드한 2023.09.20 일자에 발생했던 문제를 해결하는 과정에 대한 것이다. const dateElement = document.getElementById("Today_Date"); const setNowDate = (month: number|string, date: number|string, day: string) => { dateElement.textContent = `${month}월 ${date}일 ${day}`; //문제가 발생한 부분 }; 이런 식으로 'dateElement'라는 객체가 null.. 2023. 9. 23. ts 파일 컴파일 관련 변경사항 앞에서 ts 파일을 컴파일할 때 아래와 같이 명령어를 입력해서 컴파일했었다. npx tsc '파일명' 매번 이렇게 하기는 좀 번거로운 감이 없잖아 있기 때문에 컴파일할 ts 파일 명을 입력하지 않아도 컴파일을 할 수 있게 설정해보도록 하겠다. 먼저 package.json 파일로 들어가서 script { }에 아래와 같은 logic을 추가해주자. //package.json script { //기존 코드 "test": "echo \"Error: no test specified\" && exit 1", //새로 추가한 코드 "build": "tsc --build", //npm run build 시 ts 파일이 컴파일된다. /* tsconfig.json 파일에서 "include" 속성으로 * 컴파일할 폴더를 지.. 2023. 9. 11. 이전 1 2 다음
