온라인 강의(유데미, 인프런 등)/한 입 크기로 잘라먹는 타입스크립트(인프런) (9) 썸네일형 리스트형 [한 입 크기로 잘라먹는 타입스크립트] 리액트와 타입스크립트 1. 타입스크립트 리액트 시작하기(JS 프로젝트에서 마이그레이션) 1) 타입선언 npm i @types/node @types/react @types/react-dom @types/jest 2) tsconfig.json { "compilerOptions" : { "target" : "ES5", "module" : "CommonJS", "strict" : true, "allowJs" : true, "esModuleInterop" : true, "jsx" : "react-jsx" }, "include" : ["src"] } 3) 모든 js 파일을 jsx로 4) 각 파일의 에러 해결 2. 상태관리와 Props // onChange 이벤트 타입 React.ChangeEvent interface를 코드 여기저기에서.. [한 입 크기로 잘라먹는 타입스크립트] 유틸리티 타입 1. 유틸리티 타입이란 유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입들입니다. 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아 놓은 것을 의미한다. 다음과 같이 Readonly와 같은 유틸리티 타입을 이용해 특정 객체 타입의 모든 프로퍼티를 읽기 전용 프로퍼티로 변환할 수 있다. interface Person { name : string; age : number; } const person : Readonly ={ name : "이정환", age : 27 } person.name = '' // ❌ name은 Readonly 프로퍼티입니다. 또는 다음과 같이 Partial 유틸리티 타입을 이용해 특정 객체 타입의 모든 프로퍼티를.. [한 입 크기로 잘라먹는 타입스크립트] 조건부 타입 1. 조건부 타입 조건부 타입은 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법이다. type A = number extends string ? number : string; 조건부 타입은 위 코드 처럼 number extends string ? 과 같은 조건식이 있고 이 조건이 참이라면 ? 우측의 타입인 Number 타입이 결과가 되고 아니라면 : 우측의 타입인 String 타입이 결과가 된다. 위 조건부 타입의 조건식 number extends string은 number 타입이 string 타입의 서브타입이 아니기 때문에 거짓이 되고 그 결과 타입 A는 string 타입이 된다. type ObjA = { a: number; }; type ObjB = { a: .. [한 입 크기로 잘라먹는 타입스크립트] 타입 조작하기 1. 타입 조작이란 타입을 조작한다는 것은 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 것이다. 2. 인덱스드 엑세스 타입 인덱스드 엑세스 타입은 인덱스를 이용해 다른 타입 내의 특정 프로퍼티의 타입을 추출하는 타입이다. 인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있다. 복잡하고 큰 타입으로 부터 잘게 나눈 것의 타입을 뽑아낼 수 있어 실무에서 자주 쓰인다. 1) 객체 프로퍼티의 타입 추출하기 다음과 같은 게시글을 표현하는 객체 타입이 있다고 가정해보자. interface Post { title: string; content: string; author: { id: number; name: string; age: number.. [한 입 크기로 잘라먹는 타입스크립트] 제네릭 1. 제네릭 소개 제네릭이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능이다. 제네릭 함수는 두루두루 모든 타입의 값을 다 적용할 수 있는 그런 범용적인 함수이다. 다음과 같이 제네릭 함수를 선언할 수 있다. function func(value: T): T { return value; } let num = func(10); // number 타입 함수 이름 뒤에 꺽쇠를 열고 타입을 담는 변수인 타입 변수 T를 선언하고 파라미터와 반환값의 타입을 T로 설정한다. T에 어떤 타입이 할당될 지는 함수가 호출될 때 결정된다. func(10) 처럼 Number 타입의 값을 아규먼트로 전달하면 파라미터 value에 Number 타입의 값이 저장되면서 T가 Number.. [한 입 크기로 잘라먹는 타입스크립트] 인터페이스 1. 인터페이스 인터페이스란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법이다. 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 거의 같다고 볼 수 있다. interface Person { name: string; age: number; } const person: Person = { name: "이정환", age : 27 }; // 선택적 프로퍼티 interface Person { name: string; age?: number; } const person: Person = { name: "이정환", // age: 27, }; // 읽기 전용 프로퍼티 interface Person { readonly name: string; age?: number; } const person.. [한 입 크기로 잘라먹는 타입스크립트] 함수 타입 1. 함수타입 자바스크립트 함수를 다른 사람에게 설명하는 가장 좋은 방법은 이 함수가 어떤 매개변수를 받고 어떤 값을 반환 하는지 이야기 하는 것이다. 그럼 타입스크립트에서는 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 이야기 하면 된다. function func(a: number, b: number): number { return a + b; } 화살표 함수의 타입 정의 방식도 함수 선언식과 동일하다. const add = (a: number, b: number): number => a + b; # 파라미터 기본값 설정하기 다음과 같이 함수의 파라미터에 기본값이 설정되어있으면 타입이 자동으로 추론된다. 이럴 경우 타입 정의를 생략해도 된다. function introduce(name = .. [한 입 크기로 잘라먹는 타입스크립트] 타입스크립트 이해하기 1. 타입스크립트 이해하기 타입스크립트를 이해한다는 말은 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들간의 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사 하는지 그 원리와 동작 방식을 낯낯이 살펴본다는 말이다. 중요한 문법 들만 쏙쏙 뽑아서 달달 외우듯이 빨리 배워서 빨리 프로젝트에 타입스크립트를 적용하는것도 방법이 될 수 있긴 하지만 타입스크립트는 문법만 외워서 대부분의 상황에 잘 써먹을 수 있을 만큼 만만한 언어는 아니다. 원리와 개념에 대한 수준급의 이해가 없다면 새롭거나 어려운 문제를 맞닥뜨렸을때 스스로의 힘으로 해결하기 힘들다. 결론은 뭐다? 뭘 배우던 시간을 가지고 천천히 배워나가야 한다. 급할 때 볼 수 있는 타입스크립트 중요 문법 모음도 있다. htt.. 이전 1 2 다음
