티스토리 뷰
# 타입스크립트(TypeScript)
타입스크립트란, Microsoft에서 개발한 자바스크립트의 슈퍼셋 프로그래밍 언어입니다. .ts확장자를 사용합니다.
# 자바스크립트와 타입스크립트 비교하기
타입스크립트는 자바스크립트보다 엄격히 타입의 사용을 명시하기 때문에 자바스크립트를 사용했을 때보다 버그를 최소화할 수 있습니다.
아래 예시는 각각 자바스크립트와 타입스크립트를 사용하여 더하기 연산을 수행하는 함수를 작성한 코드입니다.
자바스크립트에서 add함수에 인자로 문자열을 넣어주어도 오류가 발생하지 않고 문자열을 연결하여 값을 출력해줍니다.
//Javascript
functiona add(a, b){
return a + b;
}
console.log(add('1', '4')); // 출력 : 14
하지만, 타입스크립트에서는 add함수에 인자값들의 타입을 number로 명시해주었기 때문에 add함수에 문자열을 넣어주면 데이터 타입이 숫자형이기 때문에 에러를 발생시켜줍니다.
// typescript
fuction add(a : number, b : number){
return a + b;
}
console.log(add('1','4')); // error!
# 타입스크립트의 기본 타입
Boolean, Number, String
let isChecked : boolean = false;
let num : number = 3;
let name : string = '송우든';
String 타입은 " " 큰따옴표 또는 ' ' 작은따옴표로도 사용이 가능하며 ` 백 틱을 사용하여 표현식이 포함하여 사용할 수 있습니다.
let userMajor : string = "computerScience";
let sentence : string = `Hi, my name is ${userName}.
my major is ${userMajor}`;
Array
배열 타입은 아래와 같이 두가지 방법을 사용하여 지정할 수 있습니다.
let userArr : string[] = ['aaa','bbb','ccc'];
//let userArr : Array<string> = ['aaa','bbb','ccc'];
Tuple
타입스크립트에서는 기존 자바스크립에는 없는 tuple이 존재하는데요!
tuple은 배열과 비슷하지만 고정된 요소수만큼의 타입을 미리 선언 후 배열을 표현할 수 있습니다.
// tuple
let userInfo : [string, number] = ['송우든', 24];
console.log(userInfo); // ['송우든', 24]
Enum
열거형. 숫자값 집합에 이름을 지정하여 사용하는 타입입니다.
enum은 0부터 시작으로 멤버 번호를 부여하며, 수동으로 지정해줄 수 있습니다. 또한, 멤버 번호를 이용하여 해당 값을 가져올 수 있습니다.
enum userInfo {name, age, major}
let user: userInfo = userInfo.age;
console.log(user); //
console.log(userInfo[1]); // age
Any
any는 타입 추론을 할 수 없거나 타입 체크를 필요로 하지 않는 값에 사용합니다.
let foo: any = 4;
foo = "any 타입!";
console.log(foo);
Void
void는 타입이 전혀 없다는 의미로 any와는 반대되는 개념을 말합니다. 반환값이 없는 함수의 반환 타입으로 void를 사용합니다.
function showMessage() : void {
console.log('message!');
}
showMessage(); // message!
Null 및 Undefined
let userAge : undefined = undefined;
let userName : null = null;
Never
never는 결코 발생하지 않는 값의 타입을 말합니다.
Object
number, string, boolean, symbol, null 또는 undefined가undefined 아닌 타입을 나타내는 타입입니다.
'TYPESCRIPT' 카테고리의 다른 글
[TS] 유틸리티 타입 / 타입 챌린지(Pick/Readonly) (1) | 2024.10.20 |
---|---|
[TypeScript] 02. 타입스크립트 인터페이스 (0) | 2020.11.25 |
- Total
- Today
- Yesterday