[포스코x코딩온] 웹개발자 풀스택 과정 15주차 | TypeScript

nodeJs에서 사용 방법

1. 폴더 만들기

mkdir 폴더이름

2. package.json 생성

npm init -y

3. 타입스크립트 설치

npm install typescript

4. 타입스크립트 설정

npx tsc --init

5. 타입스크립트 파일 실행

//자바스크립트 파일 생성
npx tsc 파일이름.ts

node 파일이름.js 로 파일실행

6. 5번작업이 귀찮다면 변환 + 실행 자동화 가능

6.1 ts-node 모듈 설치

npm install ts-node

6.2 실행

npx ts-node 파일이름.ts

타입스크립트(TypeScript)란?

Javascript에 타입을 부여한 언어로 JavaScript에 확장된 언어이다. Microsoft에 의해서 개발 및 관리되고 있는 오픈소스 프로그래밍 언어로 대규모 애플리케이션을 개발하는데 JavaScript가 어렵고 불편하다는 불만에 대응하기 위해서 개발되었다. JavaScript는 C, Java와 같은 언어와 구별되는 특성이 있다.

사용방법

• 변수나 함수를 만들어줄 때 타입까지 명시해서 선언

let 변수이름:타입;
(const도 가능)

1. 기본타입

//기본형태
let a: string = "hi";
let b: number = 123;
let c: boolean = true;
let d: object = {
  name : "gildong",
  age : 28
};

2. 배열

//배열
let numArr: number[] = [1,2,3,4,5];
let strArr: string[] = ["hi", "hello"];

3. 객체

//객체(object)
let person:{
  name : string,
  age : number
}[];	

//객체 배열에는 대괄호 [] 를 넣어준다.
person = [
  {
    name : "gildong",
    age : 20,
  },
];

4. 튜플

• 자바스크립트에서의 배열과 같음
• 순서와 개수가 정해져 있는 배열(요소의 길이와 타입 고정)
• 일반 배열과 다른 점은 배열 각각의 타입에 모두 type을 지정해둬야 한다.
• 순서와 규칙이 있는 배열이 있다면 tuple 이용하는게 좋다.

//타입선언
let drink: [string,number];
drink = ["cola", 2000];

//선언과 동시에 초기화
let drink [string, number] = ["cola", 2000];

//readonly : 데이터를 변경할 수 없게 만듬
let drink: readonly[string, number] = ["cola", 2000];

5. 열거형(enum)

• 숫자 열거형과 문자 열거형이 있음
• 값들에 미리 이름을 정의하고 사용하는 타입
• JS의 오브젝트와 유사하지만 선언 이후로는 내용을 추가하거나 삭제할 수 없음
• enum의 value로는 문자열 혹은 숫자만 허용
• 값을 넣지 않고 선언한다면 숫자형 enum 가장 위의 요소부터 0으로 할당돼서 1씩 늘어남

//숫자 열거형
enum Auth{
  admin,
  user,
  guest,
}
console.log(Auth.admin) //결과 : 0
console.log(Auth.user) //결과 : 1
console.log(Auth.guest) //결과 : 2

//문자 열거형
enum Delivery {
  pending = "pending",
  delivery = "delivery,
  finish = "finish"
}

console.log(Delivery.pending) // 결과 : pending

6. any

• 어떤 타입이던 오류 x
• 빈 배열 선언하고 싶을 때, 받아오는 데이터 타입이 확실하지 않을 때
• 어쩔 수 없는 경우를 제외하고는 사용 지양

let a: any = ["hi","name",1,2,3]

사용자 정의 type

interface

• 여러 오브젝트의 타입을 정의하는 규칙
• 오브젝트를 선언할 때, :object로 쓰는 것이 아닌 :interface:로 만든 type을 써준다면 내부에 있는 key의 type까지 지정할 수 있다.

// interface 선언
interface Student {
  name : string;
  grade : number;
  isPassed : boolean;
}

// interface사용
const student:Student = {
  name : "gildong",
  grade : "3",
  isPassed : false,
}

type

• interface와 마찬가지로 사용자 정의 타입을 만들어줌
• 오브젝트 뿐만 아니라 문자열이나 숫자로 제한을 둘 수 있음

// type 만들기
type Gender = "Female" | "male";

//사용
const gender:Gender = "Female"
const gender2:Gender = "female" // 오류
// type에서 설정한 것 이외의 값이 
// 들어오면 코드에서 빨간줄로 틀렸음을 알려줌

함수에서의 type 선언

선언하는 방식

1. 파라미터와 리턴 타입을 선언하는 기본 형식

function sum(a: number, b: number): number{
  return a + b;
}

2. 화살표 함수로 타입을 선언

const sum = (a: number, b: number): numer => {
  return a + b;
}

3. 리턴 생략한 형태로도 선언

const sum = (a: number, b: number):number => a + b

함수와 매개변수의 개수

JavsScript

매개변수를 선언하고 호출 시 parameter 전달하지 않아도 오류가 발생하지 않는다.

function sum(a, b, c) {
  return a + b + c;
}
console.log(sum(1, 2));

TypeScript

매개변수를 2개 선언했다면, 호출했을 때 반드시 모든 값을 전달해줘야 한다.

function sum(a:number, b:number, c:number){
  return a + b + c;
}
console.log(sum(1, 2));

옵션

세번째 매개변수인 c에게 값을 전달하지 않을 경우가 생긴다면 ?를 이용해서 undefined가 될 수도 있음을 정의한다.

function print(a: number, b: number, c?: number){
  console.log(a);
  console.log(b);
  console.log(c);
}
print(1,2)

함수의 리턴 타입이 없을 때(void)

• void란 비어있다는 의미
• 리턴이 없는 함수는 void로 설정가능하다.

function print(a: number, b: number, c: number):void{
  console.log(a,b,c);
}

끝이 없는 함수 never

어떤 조건에서도 함수의 끝에 도달할 수 없을 때 사용

function goingOn():never{
  while(true){
    console.log("go");
  }
}

함수와 generic <t>

Generic

만약 타입을 특정할 수 없는 함수가 있다면?
예를 들어 배열을 매개변수로 받아 배열의 길이를 리턴하는 함수라면

function arrLength(arr: (number | string | boolean | object | null)[]): number{
  return arrLength.length;
}

//
function arrLength(arr: any[]): number {
  return arrLength.length;
}

모든 타입의 데이터 타입이 들어올 수 있으므로 위처럼 사용가능하다. 하지만 모든 데이터 타입을 쓰거나 any를 쓰는 것은 typescript를 사용하는 이유가 사라지기 때문에 사용하는 것을 지양한다.

Generic 선언 및 호출

1. 선언

function arrLength2<T>(arr:T[]):number{
  return arr.length
}

2. 함수 호출

arrLength2<string>(["a"]);
arrLength2<number>([1, 2, 3, 4]);

• 함수를 호출할 때 매개변수로 들어갈 데이터 타입을 설정
• 타입을 함수의 파라미터 처럼 사용할 수 있다.