말로만 듣던 타입스크립트를 드디어 한다.
타입스크립트 쓰고싶어요.
타입스크립트는 시작부터 난관이였다.
코드들 쳐보면서 콘솔에 찍어보면서 해보고싶었는데, 그마저도 쉽게 허용해주지 않았다.
그냥 라이브러리 설치하는거 마냥 설치를 해버리면?? 보기좋게 실행이 안될 것이다.
그럼 어떻게 해야하냐??
- 폴더를 새로 만든다.
- node.js패키지를 초기화시킨다.
npm init 터미널에 해당 명령어를 입력하여 초기화시킴 - @types/node 설치하기
npm i @types/node 터미널에 해당 명령어를 입력하여
Node.js 내장 기능들의 타입 정보를 담고있는 @types/node를 설치해준다.
설치하지 않으면 타입스크립트의 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있다. - 타입스크립트 컴파일러 설치하기
sudo npm i -g typescript 해당 명령어를 입력하여 TypeScript 패키지를 설치한다.
설치가 완료 되었으면 tsc -v 명령어를 통해 잘 설치되어 있는지 확인한다. - 패키지 루트 아래에 src폴더를 생성한 다음 index.ts를 생성해서 코드를 작성한다.
- 작성을 했다면 tsc src/index.ts 명령어를 통해 index.ts 파일을 타입스크립트 컴파일러가 컴파일한다.
완료되면 src/index.js 파일이 생성될 것이다. index.js파일은 index.ts파일을 자바스크립트로 바꿔준 것이다. - 위의 과정을 통해 생성된 index.js파일을 node를 통해 실행할 수 있다.
node src/index.js 명령어를 통해 실행시켜보자
타입스크립트 컴파일러 옵션도 설정을 해줄 수 있지만
그에 대한 tsconfig 설정은 다른 블로그들이 엄청나게 좋은 설명과 자세히 해놓았기 때문에 패스하겠씁니다.
(사실 블로깅하기엔 양이 너무 방대함...)
타입엔 무엇이가 있을까요
number타입, string타입, boolean타입, null타입, any타입 등등 타입은 여러가지가 있지만
어떤 어떤 타입이 있다를 쓰진 않겠다.
위의 타입들이 타입스크립트에 들어갈 수 있는 타입의 종류들이다.
유니온 vs 인터섹션
TypeScript는 연산자를 이용해 타입을 정할 수 있습니다. JavaScript에서도 보았던 ||(OR) 연산자나 && (AND)와 같은 연산자를 이용하여 만들 수 있습니다. | 연산자를 이용한 타입을 유니온(Union) 타입이라고 하며, & 연산자를 이용한 타입은 인터섹션(Intersection) 타입이라고 부릅니다.
유니온
유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입입니다. | 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입입니다. 예를 들어, 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(200); // The value is a number: 200
printValue("plla2"); // The value is a string: plla2위의 printValue 함수는 숫자 또는 문자열 값을 입력받고 있습니다. 이때, 유니온 타입을 사용해 number | string 타입으로 지정하고 있습니다. 이후 입력된 값의 타입을 typeof 연산자를 사용하여 검사한 후, 해당 값이 숫자인 경우와 문자열인 경우 각각 다른 로그를 출력합니다. 이처럼 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용합니다.
인터섹션
인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법입니다. & 연산자를 사용하여 표현합니다.
let value: string & number & boolean;이런 식으로 타입을 결합해 사용할 수 있습니다. 여기서 value 변수는 string, number, boolean 타입을 전부 받을 수 있습니다.
인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone2(someone: Developer & Person) {
console.log(someone.age); // 25
console.log(someone.name); // plla2
console.log(someone.skill); // TS
}
askSomeone2({ name: "plla2", skill: "TS", age: 25 });인터섹션 타입은 타입 가드는 필요 없는 반면 Developer와 Person이라는 새로운 합집합을 만들어 내는 것이기 때문에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야만 합니다.
