[TypeScript] 타입스크립트란? (개념, 문법 총 정리)
2012년 마이크로소프트가 발표한 타입스크립트는
자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다.
Stack Overflow에서 개발자가 가장 좋아하고 관심을
가지는 프로그래밍 언어 2위로 선정되었습니다.
또한, 개발자 채용공고를 보면 우대사항에
타입스크립트가 거의 항상 기재되어 있습니다.
이젠 거의 필수 교양이 되어버린 타입스크립트에 대해서 알아봅시다.
📝 타입스크립트의 특징
⦁ 컴파일 언어, 정적 타입 언어
자바스크립트(JS)는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견합니다.
하지만 타입스크립트(TS)는 컴파일 언어입니다.
타입스크립트 컴파일러 또는 바벨(Babel)을 통해 JS코드로 변환됩니다.
코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고,
미리 타입을 결정하기 때문에 실행 속도가 매우 빠릅니다.
하지만 매번 타입을 결정해야 하기 때문에 코드량이 증가하고, 컴파일 시간이 걸린다는 단점이 있습니다.
🤔 인터프리터? 컴파일러?
작성한 코드를 컴퓨터가 알아들을 수 있도록 어셈블리어로 변환하는 과정을 의미합니다.
✔ 인터프리터
마치 통역처럼 프로그램 실행 시 한 번에 한 문장씩 번역합니다.
프로그램을 실행시키고, 오류를 만나면 프로프램을 중지합니다.
따라서 실행해야지만 오류 발견이 가능합니다.
Python, Ruby, JavaScript 등이 대표적입니다.
장점
⦁ 메모리 효율이 좋습니다.
단점
⦁ 실행 파일을 만드는 컴파일러보다 실행 시간이 더 오래 걸립니다.
✔ 컴파일러
마치 번역처럼 프로그램 전체를 기계어로 번역합니다.
초기 스캔 시간이 오래 걸리지만, 한번 컴파일 해두면 다음 실행부터는 빨라지게 됩니다.
전체 코드를 검사한 후에 오류메시지를 생성합니다. 따라서 프로그램을 실행하기 전에 오류를
발견할 수 있습니다.
C, C++, Java 등이 대표적입니다.
⦁ 자바스크립트의 슈퍼셋(Superset)
타입스크립트는 자바스크립트의 슈퍼셋입니다.
즉, 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다.
제가 느낀 바로는, 그냥 자바스크립트를 자바처럼 쓴다고 느껴졌습니다.
자바의 클래스, 인터페이스, 상속, 모듈 등 객체 지향 프로그래밍(OOP) 패턴을 제공합니다.
타입을 명확히 지정해야 하는 점이, 개발시에 불편할 수도 있지만
오히려 이런 모호함이 나중에 개발자를 더 힘들게 하기 때문에 (타입에러 등등..)
자바스크립트의 모호함을 개선하고,
명확한 언어로 슈퍼셋한 타입스크립트가 많이 사랑받고 있는 것 같습니다.
실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%를
타입스크립트로 감지할 수 있다고 합니다. 😀
📝 타입스크립트 기본 문법
✔ 타입 스크립트의 기본 타입
Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never
출처 : SAMSUNG SDS 임혜영님 포스팅
⦁ 변수에 타입 설정
let str: string = 'hi';
let num: number = 100;
let arr: Array = [1, 2, 3];
let arr2: number[] = [1, 2, 3];
let obj: object = {};
let obj2: { name: string, age: number} = {
name: 'hoho',
age: 22
};
⦁ 함수
function add(a: number, b: number): number {
return a+b;
}
//옵셔널 파라미터
function log(a: string, b?: string, c?: string) {
console.log(a);
}
⦁ 인터페이스
interface User {
age: number;
name: string;
}
//변수와 함수에 활용한 인터페이스
var person: User = {
age: 30,
name: 'aa'
}
function getUser(user: User) {
console.log(user);
}
⦁ 인덱싱
interface StringArray {
[index: number]: string;
}
var arr2: StringArray = ['a', 'b', 'c'];
arr[0] = 10 //Error;
⦁ 딕셔너리 패턴
interface StringRegexDictionary {
[key: string]: RegExp
}
var obj: StringRegexDictionary = {
cssFile: /\.css$/,
jsFile: 'a' //Error
}
obj['cssFile'] = /\.css$/;
obj['jsFile'] = 'a' //Error
⦁ 인터페이스 확장
interface Person{
name: string;
age: number;
}
interface User extends Person{
language: string;
}
⦁ 제네릭
function logText <T> (text: T):T {
return text;
}
logText<string>('aa');
logText<number>(100);
타입스크립트는 이제 프론트엔드 영역에서
선택이 아닌 필수인 것 같습니다.
문법을 보시면 아시겠지만, 자바와 굉장히 흡사합니다.
이래서 한 가지 언어를 깊게 아는 것이 중요한 것 같습니다.
공부하면서 하나씩 포스팅해 보도록 하겠습니다! 😀
참고 문헌 :
https://www.samsungsds.com/kr/insights/typescript.html#skip_navi
활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript]
활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript]
www.samsungsds.com
강력추천!