타입스크립트
-
[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..
-
[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. 12. 19:46
HTML 삽입 미리보기할 수 없는 소스 📌 함수 📍함수 매개변수 💁매개변수란? 함수를 정의할 때 사용되는 변수를 의미 타입 스크립트에서 함수는 자바스크립트처럼 생성할 수 있으나, 매개변수의 타입과 반환 타입을 설정해야 한다. // 타입을 선언하지 않으면 any로 간주한다 function sing(song : string){ console.log('Singing : ${song}!'); } 🔗 필수 매게변수와 선택적 매게변수 필수 매게변수 타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정한다. function sendGreeting (message : string, userName: string):void { console.log (`${message}, ${userName}`); } s..
-
[TS] 객체codeStates front-end/Typescript 2023. 3. 6. 20:36
HTML 삽입 미리보기할 수 없는 소스 📌 객체 📍객체 타입 기존 객체에서 타입을 유추하는 방법도 좋치만, 객체 타입을 명시적으로 선언하는 방법도 좋다. 값의 속성의 접근하려면 value.멤버 또는 value['멤버'] const poet = { born : 1935;, name : "Mary Oliver" } poet['born']; // 타입 : number poet.name; // 타입 : String poet,end; // Error // 객체 타입 선언 let student : { age : number; name : string; } student = { age : 20; name : "jeong"; } // 별칭 객체 타입 let student2 : student; student2 = { a..
-
<react-native>mission 앱 제작1_메인화면, 로그인, 홈 화면, ...app/react-native 2022. 5. 18. 13:31
APP 제작 APP 설명 혼자서는 정해진 일을 하지 못하게 되고, 좋은 습관을 들이지 못하는 사람들을 위해, 오늘 일을 내일로 미루는 사람들을 위해 터치 업 할 수 있도록, 타인과 약속을 만들고 공유하여 능률을 올릴 수 있는 어플 구조설명 DB 관계도 현재까지 구현 page 설명 src - assets 필요한 image - components - core 아직 불필요 - core - theme.tsx만 사용 - screens 보여지는 화면 app.tsx screens가 보이도록 연결 pakage.json 깔아야하는 패키지를 보여줌 pakage.json 필요한 pakege들을 yarn or npm 으로 설치 app.tsx src/screen으로 가도록 연결 가장 첫화면은 appstack에 들어가는 logi..