개인 공부용 블로그

1. TypeScript + React 설치하기 npx create-react-app 프로젝트명 --template typescript React를 설치하면 jsx파일이 많이 보인다. 근데 jsx 파일이 뭔지? (궁금.) js파일이 아닌 jsx로 사용한다. 이것은 JavaScript 의 기능이 포함되어 있다. 2. React Component function hellow () { return ( ) } 3. jsx 속성 1. 중괄호를 사용해 js 표현식을 삽입할 수 있다. 2. 주의. jsx는 HTML보다 JavaScript에 가까우므로 카멜케이스 프로퍼티 규칙을 사용한다. 3. 태그가 비어있을 경우 XML과 같이 />로 닫아주어야 한다. 예시 4. class가 아닌 className 을 사용한다. 예시..

1. 함수의 기본 선언 방법 function sum(a: number, b: number):number { return a + b; } //함수의 반환 값에 타입을 정하지 않을 때는 void 사용 function sum(a: number, b: number):void { return a + b; } 2. 함수의 인자(Argument) ts는 함수의 인자를 모두 필수 값으로 간주한다. 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야 한다. 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인한다. 정의된 매개변수 값만 받을 수 있고, 추가 인자는 받을 수 없다. function sum(a: number, b: number): number { return a + b; } sum(10,..

1. type 지정하기 //TypeScript let name : string = 'kim'; let age : number = 25; let photos : string[] = ['photo1', 'photo2']; let numbers : number[] = [1,2,3]; let infos : { age : number } = { age : 20 } array의 경우 array에 무엇이 들어가는지 지정해주어야 한다. object의 경우 좌항과 우항을 동일하게 지정해준다. 2. interface로 병합하기 //javaScript 오브젝트 선언 방식은 (변수명 : 값) 형식이므로 아래처럼 지정함 let project: { member : string[], days: number, started: boo..

1. Union Type 유니온 타입은 자바스크립트의 OR연산자( || )와 같이 A이거나 B이다. 라는 의미의 타입이다. function name(text: string | number | boolean ) { // } 2. any Type type을 바꿔도 에러가 나지 않는다. (오류가 났을 경우 버그 추적이 어렵다 사용에 유의해야 한다!!) type을 number로 지정했을때 오류메시지가 나지만, any로 지정했을경우에는 오류메시지가 나오지 않는다. 3. unknown Type (typeScript 3.0에서 도입됨) any와 동일하게 모든 타입을 넣을 수 있다. (단 unknown 으로 지정시 오류를 확인할 수 있음)

1. TypeScript를 사용해야 하는 이유는 무엇인가? //javaScript function sum (a, b) { return a + b; } sum('x', 'y'); //typeScript function sum (a: number, b: number) { return a + b; } sum('x', 'y'); javaScript는 타입에 관대한 편이다. 5 + '3' 이라고 해도 알아서 parseInt라는 기능이 있어서 5+3으로 연산을 해준다. (자바스크립트는 Dynamic typing 을 지원하는 언어라고 한다.) 1-1. TypeScript는 정적타입을 지원한다. (즉, type 지정후에 변경이 불가능하다. )컴파일단계에서 오류를 포착할 수 있다. (또한, ts는 오류를 명확하게 알려줘..