TypeScript 프로젝트 환경 구성
npm init -y
npm install typescript --save-dev- 프로젝트 초기화 후 TypeScript 설치
//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}- 프로젝트 루트 디렉토리에 tsconfig.json 파일 생성
TypeScript란?
마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어,
JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장
TypeScript 타입
Boolean 타입
let isShow: boolean = true;
let isDone: boolean = false;Nuber 타입
let number1: number = 5;
let number2: number = 0.7;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 타입
let user: [string, number, boolean] = ["kimcoding", 20, true];
console.log(user[2].toString()); // user[2]는 boolean이라 에러정의하지 않은 타입이나 정확하지 않은 인덱스로 접근하면 에러 발생
Object 타입
let user: {name: string, age: number} = {
name: "kimcoding",
age: 20
}
Any 타입
간혹 알지 못하는 타입이 들어왔을때, 타입 검사를 하지 않고자 할때 사용
let obj: object = {};
//에러가 납니다.
obj = "hello";
let maybe: any = 4;
//정상적으로 동작합니다.
maybe = true;에러가 나지 않지만 반환되는 값은 undefined이다.
let maybe: any = 4;
//undefined로 출력됩니다.
console.log(maybe.length);따라서 타입의 일부만 알고 전체는 모를 때 유용하다.
let list: any[] = [1, true, "free"];
//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있습니다.
list[1] = 100;
TypeScript 함수
TypeScript에서 함수를 표현할 때는 JavaScript와는 다르게 매개변수의 타입과 반촨 타입을 명시해주어야 한다.
//named function
function add(x: number, y: number):number {
return x + y;
}
//arrow function
let add = (x: number, y: number): number => {
return x + y;
}선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있다.
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//정상적으로 작동합니다.
greeting('coding');
//정상적으로 작동합니다.
greeting('coding', 'kim');
//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');TypeScript 연산자 활용 타입
유니온(Union) 타입
| 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입
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: helloprintValue 함수는 숫자 또는 문자열 값을 지정하고 이후 typeof 연산자를 통해 검사한다.
주의할 점
유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 합니다.
따라서 나머지 프로퍼티 값에 접근하고 싶으면 타입 가드를 사용해야 한다.
타입 가드 : TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나입니다. 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장
function askSomeone(someone: Developer | Person) {
// in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
// in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}in 연산자는 객체의 프로퍼티 이름과 함께 사용되며, 해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.
인터섹션(Intersection) 타입
인터섹션(Intersection)은 & 연산자를 사용하여 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다.
let value: string & number & boolean;
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);
}