프론트엔드/TypeScript5 [ TypeScript ] js 파일 ts로 변환 using-ts.js 파일을 using-ts.ts 파일로 바꾸니 아래와 같이 VScode에서 빨간 줄이 생겼다. const button = document.querySelector("button"); const input1 = document.getElementById("num1"); const input2 = document.getElementById("num2"); function add(num1, num2) { return num1 + num2; } button.addEventListener("click", function() { console.log(add(input1.value, input2.value)); }); ! 와 HTMLInputElement 추가 const button = docume.. 2023. 2. 2. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (2) 앞에서 TypeScript+React를 사용한 정적인 리스트를 만들어 보았습니다. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. T codesign.tistory.com 이번에는 리스트에 데이터 모델을 추가해보았습니다. 파일 전체 아웃라인 > react-ts 파일 > node_modules > public > src > src > components > Todos.tsx > models > todo.ts (이 파일 만들 예정입.. 2022. 10. 22. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. Todos.tsx 파일 만들기 4. App.tsx 파일 만들기 5. 결과물 1. package.json 파일 생성 종속 라이브러리를 설치하는데 이 파일이 필요합니다. npm init -y 2. typescript 설치 명령어 npx create-react-app react-ts --template typescript 파일을 만들어준 뒤 밑의 명령어로 프로젝트를 실행시켜 주세요. npm start 파일 전체 아웃라인 > react-ts 파일 > node_modules .. 2022. 10. 21. [ TypeScript ] TypeScript설치 및 실행 & 작동 방법 1. package.json 파일 생성 종속 라이브러리를 설치하는데 이 파일이 필요합니다. npm init -y 2. TypeScript 파일 설치 npm install typescript 이제 타입스크립트 컴파일을 사용할 수 있게 됩니다. 3. TypeScript 실행 Extra 타입스크립트는 자바스크립트와 달리 코드가 브라우저에서 코드를 실행하지 않습니다. 그래서 타입스크립트를 자바스크립트 형태로 컴파일해야 합니다. 컴파일이 진행되는 동안 타입 표기는 모두 삭제됩니다. 왜냐하면 자바스크립트는 타입 표기를 이해하지 못하기 때문입니다. 컴파일 단계에서는 우리가 코드를 작성하면서 미처 발견하지 못했던 오류들을 찾아 알려줍니다. 컴파일된 코드는 브라우저에서 실행이 됩니다. 컴파일러를 사용하려면 아래 명령어를.. 2022. 10. 20. [ TypeScirpt ] TypeScirpt란? TypeScript란? 자바스크립트 문법에 타입 표기 구문이 추가되고 자바스크립트 문법에 몇 가지 기능을 추가한 것입니다. 타입스크립트와 리액트의 차이점은? 타입스크립트는 리액트와 달리 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않습니다. 대신 자바스크립트의 주요 문법보다 확장된 문법을 가집니다. 타입스크립트의 특징 타입스크립트는 정적 타입(statically Typed) 언어입니다. 자바스크립트가 동적 타입 (dynamically typed) 언어입니다. 그리고 자료형(Type)이 있습니다. 하지만 동적 타입이라 함수 선언 시점에서 자료형을 특정 짓지 않습니다. 아래의 예제 코드를 보면 두 개의 매개 변수를 받는다는 것만 알고 타입.. 2022. 10. 19. 이전 1 다음 728x90
