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. 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..
-
[TS] 배열과 튜플codeStates front-end/Typescript 2023. 3. 12. 20:49
HTML 삽입 미리보기할 수 없는 소스 📌 배열 개별 자바스크립트 배열은 하나의 특정 타입의 값만 가진다. 타입 스크립트는 초기 배열의 어떤 데이터 타입이 있는지 기억하고 배열이 해당 데이터 타입에서만 작동하도록 제한한다. 📍배열 타입 변수에 타입 에너테이션을 제공해 배열이 포함해야하는 값의 타입을 알려주어야 한다. // 선언과 할당을 동시에 let car:string[] = ['BMW','AUDI','BEN'] // 선언과 할당을 분리 let fruits: string[] = []; fruits.push("apple"); fruits.push("banana"); // 제네릭 사용 let fruits:Array= new Array(); fruits.push(1); fruits.push(2); 배열과 함수..
-
[TS] 타입 시스템, 유니언과 리터럴codeStates front-end/Typescript 2023. 3. 6. 17:43
HTML 삽입 미리보기할 수 없는 소스 📌 타입 시스템 📍 타입의 종류 🔗 타입스크립트의 기본 윈시 타입 null undefined boolean string number bigint symbol 🔗 할당가능성 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것 'Type... is not assignable to type ...' // 할당가능성 오류 🔗 타입 에너테이션 초기 다입을 유추할 수 없는 변수는 진화하는 any let rocker; // 진화하는 any rocket = "John" // 타입 : string 📍 유니언과 리터럴 유니언 : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 리터럴 : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 ..