source-code/TypeScript (6) 썸네일형 리스트형 React 프로젝트에서 TS 사용하기 React 컴포넌트 TS로 작성하기 import React from 'react'; type GreetingsProps = { name: string; mark: string; }; function Greetings({ name = "", mark = "" }: GreetingsProps) { return ( Hello, {name} {mark} ); } // Greetings.defaultProps = { //mark: '!' //}; export default Greetings; 함수형 컴포넌트에서 props의 type을 지정하는 여러 방법들이 있지만... 위 예시가 가장 직관적으로 여겨진다. 부모 컴포넌트에서 넘겨받은 parameter 구조 분해 할당. 해당 값들에서 기본 매개 변수 설정(굳이 함수.. ts-all-in-one : 기본 개념 https://github.com/ZeroCho/ts-all-in-one 기본 지식 왜 TS? 안정성 증대 → 에러 가능성 저하! 기본 지식 ts는 최종적으로 js로 변환! ts코드를 돌릴 수 있는 (대중적인) runtime(브라우저+node)은 존재하지 않음 (순전한 ts코드를 돌릴 수 있는 환경도 존재하지만(demo) 대중적 X) ts는 언어이자 컴파일러(tsc) ts코드를 js로 변환 tsc → 옵션 존재(어떻게 변환할 것인가) 이에 따라 결과값이 달라짐 (ex ts코드를 es3로 변환해줘~~ 가능) tsc → 타입 검사(추론) 역할도 수행 단순 타입 검사만? → tsc --noEmit ts 파일을 실행하는 게 아니라, 결과물인 js를 실행해야 함! 설치 Node 설치 LTS : 기업을 위해 3년간.. ts-all-in-one : 기본 문법 https://github.com/ZeroCho/ts-all-in-one ts 문법 interface → 선언 할때마다 합쳐짐 작성된 인터페이스를 커스텀 할 때 사용할 수 있겠다(ex 라이브러리 수정) interface A { a: string } interface A { b: string } const obj1: A = { a: 'hello', b: 'world' } type B = { a: string } type B = { b: string } // 중복 시 err 잉여 속성 검사 기본적으로 좁은 타입은 넓은 타입에 대입 가능 but 객체 리터럴에는 잉여 속성 검사 존재! type A = { hello: string }; const a: A = { hello: 'world', why: 'error'.. ts-all-in-one : utility types https://github.com/ZeroCho/ts-all-in-one utility types 객체의 type을 조작할 때 유용한 타입! https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org interface Profile { name : string; age : number: married : boolean; } Partial 뒤의 타입 속 모든 속성을(필수값이더라도) 옵셔널로 변환 type Partial = { [P in keyof T]?: T[P]; }; /.. ts-all-in-one : 기본 문법 https://github.com/ZeroCho/ts-all-in-one ts 문법 기본적으로 js의 변수, 매개변수, 리턴값에 타입을 지정한 것 const a: number = 5; function add(x: number, y: number): number { return x + y } const add: (x: number, y: number) => number = (x, y) => x + y; const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 }; 타입 부분을 지웠을 때 말이 되는 js 코드여야 함 튜플 = 튜플 타입을 이용해 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있음 타이핑은 최대한 좁게!(정확하.. TS - all in one : 제네릭 https://github.com/ZeroCho/ts-all-in-one ts 문법 제네릭 타입을 변수처럼 만드는 것! → 함수를 사용할 때 타입이 정해질 수 있도록 해줌 위치는? → 선언 시 이름 뒤에 위치 function a() {} class B() {} interface C {} type D = {}; const e = () => {}; 제네릭 extends → 제네릭에 제한 걸기 매개변수에서처럼 기본 타입 지정도 가능 function add(x: T, y: T): T { return x + y } // // 특정 객체 // // 모든 배열 // any> // 모든 함수 // any> // 생성자 타입 // // string | number | symbol 공변성 / 반공변성 함수 간에 서로 대입.. 이전 1 다음