설치, 컴파일, 변수 선언 방법

[타입스크립트]

- 설치과정

1. node.js 설치
   • 맥 사용자는 터미널, 윈도우 사용자는 명령 프롬포트에서 node -v를 입력하면 버전 확인이 가능하다. 버전이 안 뜬다면 설치가 안된 것이므로 재설치!
2. 터미널에서 npm init -y 입력 및 엔터
   • 해당 명령어 입력 시 기본적인 질문을 자동으로 답변하여 필요한 패키지를 구성해 준다.
3. npm install typescript를 입력해 타입스크립트 설치
   • 개발 모드에서만 사용할 것이라면 위 명령어 대신 npm install typescript --save-dev 명령어 입력
   • 설치된 파일을 삭제하고자 한다면 npm uninstall typescript 입력

 

- 컴파일(compile) 방법

* 컴파일이란 파일을 변환하는 것을 의미

• node ./node_modules/typescript/bin/tsc 파일명.ts

 

- 타입스크립트 변수 선언방법 (1) _ 기본

// 기본
let userName: string = "aryeon";
let num: number = 19;
let isTrue: boolean = true;
let nul: null = null;
let und: undefined = undefined;
let sym: symbol = Symbol("key");

// 객체 (객체는 ,로 구분하지만 타입은 ;로 구분한다)
let typeuser: { userName: string; age: number; isTrue: boolean; nul: null; und: undefined; sym: symbol } = {
    userName: "aryeon",
    age: 28,
    isTrue: true,
    nul: null,
    und: undefined,
    sym: Symbol("key"),
};

// 배열
const numArr: number[] = [1, 2, 3];
const strArr: string[] = ["a", "b", "c"];
const booleanArr: boolean[] = [true, false];
const nullArr: null[] = [null, null];
const objArr: { name: string; age: number; }[] = [
    { name: "철수", age: 30 },
    { name: "짱구", age: 25 },
];
// 튜플(tuple) : 배열에 인덱스 기준으로 타입 지정하는 것을 의미
let tupleArr: [number, string] = [1, "a"];

 

 

- 타입스크립트 변수 선언방법 (2) _ 함수

• 함수 표현식은 2가지 방식이 있다.
  1. 함수 선언문처럼 매개변수와 반환값의 타임을 지정하는 방법
  2. 변수에 타입을 지정하는 방법

// function(x: 매개변수 타입): 반환타입 {}
function numFunc(x: number): number {
	console.log(x + 10);
}
numFunc(2024);

const numFunc2: (x: number, z: number):number => x + z;
numFunc2(20, 24);

function func(): void {
	console.log("good!");
}
const arrowFunc = (): void => {
	console.log("great!");
}

let userInfo: { userName: string; userJobs: () => string } = {
	userName: "Yuri",
    userJobs: () => "frontend",
}

let score: {
    add: (n1: number, n2: number) => number;
} = {
    add: (n1, n2) => n1 + n2,
};

 

 

- 타입스크립트 변수 선언방법 (3) _ operator

• 여러 개의 타입 중 하나만 충족하는 경우, 반드시 지정된 타입과 동일해야 하는 경우에 유용하다

// or (|) = 피연산자 중 하나만 참이면 참을 반환 
let strAndNum: number | string = 10;
let userInfo: {
    userName: string;
    id: number | null;
} = {
    userName: "짱구",
    id: null, 
};

// and (&) = 피연산자 모두 참이어야 참을 반환
const userInfo2: { userName: string } & { id: number } = {
	userName: "철수",
    id: 012345,
};

 

 

- 타입스크립트 변수 선언방법 (4) _ interface

• 나만의 타입 툴을 만들어 사용 가능 (같은 구성의 객체가 여러개 일 때 유용하다)
• 관례상 인터페이스로 만든 것은 변수이름 앞에 I를 붙인다.
• readonly 키워드를 추가하여 속성값을 고정시킬 수 있다.
• extends를 통해 인터페이스 상속이 가능하다.

[주의사항]

1. 동일한 명칭으로 만들어진 인터페이스가 여러개일 경우 같은 것끼리 자동으로 병합된다.
2. 선언된 위치가 어디든 동일하게 적용되기 때문에 병합으로 인한 에러 발생률이 높다.

interface IUser { 
	readonly id: string,
    userName: string;
    age: number;
    gender: string;
};

interface IUser { printInfo?: {}; };

interface IJob extends IUser { job: string; }

const userObject: IUser = {
	id: "june",
    userName: "June",
    age: 30,
    gender: "male",
    printInfo() {},
    job: "frontend",
};

const userObject2: IUser = {
	readonly id: "anne",
    userName: "Anne",
    age: 24,
    gender: "female",
    job: "backend",
};

// 객체의 속성이 많고 타입의 중복도 많은 상황이거나 추가될 가능성이 높을 경우 적합한 방식이다.
// 단, 정확한 키값을 못 찾기 때문에 자동완성이 되지 않아 오타에 주의해야 한다.
interface IStudent {
	[key: string]: string | number;
}

const student: ISudent = {
	num: 009123,
    name: "Yuri",
    age: 20,
}

 

 

- 타입스크립트 변수 선언방법 (5) _ type alias

• 나만의 타입을 정의하는 것으로 인터페이스와 유사
• 관례상 인터페이스로 만든 것은 변수이름 앞에 T를 붙인다.
• 인터페이스와의 차이점
  • 타입은 마우스를 올렸을 때 어떤 타입들이 지정되어 있는지 확인 가능
  • 타입은 자동 병합이 되지 않아 "type 타입명 = 타입1 & 타입2" 형식으로 병합해야 함
  • 타입은 상속이 되지 않아 extends 사용 불가능

type TUser { 
    userNmae: string;
    age: number;
    gender: string;
    printInfo?: {};
};

type TJob = { job: string };

// type alias의 병합 방법 
type TUserAndTJob = TUser & TJob;

const userObject: TUser = {
    userNmae: "June",
    age: 30,
    gender: "male",
    printInfo() {},
};

const userObject2: TUserAndTJob = {
    userNmae: "Anne",
    age: 24,
    gender: "female",
    job: "frontend",
};

 

 

※ 참고 : 수코딩 (https://www.sucoding.kr)