TypeScript란
TypeScript는 JavaScript의 상위 집합(Superset) 언어
--> JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어
자바스크립트
- 동적 타입이 결정되어 유연하고, 다양한 라이브러리와 프레임워크를 사용할 수 있는 장점이 있지만,
타입의 명시성이 부족하다는 단점
TypeScript 사용 시
- TypeScript는 정적타입 검사 기능을 제공
- 코드의 가독성과 유지 보수성을 높임
--> 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다.
❖ TypeScript는 JavaScript 동일한 데이터타입을 지원한다.
Boolean 타입
참 / 거짓
let isShow: boolean = true;
let isDone: boolean = false;Number 타입
숫자 표시 + bigint 지원
let number1: number = 5;
let number2: number = 0.7;✏️ bigint
bigint는 JS와 TS에 새로 추가된 타입으로, 이를 이용하면 라운딩 관련 에러 걱정 없이 큰 정수를 처리할 수 있습니다. number는 2의 53승까지의 정수를 표현할 수 있지만 bigint를 이용하면 이보다 큰 수도 표현할 수 있게 됩니다.
bigint 타입은+, -, *, /, <, >등의 연산을 지원하고 다음처럼 사용됩니다.
let a = 1234n; // bigint
const b = 5678n; // 5678n
let c = a + b; // bigint
let d = a < 1235; // boolean <-- true
let e = 88.5n; // error <-- bigint 리터럴은 반드시 정수여야 함.
let f: bigint = 100n; // bigint
let g: 100n = 100n;
let h: bigint = 100; // error <-- 100의 타입은 bigint 타입에 할당할 수 없음.
이처럼 여러 형태로 bigint를 선언할 수 있지만 가능하면 TS가 bigint의 타입을 추론하게 만드는 것이 좋습니다.String 타입
백틱을 사용한 템플릿 리터럴로 여러 줄 문자열 작성 가능
let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`Array 타입
두 번째 방법은 제네릭 배열 타입 사용
<>안에 타입 작성
//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];
//두 번째 방법
let numberList: Array<number> = [4, 7, 100];Tuple 타입
요소의 타입과 개수가 고정된 배열을 표현
--> 배열의 index마다 타입이 정해져 있기 때문에 정확한 index에 접근해야 함
let user: [string, number, boolean] = ["kimcoding", 20, true];Object 타입
프로퍼티를 가지는 JavaScript값
모든 객체를 수용하는 타입(any로 지정됨)으로 어느 프로퍼티라도 추가할 수 있음
(각각 명시해주는 것이 더 좋음)
let user: {name: string, age: number} = {
name: "kimcoding",
age: 20
}Any 타입
뭘 쓸지 모를 때, 타입 검사를 하지 않고자 할때 사용!
let obj: object = {};
//에러
obj = "hello";
let maybe: any = 4;
//정상
maybe = true;
엄격한 타입검사를 하지 않기 때문에 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러 X
return undefined
let maybe: any = 4;
//undefined
console.log(maybe.length);함수
매개변수, 반환 타입을 명시해줌
//named function
function add(x: number, y: number):number {
return x + y;
}
//arrow function
let add = (x: number, y: number): number => {
return x + y;
}리턴값이 없으면void사용
let printAnswer = (): void => {
console.log("YES");
}- 매개변수의 개수에 맞춰 전달인자를 전달해야함
let greeting = (firstName: string, lastName: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//에러
greeting('coding');
//정상 작동
greeting('coding', 'kim');
//에러
greeting('coding', 'kim', 'hacker'); - 선택적 매개변수
lastname
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//정상
greeting('coding');
//정상
greeting('coding', 'kim');
//에러
greeting('coding', 'kim', 'hacker');연산자
유니온(Union)
OR연산자
number|string: number또는 string타입
function printValue(value: number|string): void {
if (typeof value === "number") {
console.log(`The value is a number: ${value}`);
} else {
console.log(`The value is a string: ${value}`);
}
}
printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello유니온 심화
유니온 타입인 값이 있으면 모든 타입에 공통인 멤버들에게만 접근할 수 있기 때문에 유의해야 한다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer | Person) {
console.log(someone.name);
}askSomeone함수 내부에서는 Developer``Person의 공통 프로퍼티 name에만 접근할 수 있음
-> 타입 가드 사용해야함
❖ 타입 가드(Type Guard)란? TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나입니다. 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 준다.
unction askSomeone(someone: Developer | Person) {
// in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크
// in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}인터섹션(Intersection) 타입
둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법입니다. & 연산자를 사용하여 표현
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);
} 인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.
askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다.
인터섹션 타입은 타입 가드는 필요 없는 반면
Developer와Person이라는새로운 교집합을 만들어 내는 것이기 때문에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 한다. 반대로 유니온 타입은 타입 가드를 해줘야 하지만 전달인자를 전달할 때 선택지가 생기게 됩니다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer | Person) {
//이런 식으로 프로퍼티에 접근할 수 있습니다.
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}
//유니온 타입은 전달인자를 전달할 때 선택지가 생깁니다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});
function askSomeone2(someone: Developer & Person) {
//타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있습니다.
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
//그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없습니다.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});