codeStates front-end/Typescript
-
[learn-typescript] interface 코딩 작성codeStates front-end/Typescript 2023. 7. 5. 18:15
📌 interface 코딩 작성 interface User { age: number; name: string; } // 변수에 활용한 인터페이스 var seho: User = { age: 33, name: 'seho' } // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } // User에 정의된 변수와 타입을 맞춰야 한다! const capt = { name: 'capt', age: 11 } getUser(capt); // 함수의 스펙에 인터페이스를 활용 interface SumFuction { (a: number, b: number): number; } let sum: SumFuction; sum = function(a: number..
-
[learn-typescript] 할 일 관리 앱 JS -> TS 변환codeStates front-end/Typescript 2023. 7. 4. 16:33
📌 할 일 관리 앱 JS -> TS 변환 JavaScript let todoItems; // api function fetchTodoItems() { const todos = [ { id: 1, title: '안녕', done: false }, { id: 2, title: '타입', done: false }, { id: 3, title: '스크립트', done: false }, ]; return todos; } // crud methods function fetchTodos() { const todos = fetchTodoItems(); return todos; } function addTodo(todo) { todoItems.push(todo); } function deleteTodo(index) { ..
-
[learn-typescript] typescript의 장점codeStates front-end/Typescript 2023. 7. 3. 16:53
📌 typescript를 써야하는 장점 📍장점 1. 에러의 사전 방지 타입을 명명하여 에러를 사전의 방지한다. app.js function sum(a, b) { return a + b; } app.ts function sum(a: number, b: number) { return a + b; } 👩⚖️ js의 경우, 타입이 number이 외의 타입이 들어오면 client 브라우저에서 에러 확인이 가능했으나 ts의 경우, 타입이 number 이 외의 타입이 들어오면 코드에서 에러가 나기 때문에 에러를 사전의 방지할 수 있습니다. 자바스크립트를 타입스크립트처럼 사용하는 방법 타입을 활용하여 사전의 값이 들어올 타입에 대해 미리 알 수 있다. // api url var url = 'https://jsonpl..
-
[learn-typescript] live server 이용해서 user 정보 가져오기codeStates front-end/Typescript 2023. 6. 28. 18:09
📌 live server 이용해서 user 정보 가져오기 app.ts // api url var url = 'https://jsonplaceholder.typicode.com/users/'; // dom var username = document.querySelector('#username'); var email = document.querySelector('#email'); var address = document.querySelector('#address'); // user data var user = {}; function startApp() { axios .get(url) .then(function (response) { console.log(response); user = response.dat..
-
[TS] 제네릭codeStates front-end/Typescript 2023. 3. 23. 21:52
HTML 삽입 미리보기할 수 없는 소스 📌 제네릭 알려진 타입은 사용하는 것이 아닌 코드에서 호출하는 방식에 따라 다양한 타입으로 작동하도록 하려면 어떻게 해야 할까? 🙋♂️ 타입을 선언하지 않는 다면? any로 간주👉🏻👉🏻 any는 모든 타입을 뜻하는게 아니라 제한을 두지 않는 것일 뿐 👉🏻👉🏻 엄격한 검사를 하지 않기 때문에 문제가 발생할 수 있다. 🙋♂️ 모든 타입을 허용하려면? 제네릭 사용 👉🏻👉🏻 타입 간의 관계를 알아낸다. 🙋♂️ 제네릭이란? 타입을 마치 함수 파라미터로 사용한다는 것, 코드를 수행될 때(런타임) 타입을 명시 any처럼 타입을 지정하지 않지만, 타입을 체크해 컴파일러가 오류를 찾을 수 있다. 재사용성이 높은 컴포넌트를 만들 때 자주 활용 📍 제네릭 함수 매개변수 괄호 바로..
-
[TS] 타입 제한자codeStates front-end/Typescript 2023. 3. 21. 17:01
HTML 삽입 미리보기할 수 없는 소스 📌 타입 제한자 지금 까지 기본 자바스크립트 구성요소와 함께 작동방식을 봤더라면. 이제부터는 타입 시스템에서 한 걸음 나아가 다른 타입을 기반으로 하는 타입뿐만 아니라 더 정확한 타입 작성에 중점을 둔 기능을 본다. 📍top 타입 top 타입은 시스템에서 가능한 모든 값을 나타내는 타입 any 다시 보기 any 타입은 모든 타입의 위치에 제공 될수 있는 점에서 top타입처럼 작동할 수 있다. But!!!! any 👉🏻👉🏻 해당 값에 대한 할당 가능성 또는 멤버에 대해 타입 검사를 수행하지 않도록 명시적으로 지시 타입 검사를 건너 뛰어 용용하지만, 타입스크립트의 유용성이 줄어든다. any 타입을 사용한 예시 function greet(name: any) { cons..
-
[TS] 클래스codeStates front-end/Typescript 2023. 3. 20. 21:26
HTML 삽입 미리보기할 수 없는 소스 📌 클래스 📍클래스 타입스크립트는 자바스크립트와 동일하게 클래스를 선언하고 사용할 수 있다. 클래스란? 여러 객체들을 생성하기 위한 탬플릿 (EX) 클래스 : 붕어빵 기계, 객체 : 붕어빵) 클래스의 핵심 기능은 상속!!!! 👉🏼👉🏼 효율적이고 유지보수가 편함 빈 클래스를 생성해서 새로운 프로퍼티를 선언 class Site { no: number = 0; } 🔗 클래스 메서드 클래스는 기본적으로 속성과 메서드를 갖는다. 클래스에서 매게변수 타입에 타입이나 기본값을 지정하지 않으면 any 메서드를 호출하려면 허용 가능한 수의 인수가 필요하고, 재귀함수가 아니라면 대부분 반환타입 유추 가능 빈 프로퍼티 아래에 메소드를 추가 class Site { no: number; ..
-
[TS] 인터페이스codeStates front-end/Typescript 2023. 3. 12. 21:39
HTML 삽입 미리보기할 수 없는 소스 📌 인터페이스 JAVA에서는 인터페이스를 추상 메소드와 상수만을 정의한 클래스 위주로 다루지만, 타입스크립트에서는 인터페이스를 객체 위주로 다룬다. 📍타입 별칭 vs 인터페이스 객체 구조 타입을 선언해서 사용한다고 가정할 때, 인터페이스로도 구현 가능하고, 타입 별칭으로도 구현이 가능하다. 인터페이스는 확장이 가능하기 때문에 인터페이스로 구현하는 것을 권장하다. // 리터럴 객체 타입 const a1: { name: string; age: number; talk: () => void; } = { name: '홍길동', age: 12, talk() {}, }; // type alias 객체 타입 type Ty = { name: string; age: number; t..