TypeScript (5) Today I am React + Typescript 리액트에서 타입스크립트 사용하기 npx create-react-app [파일명] --typescript 타입스크립트로 리액트 컴포넌트를 작성할때는 .tsx로 작성 1. 타입스크립트로 리액트 컴포넌트 만들기 함수형 컴포넌트가 function키워드가 아닌 React.FC라는 타입으로 화살표 함수로 작성시 두가지 이점 1. children이라는 props가 기본적으로 탑재되어있다. 2. contextTypes, defaultProps, displayName이 자동완성된다. 단점 - defaultProps 제대로 작동되지 않을 수 있다. (function 키워드에서는 제대로 작동함) import React from "react"; type GreetingsProps = { name: string; age?: n.. [TypeScript 강의노트] - 고급타입 1. Intersection 2. Union Types 2. 타입 별칭 type-alias 3. 인덱스 타입 1. Intersection - 여러 타입을 하나로 합쳐진 타입 interface User { name: string; } interface Action { do(): void; } //Intersection - 여러타입을 하나로 합쳐진 타입 function createUserAcion(u: User, a: Action): User & Action { return { ...u, ...a }; } const u = createUserAcion({ name: "jay" }, { do() {} }); u.do; //가능 u.name; //가능 2. Union Types - or 을 사용해서 두 개의 타.. [TypeScript 강의노트] - generic 1. generic을 이용하면 (함수에서 파라미터를 정의하듯이) 타입을 파라미터화 할 수 있다. - 관용적으로 T, U 알파벳 순서로 타입변수를 지정한다. //1. 타입을 제네릭으로 파라미터화 시키기 function createPromise(x: T, timeout: number) { return new Promise((resolve: (V: T) => void, reject) => { setTimeout(() => { resolve(x); }, timeout); }); } createPromise("dd", 100).then((v) => console.log(v)); //v //2. 여러개의 타입을 제네릭으로 파라미터화 시키기 function createTuple2(v: T, v2: U): [T, U].. [TypeScript 강의노트] - class class class Cart { constructor(user){ this.user = user; this.store {}; } put(id, project){ this.store[id] = product; } get(id){ return this.store[id]; } } //instance const cartJohn = new Cart({name:"john"}); const cartJohn = new Cart({name:"jay"}); //typescript------------------------------ interface User{ name:String; } interface Product{ id:String; price:number; } class Cart { protected user:U.. [TypeScript 강의노트] - 오픈소스 프로그래밍 언어 - 자바스크립트 상위 집합으로 ECMA스크립트의 최신 표준을 지원 - 정적인 언어로 컴파일 시간에 타입을 검사 - 장점 1. 강력한 타입으로 대규모 어플리케이션 개발에 용이 2. 유명한 자바스크립트 라이브러리와의 편리한 사용 3. 개발 도구에서의 강력한 지원 1. 설치 npm install typescript -g (전역설치) tsc hello.ts - tsc 명령어로 타입스크립트 컴파일러를 실행시킬 수 있다. 타입 스크립트를 컴파일해서 자바스크립트 파일을 만들 수 있다. tsc hello.ts --target es6 - 예 ) es6만 지원하려면 target 옵션 주기 2. promise 기능 es5로 컴파일해보기 let timeoutPromise = new Promise(.. 이전 1 다음