'📃 Front-End/TypeScript' 카테고리의 글 목록

타입스크립트의 모듈

2022.10.23

ES6 와 비슷 합니다. 모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export, import 와 같은 키워드를 사용하지 않으면 다른 파일에서 접근할 수 없습니다. 사용방법 ✔ Export ES6의 export와 같은 방식으로 변수, 함수, 타입, 인터페이스 등에 붙여 사용합니다. // types.ts export interface Todo { title: string; checked: boolean; } ✔ Import ES6의 import와 동일한 방식으로 사용합니다. // app.ts import { Todo } from './types' let item: Todo = { title: '할 일 1', checked: false } ✔ Tip import 를 입력하고 {} 빈 객체를 먼저 ..

📃 Front-End/TypeScript

타입 호환(Type Compatibility)

2022.10.23

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미합니다. ✔ 구조적 타이핑 예시 구조적 타이핑(structural typing)이란 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것입니다. ✔ 인터페이스 interface Developer{ name: string; skill: string; } interface Person{ name: string; } let developer: Developer; let person: Person; developer = person; // 에러이유 : 왼쪽에 있는 변수가 더 큰 관계를 가지고 있어서 person = developer; // 에러가 안뜬다. 오른쪽에 있는 타입이 더 많은 속성을 가지거나, 구조적으로 더 컸을 때 왼쪽과 호환이..

📃 Front-End/TypeScript

타입 가드(Type Guard)

2022.10.23

특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정 설명하기 위한 사전 예제 interface Developer{ name: string; skill: string; } interface Person { name: string; age: number; } function introduce(): Developer | Person{ return {name: 'Tony', age: 33, skill:"Iron Making"} } let tony = introduce(); console.log(tony.skill); // 유니온 특징에 의해 접근 불가 // 타입 단언을 사용하여 접근 if((tony as Developer).skill){ let skill = (tony as Developer).skill..

📃 Front-End/TypeScript

타입 단언(Type Assertion)

2022.10.23

타입스크립트 보다 개발자가 더 타입을 잘 알고 있다는 가정을 하고 '개발자가 정의한 타입으로 간주를 해라' 라는 의미 입니다. as 키워드 사용한 후 타입 적기 let a; // 타입 추론에 의해 any 타입 a = 20; a = 'a'; let b = a; // a의 타입이 바뀌고 할당을 하여도 아직 타입 추론에 의해 a: any 타입 // 맨 처음 할당한 타입의 값이 그대로 b에 들어가서 b: any 타입 개발자가 보는 관점에서는 a 가 string 이 될 것이라고 알 수 있습니다. 하지만 타입스크립트 관점에서는 그렇지 않습니다. 아래와 같이 사용하면 타입이 개발자의 관점으로 단언이 됩니다. let b = a as string; a 라는 것은 string 으로 간주 합니다. 즉, b 의 타입은 str..

📃 Front-End/TypeScript

타입 추론(Type Inference)

2022.10.23

타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. ✔ 타입 추론의 기본 let x = 3; 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 일단 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. ✔ 인터페이스와 제네릭을 이용한 타입 추론 interface Dropdown{ value: T; title: string; } let shoppingItem: Dropdown = { value: 'abc', title: 'hello' } 제네릭을 이용해 string 을 넘겼기 때문에, value 의 타입은 string이 됩니다. interface Dro..

📃 Front-End/TypeScript

제네릭(Generics)

2022.10.23

✔ 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭(Generics) 정의 ❓ 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것 ✔ 기본적인 문법 키워드 사용 // JS 함수 사용 시 function logText(text){ console.log(text); return text; } logText(10); // 숫자 logText('hello'); // 문자열 logText(true); // 진위값 // TS - 제네릭 function logText(text: T):T{ console.log(text); return text; } logT..

📃 Front-End/TypeScript

타입스크립트의 클래스

2022.10.23

✔ 자바스크팁트의 클래스 // 기존의 생성자 함수 function Person(name, age){ this.name = name; this.age = age; } var seho = new Person('세호', 30) // 클래스 class Person{ // 클래스 로직 constructor(name, age){ console.log('생성 되었습니다'); this.name = name; this.age = age; } } var seho = new Person('세호', 30); console.log(seho) 위의 두 개의 코드는 같습니다. ✔ 타입스크립트의 클래스 문법적인 차이가 있습니다. class Person { name: string; // class 안에서만 사용하고 싶으면 앞에 pri..

📃 Front-End/TypeScript

Enum ( 이넘 )

2022.10.22

특정 값들의 집합을 의미하는 자료형 ✔ 숫자형 이넘 enum Shoes{ Nike, // 0 Adidas // 1 } let myShoes = Shoes.Nike; console.log(myShoes); // 0 별도의 값을 지정하지 않으면 숫자형으로 취급 합니다. enum Direction { Up = 1, Down, Left, Right } // 결과 Up - 1 Down - 2 Left - 3 Right - 4 ✔ 문자형 이넘 enum Shoes{ Nike = '나이키', Adidas = '아디다스' } let myShoes = Shoes.Nike; console.log(myShoes);// '나이키' 예시 ✔ 사용하기 전 function askQuestion(answer: string){ if(a..

티스토리툴바