Psychogrammer

🌕 Front/🎫 Typescript 검색 결과

해당 글 10건

[Typescript] 좀 더 알아보기(Type Assertion, Index Signature)

1. Type Assertion - 타입스크립트가 추론하지 못하는 타입을 as keyword를 통해 명시해주는 것 - Type casting: 데이터의 타입을 변환 - Type assertion: 데이터의 타입을 명시 Type Assertion의 두 가지 형태 1. As let someValue: unknown = 'this is a string'; let strLength: number = (someValue as string).length; 2. Angle Bracket let someValue: unknown = "this is a string"; let strLength: number = (someValue).length; - JSX에서는 꺾쇠괄호를 통한 Type Assertion은 태그와 혼동되..

🌕 Front/🎫 Typescript 2022. 3. 24. 14:32

[Typescrip] 타입 가드 (intersection, union, Type Guard) 가드 올려!

타입 가드(Type Guard) 배울 개념 intersection Type union Type Type Guard 1. 문제 발생 interface Animal { eat: () => void; sleep: () => void; } class Dog implements Animal { eat() {} sleep() {} } class Cat implements Animal { eat() {} sleep() {} } Dog클래스에 bark()메서드를 추가하고 싶은데? 그러기 위해선, Animal인터페이스에 bark()를 추가해야하고, Animal인터페이스를 구현하는 Cat클래스도 bark()메서드를 구현해야하는 비효율이 발생한다. 해당 타입을 쓰는 모든 코드에 변경을 가하지 않고, 특정 코드만 자유롭게 타..

🌕 Front/🎫 Typescript 2022. 3. 22. 15:16

[Typescript] 함수 사용하기 (parameter, optional, rest, overloading)

1. 함수 선언 • 매개변수와 리턴값의 타입을 선언 후 사용하면 된다. function func1(name: string): string { return 'hello ${name}'; } const func2 = function (name: string): string { return 'hello ${name}'; } const func3 = (name: string): string => { return 'hello ${name}'; } const world4 = (name: string): string => 'hello ${name}'; 2. 매개변수 수 일치 • 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다. function buildName(firstName: string..

🌕 Front/🎫 Typescript 2022. 3. 22. 13:00

[Typescript] 유틸리티 타입 12가지 사용하기

• TypeScript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다. • 유틸리티 타입은 전역으로 사용 가능하다. 종류 Partial Readonly Record Pick Omit Exclude Extract NonNullable Parameter ConstructorParameters ReturnType Required 1. Partial interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial) { return { ...todo, ...fieldsToUpdate }; } const todo1 = { title: 'organize desk', ..

🌕 Front/🎫 Typescript 2022. 3. 22. 09:56

[React+Typescript] React.FC를 굳이 사용하지 않아도 되는 이유

1. 코드 가독성 const Greeting:FC = function({ name }) { return Hello {name} } function Greeting({ name }: GreetingProps) { return Hello {name} } 굳이 FC type을 명시해줘서 코드 가독성이 떨어진다. 2. FC always imply children export const Greeting:FC = ({ name }) => { // name is string! return Hello {name} }; // use it in the app const App = () => {"I can set this element but it doesn't do anything"} React.FC는 암묵적으로 chil..

🌕 Front/🎫 Typescript 2021. 9. 6. 17:05

[Typescript]: type, interface, generics 사용하기

1. type type PeopleType = { name: string age: number } type WindowStates = "open" | "closed" | "minimized"; type LockStates = "locked" | "unlocked"; type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9; type Dog = { name: string; tail?: { shakeTail?: () => string; }; hasMaster?: boolean; }; function sayHi(dog: Dog): string { return dog.tail?.shakeTail?.(); } Type의 property를 optional하게 지정할 수 있다. 2..

🌕 Front/🎫 Typescript 2021. 9. 6. 16:09

Typescript 생성자, public, private

[생성자] 1. 모든 class는 constructor를 가짐 2. constructor는 class로부터 객체를 생성할 때 호출되며 객체의 초기화를 담당 클래스안에 컨스트럭터를 만들고 오브젝트를 생성할 때는 파라메터로 넣기만 하면 되는 장점이 있음 이거 자바랑 똑같은데 [access modifiers 접근제한자] 클라스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드 클라스 외부로부터의 접근을 통제 public: class선언할 때 디폴트임 private: 클라스내에서만 접근 가능 protcted: 클라스내부, 상속받은 자식 클라스에서 접근 가능 클래스내 프로퍼티에서도 접근제한자를 사용할 수 있음 private fullname: string 하면 1) 외부클래스에서 읽기/수정 불가능 2) 그..

🌕 Front/🎫 Typescript 2021. 9. 6. 16:06

Typescript: 중급(Type Aliases/Type Guard)

https://www.typescriptlang.org/docs/handbook/advanced-types.html Type Aliases type StrOrNum = number | string; 타입가드 typeof operator와 조건문을 사용해서 숫자타입 변수에 숫자|스트링 값을 넣을 때 오류를 방지 if(typeof price ==='string') { itemPrice = 0 } else { itemprice = price } 코드검증을 수행하는 것을 타입가드라고함

🌕 Front/🎫 Typescript 2021. 9. 6. 16:04

[Typescript] 추가 제공 타입 (tuple, enum, any, void, never)

TypeScript 에서는 기본형 자료형, 참조형 자료형외에도 추가로 타입을 제공한다. 1. tuple 길이와 각 요소의 타입이 정해진 배열을 저장하는 타입 let arr:[string, number] = ["Hi",6]; arr[1].concat("!"); //Error, 'number'does not have'concat’ //정의하지않은 index 호출 시 오류 arr[3]="hello"; //Error, Property '3'does not exist on type'[string,number] 2. enum 특정 값들의 집합을 저장하는 타입 enumerable, 즉 열거 가능한 데이터 타입을 말한다. 데이터에 순서가 있는데, 그 순서에 맞게 값을 주고 싶을 때 사용한다. 순서는 상수로 매기며, 1..

🌕 Front/🎫 Typescript 2021. 9. 6. 11:32

[Typescript] 타입스크립트 왜 써요?

Typescript  쓰는 이유1. 안정적이다. 높은 수준의 추상화가 필요할 때,  프로그램에 구조를 만들고 문서화할 수 있다.2. 타입 에러를 컴파일 단계에서 미리 검출하여 디버깅할 수 있다.  (런타임 단계에서 발생하는 에러로 인해 프로그램이 멈춘다면, 운영되는 서비스에 큰 차질이 생길 수 있다.)3. 타입을 하나하나 명시하기 때문에 유지 보수가 유리하다.   Typescript의 특징1. 컴파일러: 프로그래밍 언어인 동시에 Javascript로 변환해주는 컴파일러다.2. 타입 명시: 변수를 선언할 때, 타입을 명시함으로써 데이터 타입을 지정3. 타입 추론(contextual typing): 정적 타이핑을 통해 변수의 타입을 추론할 수 있다.const sum = (a: number, b: number..

🌕 Front/🎫 Typescript 2021. 7. 13. 21:38