2023. 3. 31. 11:19ㆍFrontEnd/TypeScript
✅ 아래 내용들에 대해서 알아보자
- 타입스크립트(TS)
- TS 왜 쓸까?
- TS 기본 타입
타입스크립트
타입스크립트(TS)는 자바스크립트(JS)에 타입을 부여한 언어이다. JS의 확장된 언어로 마이크로소프트에서 개발한 언어이다.
- TS는 선택적인 정적 타입 검사, 클래스 기반 객체지향 프로그래밍 등의 기능을 추가하여 JS의 확장된 기능을 제공한다. 이를 통해 코드의 안정성과 가독성을 향상할 수 있다.
- TS는 자바스크립트와 호환성이 뛰어나며 코드를 컴파일하여 JS로 변환할 수 있다.
- JS와 달리 브라우저에서 실행하려면 파일을 한번 변환(컴파일)해주어야 한다.
타입스크립트(TS) 왜 쓸까?
1. 정적 타입 검사 : TS는 선택적인 정적 타입 검사 기능을 제공한다.
function sum(a: number, b: number){
console.log(a+b);
return a+b;
}
sum(1,2);
//TS2345: Argument of type 'string' is not assignable to parameter of type 'number'
sum('1','2'); //컴파일 에러 발생시킴
2. 객체지향 프로그래밍 지원 : TS는 클래스, 인터페이스, 추상 클래스, 제네릭 등의 객체지향 프로그래밍 개념을 지원한다.
TS 기본타입
1. 문자열(String)
let str: string = 'hi';
let fullName: string = 'Seok';
let age: number=30;
let sentence: string = `Hello, my name is ${fullName}
i'll be ${age +1} years old next year`;
console.log(sentence)
2. 숫자(Number)
/**
* Number
*/
let decimal : number = 6; //10진수
let hex: number = 0xf00d; //16진수
let binary: number = 0b1010; //2진수
let octal: number = 0o744; //8진수
console.log(decimal); //6
console.log(hex); //61453
console.log(binary); //10
console.log(octal); //484
3. 불리언(Boolean)
let isBoolean : boolean = true;
4. 배열(Array)
/**
* Array
*/
let list: number[] = [1,2,3];
//제네릭 배열(Array<elemType>)
let list2: Array<Number>= [1,2,3];
5. 튜플(Array)
배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.
/**
* 튜플(Tuple)
*/
let arr:[String, Number] = ['hi',10];
console.log(arr); //['hi',10];
console.log(arr[0].substring(1)); //i
arr[1]=20;
console.log(arr[1]); //20
지정된 인덱스 범위 넘어서 접근 할 경우 컴파일단계에서 오류가 발생한다.
//TS2493: Tuple type '[String, Number]' of length '2' has no element at index '2'.
//인덱스 범위 넘겨서 접근 시 컴파일 오류 발생
console.log(arr[2]);
5. 이넘(Enum)
특정 값(상수)들의 집합
enum Color{
Red=10,
Green=20,
Yellow=30
}
console.log('Red : ', Color.Red); //10
console.log('Green : ', Color[20]); //Green
console.log('Yellow : ', Color.Yellow); //30
6. 애니(Any)
모든 타입을 허용하는 특별한 타입, 정확히 알지 못하는 데이터 혹은 동적인 데이터를 받을 때 사용
let str2: any = 4;
let num: any = 10;
let anyList: any[] = [1, true, "free"];
7. Void
any 타입과 반대로 void는 어떤 타입도 받을 수 없는 타입이다. void 타입 변수에는 undefined와 null만 할당가능하고, 함수에는 반환 값이 없을 떄 사용한다.
function warn():void {
console.log("This is my warning message");
}
let unusage:void = undefined;
unusage=null;
8. Never
절대 발생할 수 없는 타입을 나타낸다.
/**
* Never
* :절대 발생할 수 없는 타입을 나타낸다.
*/
console.log("Never===================")
function error(message:string): never {
throw new Error(message);
}
//반환 타입 never
function fail(){
return error("Something failed");
}
//이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function infiniteLoop():never{
while(true){
}
}
9. 객체(Object)
object는 원시 타입이 아닌 타입을 나타낸다. number, string, boolean, bigint, symbol. null or undefined가 아닌 나머지를 의미함.
declare function create(o:object|null):void;
create({prop:0}); //성공
create(null); //성공
create(42); //Argument of type 'number' is not assignable to parameter of type 'object'.
함수
TS 에서는 함수의 인자를 모두 필수 값으로 간주한다. 따라서 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야 하므로 파라미터 갯수가 맞지 않거나 많으면 에러가 발생하게 된다.
? 키워드를 통해 매개변수를 다 넘기지 않아도 되는 특징을 가질 수 있다.
function sum(a: number, b?: number): number {
return a + b;
}
console.log(sum(10, 20));
console.log(sum(10, 20, 30)); //too many parameters
console.log(sum(10));
참고자료