타입스크립트 등장 전
proptypes
import PropTypes from 'prop-types';
class Greeting extends Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};위 코드처럼 props의 타입을 정의하였으며, prop types를 엄격하게 체크할 경우 isRequired가 붙지 않은 타음은 다음과 같이 기본 값을 입력해주어야 한다.
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
Greeting.defaultProps = {
name: 'stranger'
}flow
// @flow
function square(n: number): number {
return n * n;
}
square("2"); // 에러// @flow
function foo(x: ?number): string {
if (x) {
return x.toString();
}
return "default string";
}flow는 자바스크립트의 정적 타입 체커이다.
타입스트크립트(Typescript)
TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어이다.
JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하였다.
장점
- 코드의 가독성과 유지 보수성 높여줌
- 런타임 에러를 최소화
- ES6의 문법을 포함한 최신 JavaScript 문법을 지원
- 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공
타입스크립트 입문 시 참고하면 좋을 글: 타입스크립트 핸드북
타입스크립트의 여러가지 타입들
Boolean
let a:boolean = true;
Number
let b:number = 1;
String
let c:string = 'a';
Array
let d: string[] = ['a', 'b', 'c'];
let e: Array<string> = ['a', 'b', 'c'];
Tuple
let f: [string, number, boolean] = ["a", 1, true];
Object
-
typeof 연산자를 사용했을 때 "object"를 반환하는 모든 타입
let obj: object = {}; -
key-value를 모를 경우
interface IObj {
[index: string]: string;
}
let obj: IObj = { a: 'a', b: 'b', c: 'c'};- key-value를 알 경우
type IObj = {
a: string;
b: string;
c: string;
}
let obj: IObj = { a: 'a', b: 'b', c: 'c'};Any
어느 타입이든 허용한다는 의미이며, 타입을 엄격하게 체크하지 않아 에러 처리에 조심해야 함
let g: any = 10;
console.log(g.length); // 에러가 나지 않음unknown
조건문을 통해 분기처리해줄 경우 에러가 나지 않음
let h : unknown = 1;
let i : unknown = 'i';
console.log(h.length); // 에러 발생
console.log(i.length); // 에러 발생Void
변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
let j: void = undefined;
function k(): void {
console.log('k');
}Never
함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입입니다.
function neverEnd(): never {
while (true) {
}
}함수
const add = (x: number, y: number): number => {
return x + y;
}(x: number, y: number): 각 파라미터의 타입: number: return 하는 값에 대한 타입
let addStr = (x: string, y?: string): string => {
return `${x} ${y}`;
}
//정상적으로 작동합니다.
addStr('x');
//정상적으로 작동합니다.
addStr('x', 'y');
//너무 많은 매개변수를 보내 에러가 납니다.
addStr('x', 'y', 'z');y?: string: 선택적 매개변수일 경우
REST 문법이 적용된 매개변수
function sum(a: number, ...nums: number[]): number {
const totalOfNums = 0;
for (let key in nums) {
totalOfNums += nums[key];
}
return a + totalOfNums;
}유니온과 인터섹션 타입
유니온
둘 이상의 타입을 합쳐서 만들어진 새로운 타입 (| - OR 연산자를 이용한 타입)
특징
- 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에 타입에 관련된 API를 자동완성으로 쉽게 얻을 수 있음
- 유니온 타입으로 정의한 둘 이상의 타입 내의 공통 프로퍼티에만 접근할 수 있어 타입 가드가 따로 필요
- 인자를 보낼 때 프로퍼티 중 어떤 것을 보낼 지 선택 가능
function printStr (value: number | string): void {
if (typeof value === 'number') {
console.log(value.toString());
return;
}
console.log(value);
}인터섹션 타입
둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법 (& - AND 연산자를 이용한 타입)
특징
- 인터섹션 타입은 둘 이상의 타입을 결합해 새로운 타입을 만들어 내는 방법이므로 타입 가드가 필요하지 않음
- 인터섹션 타입은 인자를 보낼 때 프로퍼티를 전부 보내줘야 함
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer & Person) {
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}