Web/TypeScript 10

interface object 타입지정

타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 비해 타입을 엄격하게 처리하므로 변수 또는 객체를 선언할 때, 타입을 정의해야 합니다. 객체의 타입을 정의하는 방법은 interface와 type이 존재하는데, 대부분의 TypeScript 개발자들은 확장성이 좋은 interface 사용을 권장합니다. 하지만, 타입이 심플하거나 절대 변경되지 않는 경우에는 type을 사용하여 객체의 타입을 정의하기도 합니다. type Square = { color: string; width: number }; //type키워드로 타입지정 let 네모: Square = { color: "red", width: 100 }; interface Square { color: string; width: numb..

Web/TypeScript 2023.02.20

class 타입지정

클래스의 필드값 class Person{ data = 0; } Person이라는 클래스에 constructor 없이 변수를 선언. 이런 필드값들은 생성된 모든 자식들에게서 사용이 가능하다.(모든 자식들 위 data 속성 갖다 쓸수 있음) class 필드값(constructor와 똑같은 역할) 사람1, 사람2는 data를 갖다 쓸수 있다.. let 사람1 = new Person(); let 사람2 = new Person(); console.log(사람1.data); // 0이 나옴 console.log(사람2.data); // 0이 나옴 중요한 건 변수의 타입지정! class Person{ data :number = 0; } : number로 타입지정 가능하지만 생략해도 대부분 상황에서 컴파일러가 타입지정..

Web/TypeScript 2023.02.17

타입스크립트로 HTML 변경과 조작할 때 주의점

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com 안에 글자를 바꾸기 위해 아래처럼. //index.html파일 안녕하세요 링크 버튼 //index.ts파일 let 제목 = document.querySelector("#title"); 제목.innerHTML =..

Web/TypeScript 2023.02.17

함수와 methods에 type alias 지정하는 법

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com 함수 타입 저장 함수 타입(function type)도 type alias로 저장해서 쓸 수 있다. 단, 함수표현식을 사용해서 써야함. type 함수타입 = (a:string) => number; let 함수:..

Web/TypeScript 2023.02.12

Literal Types

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com 엄격한 타입지정. Literal Type: 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입 let 이름 :'kim' 이 변수엔 무조건 kim만 들어올 수 있음. 함수의 Literal Type. functio..

Web/TypeScript 2023.02.12

Type Aliases & readonly

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com Type Aliases (별칭) 타입이 길고 복잡하면 변수에 담아서 쓸 수 있다. type 타입변수명 = 타입종류 //변수에 타입지정 let 동물: string | number | undefined; //위처럼..

Web/TypeScript 2023.02.12

Type Narrowing & Assertion

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com 1. Type Narrowing Type이 하나로 확정되지 않았을 경우, 데이터를 처리하고 싶을때 type을 하나로 정하는 것. function 함수(x :number | string){ if (typeof x..

Web/TypeScript 2023.02.11

함수에 타입 지정& void 타입

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com 1. 함수에 타입지정 파라미터에 타입지정가능. 함수 실행 후 남는 값에 타입지정가능. function 내함수(x :number) :number { return x * 2 } 파라미터 없을 경우에는 이 파라미터는..

Web/TypeScript 2023.02.11

타입을 미리 정하기 애매할 때 (union type, any, unknown)

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com 1. Union type string 또는 number가 들어올수 있다고 타입정의 할때 | 연산자 사용. 이런 타입을 Union type 이라고 부름. let 이름: string | number = 'kim';..

Web/TypeScript 2023.02.10

타입스크립트 쓰는 이유 & 필수 문법 정리

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다. 더 자세한 설명은 해당 강의를 참고하세요.. https://codingapple.com/course/typescript-crash-course/ 빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때 codingapple.com https://youtu.be/xkpcNolC270 1. 타입스크립트를 쓰는 이유 자바스크립트는 Dynamic typing 을 지원하는 언어. 알아서 타입을 바꿔줌. 이런 자유도&유연성이 높은점이 큰 프로젝트..

Web/TypeScript 2023.02.10