프론트엔드(Front-End)/TypeScript (10) 썸네일형 리스트형 [TypeScript] 리액트와 타입스크립트(간단) 리액트 컴포넌트를 타입스크립트와 함께 사용하기 타입스크립트는 React.js, Next.js와 같은 여러 프레임워크와 함께 사용할 수 있습니다. 리액트의 컴포넌트 역시 타입스크립트의 타입으로 표현 및 지정될 수 있으며, 아래와 같이 사용할 수 있습니다. type MyProps = { name: string; }; function App(props: MyProps): JSX.Element { return {message}; } 실제 프로젝트에서 사용하는 전체 코드는 다음과 같이 사용 가능합니다. [TypeScript] 타입스크립트의 응용(declare, d.ts, module, ambient module, keyof) 타입스크립트의 import, export 바닐라 자바스크립트에서도 자바스크립트 파일로 멋지게 만든 함수나 변수를 외부로 내보내거나, 혹은 다른 사람이 만든 좋은 라이브러리를 가져다 쓸 수 있습니다. import 와 export 덕분이죠. 타입스크립트도 마찬가지로 다른 타입스크립트 파일을 import 하거나 export하여 사용할 수 있습니다. 사실 타입스크립트의 import와, export는 자바스크립트와 동일하기 때문에 아래와 같이 사용하면 됩니다. // MyModule.ts //타입 스크립트 파일 내보내기 function print(value: any) { console.log(value); } export { print }; // Chapter8.ts import { print } from "./M.. [TypeScript] 타입스크립트의 타입 체크 (narrowing, assertion, as) 타입스크립트와 타입 체크 타입스크립트가 단순히 타입을 지정만할 수 있다면, 참 재미 없는 언어가 되었겠죠? 타입스크립트는 개발자가 Union 등을 통해 여러 타입을 허용한 뒤 타입에 따라 분기해서 쓸 수 있는데, 이렇게 분기해서 사용할 때 한가지 문제점이 생기게 됩니다. 가령 위와 같이 숫자 타입의 경우 더하기(+) 연산을 하고 싶다거나, 문자열의 경우 길이 (length)를 알고 싶을 때, 유니온 타입으로 여러 타입을 허용하게 되면 타입스크립트가 컴파일 오류를 발생시키는데요. 왜냐하면 타입스크립트는 분명 string 또는 number 타입이 올 수 있음을 알지만, number 일때 length 프로퍼티에 접근하는 등의 잘못된 경우를 방지하기 위해 엄격히 제한하고 있기 때문입니다. 따라서 이런 경우에는 .. [TypeScript] 타입스크립트의 타입 선언 : function 타입스크립트와 function의 타입 선언 타입스크립트에서는 function의 파라미터와 리턴타입 등에도 타입을 지정해줄 수 있습니다. // 함수의 타입 선언 // 파라미터(parameter)의 타입 지정 function printName(name: string) { console.log(name); } printName("hello"); // printName(123); // 오류! 위와 같이 함수의 파라미터에서 타입을 정해줄 수 있습니다. 만약 타입이 맞지 않는다면 아래의 그림과 같이 컴파일 단계에서 오류가 발생합니다. 함수에는 리턴 값이 존재하죠. 마찬가지로 타입스크립트에서는 리턴 타입에도 아래와 같이 타입을 지정할 수 있습니다. // 리턴타입(return type)의 타입지정 function su.. [TypeScript] es6 이전 자바스크립트의 클래스 선언과 prototype 자바스크립트와 클래스 es6 이후의 자바스크립트는 class 예약어를 통해 선언할 수 있습니다. 보통 웬만한 브라우저에서는 es6 문법을 지원하므로 우리는 자연스럽게 class 키워드를 통해 클래스를 선언합니다. 그러나, 과거 자바스크립트에서는 이러한 문법이 지원되지 않았기 때문에 클래스를 선언하려면 함수(function)을 사용해야 했습니다. 함수 내부의 변수를 통해 클래스의 속성(프로퍼티)를 구현하였습니다. // class var Person = /** @class */ (function () { function Person(name) { this.data = 0; this.name = name; } return Person; }()); var p1 = new Person('jo'); var p2 =.. [TypeScript] 타입스크립트의 타입 선언 : Class 타입스크립트와 Class 타입 타입스크립트에서는 클래스의 프로퍼티에도 타입을 지정할 수 있습니다. // 클래스의 타입 선언 class MyClass { name: string = ""; age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } } public, private, protected, static 타입스크립트는 자바(Java) 처럼 접근 제한자를 사용할 수 있습니다. 그런데, 타입스크립트의 접근 제한자는 자바의 접근제한자와 완전히 똑같지는 않은 것 같습니다. 그냥 자바스크립트는 접근제한자가 없으니, 변수의 사용 범위를 조금 더 제한해주는, const 의 상위 호환 버전 같은 느낌인거 .. [TypeScript] 타입스크립트의 타입 선언 : Object 타입스크립트와 Object type 타입스크립트에서 Object도 타입으로 선언할 수 있는데, 아래와 같이 타입을 선언할 수 있습니다. // Object 타입 선언 let myObject1: { name: string } = { name: "jay" }; console.log(myObject1); // { name: 'jay' } // type alias로 타입 선언도 가능하다 type MyObject = { name: string; age: number; }; let myObject2: MyObject = { name: "john", age: 13, }; console.log(myObject2); // { name: 'john', age: 13 } 타입스크립트의 literal type 타입스크립트에서 .. [TypeScript] 타입스크립트의 타입 선언 : Array 와 Tuple 타입스크립트와 배열 타입스크립트에서 배열의 타입 선언은 아래와 같이 선언합니다. // 배열의 타입 선언 let stringArray: string[] = ["hello", "world"]; let numberArray: number[] = [1, 2, 3]; 자바스크립트의 배열은 destructuring assignment가 가능합니다. 이 문법을 사용하면 기존에 작성된 배열에다가 새로운 요소를 간편하게 추가할 수 있습니다. // 배열의 타입 선언 let stringArray: string[] = ["hello", "world"]; let numberArray: number[] = [1, 2, 3]; // 배열의 destructuring 문법 let newArray: string[] = [...strin.. 이전 1 2 다음
