TypeScript 컴파일러
설치
npm install -g typescript분명 이렇게만 설치하면 tsc 명령어로 컴파일을 실행할 수 있다고 했는데, 해당 명령어를 찾을 수 없다는 문구tsc: command not found 가 떠서 여러가지 방법들을 찾아보다가 brew를 이용해brew install typescript를 해주라는 글을 봤고, 해당 방법을 사용하니 해결되었다. npm이 아닌 홈브루를 이용했을 때 타입스크립트 패키지가 적용된 이유는 잘 모르겠다... 알게 되면 추가해놓겠음..
타입스크립트가 잘 설치되면 터미널에 tsc app.ts와 같은 명령어로 타입스크립트 파일을 자바스크립트 파일로 컴파일 할 수 있다.
타입스크립트는 ts 파일 자체를 실행시킬 수 없고, 자바스크립트로 컴파일 한 뒤 실행시킬 수 있다는 부분에서 띠용? 👀 했는데
타입스크립트의 목표에 대해 공식 문서에는 이렇게 적혀있다.
TypeScript의 목표는 JavaScript 프로그램의 정적 타입 검사자입니다.
코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)입니다.
타입스크립트는 코드가 브라우저에서 실행되기 전에, 개발 단계에서 구문 오류 등을 잡아내고 수정할 수 있도록 하기 위한 용도인 것.
게다가 컴파일 과정에서 최신 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있도록 컴파일해주기도 한다. 일종의 바벨과 같은 역할도 하는듯.
TypeScript의 기본 타입들
타입스크립트는 자바스크립트의 자료형인 boolean, bigint, null, number, string, symbol, object, undefined 외에 any (무엇이든 허용), unknown (이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인), never (이 타입은 발생될 수 없음) void (undefined를 리턴하거나 리턴 값이 없는 함수)와 같은 자료형을 추가로 지원한다.
기본 타입들을 어떤 변수나 함수의 매개변수, 함수의 리턴값에 지정해줄 수 있다.
타입 지정, 타입 추론
아래와 같이 해당하는 변수나 매개변수 등의 뒤에 : 기호를 붙이고, 소문자로 된 타입을 작성해주면 된다. 근데 타입스크립트에는 '타입 추론'이라는 것이 있어서 아래와 같이 매개변수 n1, n2를 number로 지정해주면 알아서 리턴되는 값을 number라고 추론한다고 한다.
function add(n1: number, n2: number):number {
return n1+n2;
}아래와 같이 let으로 선언한 변수에 특정 타입을 따로 지정해주지 않아도 해당 변수에 할당되는 값의 타입이 number인 것을 타입스크립트는 추론한다.
let num = 5;낯선 타입들
🟢 Tuple
튜플은 다른 언어에서는 존재하지만 자바스크립트에서는 존재하지 않는다.
길이와 타입이 고정된 배열이다.
🟢 enum
enum 타입은 열거형 타입이라고도 부르는데 다른 프로그래밍 언어에는 존재하는데 자바스크립트에서는 존재하지 않는다.
타입스크립트에서 해당 타입을 생성하는 방법은 아래와 같이 중괄호를 사용하는 것이다.
enum Role {
ADMIN,
READ_ONLY,
AUTHOR,
}이렇게 생성된 라벨들은 0부터 시작하는 숫자로 변환된다.
const person = {
name: 'nana',
age: 24,
role: Role.AUTHOR🟢 any
타입스크립트에서 할당할 수 있는 타입 중 가장 유연한 타입.
모든 종류의 값을 지정할 수 있음.
유연해서 좋아보이지만, 타입스크립트 컴파일러는 any를 지정한 위치에서 제대로 작동하지 않게 된다.
타입스크립트 컴파일러가 딱히 검사할 것이 없기 때문.
어떤 값이나 종류의 데이터가 어디에 저장될 지 전혀 알 수 없는 경우나
런타임 검사를 수행하는 도중 특정 값에 수행하고자 하는 작업의 범위를 좁히기 위해 any를 사용할 수 있다.
🟢 Union
서로 다른 두 종류의 값을 사용해야 하는 경우 유니언 타입을 이용해 이곳에는 여러 종류의 타입 값이 들어올 수 있다는 것을 알려줄 수 있다.
유니언 타입을 이용할 때에는 다른 타입 사이에 | 기호를 붙여주면 된다.
function printValue (input: number | string) {
return input;
}
🟢 void
함수의 반환 타입에 void 타입이 존재하는데, 아무것도 반환하지 않음을 뜻한다.
아래 print 함수는 아무것도 반환하지 않는다.
값을 반환하지 않는 함수를 사용하는 경우에는 void를 표준으로 사용하고 타입 추론도 가능하므로 명시적으로 작성해줄 필요는 없다.
function print(num: number){
console.log(num);
}
아래 함수의 세변째 매개변수인 콜백함수는 반환 타입이 void이다.
그러므로 이후 아래 함수 실행단에서 콜백에 return문이 있더라도 해당 리턴값을 무시한다.
콜백 함수는 자신이 전달되는 인수가 반환값을 기대하지 않는 경우에도 값을 반환할 수 있다.
function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
const result = n1 + n2;
cb(result);
}
addAndHandle(10, 20, (result) => {
console.log(result);
return result;
});unknown
unknown은 any와 비슷하게 어떤 값이 들어올지 모를 때 사용할 수 있는 타입이다.
unknown이 any보다 제한적이고, 어떤 값이 들어올 지 모를 때 더 쓸만한 타입인데, 타입 검사를 수행할 수 있기 때문이다.
any 같은 경우는 아래 예시에서 아무런 에러를 발생시키지도 않고 타입 에러를 뱉지도 않는다.
let userInput: unknown;
let userName: string;
userInput = 5;
userInput = "Max";
//unknown은 에러 발생, any는 에러 발생 x
userName = userInput;
//unknown 타입은 아래와 같은 타입 검사를 해주면 에러를 발생시키지 않는다
//즉 타입 검사가 가능하다
if (typeof userInput === "string") {
userName = userInput;
}
그러나 유니언 타입이나 특정 타입을 지정할 수 있는 경우에는 그 타입을 지정해주는 게 가장 좋음.
never
never는 일반적으로 함수의 리턴 타입으로 사용되고 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않는 것을 말한다고 한다. 아직 제대로 사용해보지 않아서 개념이 모호한 타입 중 하나...
공식문서에서 가져온 네버 타입의 예시
// Function returning never must not have a reachable end point
function error(message: string): never {
throw new Error(message);
}
// Inferred return type is never
function fail() {
return error("Something failed");
}
// Function returning never must not have a reachable end point
function infiniteLoop(): never {
while (true) {}
}Aliase
타입 앨리어스(별칭)를 이용하면 타입을 직접 생성할 수 있다.
이를 이용하면 불필요한 반복을 줄일 수 있고, 타입 관리가 용이하다.
//Combinable이라는 타입은 number와 string 유니온 타입
type Combinable = number | string;
//Role 타입은 리터럴 타입 : 어떤 값이 정해진 타입
type Role = "duck" | "goose";
//User 타입은 객체 타입
type User = {name:string; age:number};
//만든 타입을 지정해줄 수 있다
function combine (input1: Combinable, input2: Combinable) {
}
