타입스크립트란?
자바스크립트의 확장 버전 같은 느낌으로, 자바스크립트 문법에 데이터 타입 기능을 강화해서 사용하기 위한 언어입니다.
자바스크립트는 동적 타입의 인터프리터 언어로 런타임 시 오류를 발견할 수 있는 반면, 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨을 통해서 자바스크립트 코드로 변환됩니다. 웹 브라우저는 자바스크립트 파일만 해석할 수 있기 때문에, 타입스크립트 언어로 코딩을 하고 이를 자바스크립트로 변환해주는 이와 같은 과정의 도움을 받아야 합니다.
JS의 느슨한 결합이라는 특징 때문에, 데이터 타입을 사용자가 엄밀하게 정해주지 않아도 되었습니다. 그러나 프로젝트 규모가 크고 복잡해지고 유지보수와 협업이라는 기준에서 데이터 타입이 중요해졌고, 그러한 수요에 맞춰 타입스크립트가 등장하게 되었습니다.
타입스크립트 기본 문법
- 변수 오른쪽에 :(콜론)을 써서 타입을 정해줍니다. 그리고 데이터가 빈 값으로 존재해도 된다면, 즉 필수적으로 받아야 하는 데이터가 아니라면 ?(optional parameter)를 붙여서 표시해서 관리해줍니다.
const myName: string = "choi";
const myNameArr: string[] = ["choi", "park"];
const myNameObj: { name?: string } = {};
const myNameObjArr: { id: string | number }[] = [{ id: "hoho" }, { id: 123 }];- 필요한 타입을 만들어서 사용할 수 있습니다. 새로 만든 타입은 대문자로 시작하게 하는 것이 다른 변수들과 구분해서 보기 좋습니다.
type MyType = [{ name: string }?, { age: number }?];
const useMyType: MyType = [];- 함수에서 매개변수와 리턴값에도 타입을 각각 지정가능합니다.
const multiply2 = (x: number): number => {
return x * 2;
};
const answer = multiply2(3);- 패턴 사용
- 딕셔너리
반복되고 많은 타입이 있다면, '[]'(대괄호)를 써서 한번에 간단하게 지정해줄 수도 있습니다. 여기서는 문자열로 된 키 값의 밸류에는 모두 문자열로 받겠다는 의미입니다.
type ApplyEvery = {
[key: string]: string;
};
const MemberInfo: ApplyEvery = {
name: "justin",
addr: "gangnam",
};
- 인덱싱
interface MyArr {
[index: number]: string;
}
const snackArr:MyArr = ['ace', 'mongshell']타입스크립트 추가 상세 문법
용어
- Any : 모든 데이터 타입을 허용합니다.
- Void : undefined, null만 할당할 수 있고, 함수에는 리턴 값을 설정할 수 없는 타입입니다.
- interface : 타입을 정의한 규칙을 의미합니다.
확장
일반적인 코딩에서의 상속 개념 처럼 extends를 써서 다른 interface를 상속받아서 쓸 수 있습니다.
연산자
| 또는 & 를 써서 데이터 타입을 조건적으로 지정해줄 수 있습니다.
제네릭
데이터 타입을 미리 받지 않고, 함수를 호출할 때 받은 데이터 타입으로 사용하기 위해서 도입된 개념입니다. 따라서 함수를 호출하기 전까지는 파라미터와 리턴값의 데이터 타입이 정해져 있지 않다가, 실제 함수를 사용하기 위해서 호출할 때 <> 안에 전달한 타입으로 파라미터와 리턴값의 데이터 타입이 정해집니다.
정의할 때 제네릭 형식을 썼지만, 호출 시 <>를 주지 않았다면 전달된 파라미터를 보고 타입스크립트가 데이터 타입을 추정하여 적용됩니다.
const GenericFunc = <T>(params: T): T => {
return params;
};
GenericFunc<string>("hi");
GenericFunc("hi");오늘의 CS 지식
러닝 커브(Learning Curves)
새로운 것을 습득하고 배우는 데 드는 시간과 비용을 의미합니다. 처음 배울 때는 더디지만, 시간이 지날수록 가속도와 효율이 높아지는 것을 그래프로 나타내어 주로 설명하기 때문에 러닝 커브라는 이름이 붙었습니다.
참조링크
