개발이 좋아서/TypeScript가 좋아서
react - Typescript_ContextAPI
1) 컨텍스트 만들기 const stateContext = createContext(null) 2) 컨텍스트 사용하기 const state = useContext(stateContext) SampleContext.tsx
react - Typescript_Generic
Generic 재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언할 수 있음 타입을 인수로 받아서 사용 function toArray(a: number | string, b: number | string) : (number | string) [] { return [a, b]; } toArray(1,2) toArray('a','b') toArray(1,'a') function toArray(a: T, b: T) : T [] { return [a, b]; } toArray(1,2) toArray('a','b') 제약 조건 T extends U 조건부 타입 타입구현 영역에서 사용하는 extends 삼항 연산자를 사용할 수 있음 이를 조건부 타입이라고 부름 T extends U ? X..
react - Typescript_interface, keyof
interface 타입스크립트 여러 객체를 정의하는 일종의 규칙, 구조 interface IUser { readonly name: string, age: number, isAdult? : boolean } let user1: IUser = { name: 'Neo', age: 20, isAdult: true } let user2: IUser = { name: 'Neo', age: 16, } interface IName { (매개변수: 매개변수타입) : 리턴 타입지정 } interface IGetUser { (name: string) : IUser } 함수 오버로드 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것 함수 오버로드를 통해 다양한 구조의 함수를 생성하고 관리할 수 있..
react - Typescript_유니언타입, 인터섹션, 타입추론, 타입단언
1) 유니언 타입 유니언 타입 2개 이상의 타입을 허용하는 경우 유니언 타입이라고 함 | 타입구분 () 선택사항 ex) let unionVar : (string | number) = 'green'; 2) 인터섹션 인터섹션 &를 사용해 2개 이상의 타입을 조합하는 경우 인터섹션이라고 합니다. ex) interface IUser { name: string, age: number } interface IValidation { isValid: boolean } const neo: IUser & IValidation = { name: "Neo", age: 30, isValid: true } 3) 타입 추론 타입 추론 명시적으로 타입선언이 되어 있지 않은 경우, 타입스크립트는 타입을 추론해서 제공함. 1. 초기화된..
react - Typescript_Tuple, Enum
1) * 튜플 Tuple 배열과 매우 유사함 정해진 타입의 고정된 길이 배열을 나타냄 let tuple: [string, number] tuple = ["a",1] tuple = ["a",1,2] // error let userid: number = 1234 let username: string = "green" let isValid: boolean = true let user: readonly [number, string, boolean] = [1234, "green", true] console.log(user[0]) 2) * 열거형 Enum 숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입 enum Week { Sun, Mon, Tue, Wed, Thu, Fri, Sat } console.lo..
react - Typescript
1) 2012년에 발표된 오픈소스 프로그래밍 언어 대규모 javascript 애플리케이션 개발을 목적 마이크로 소프트에 의해 개발 javascript : 타입이 동적인 언어 typescript : 정적인 언어 let num = 10 num = "green" typescript => javascript app.ts => tsc app.ts => app.js -타입스크립트 설치하지 않고 연습할 수 있는 사이트 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript onlin..