20230116 타입스크립트 01

Typescript

: Javascript + type(자료형)

 

Javascript(동적타입) : 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당 가능

let num = 3;
num = '삼';

Typescript(정적타입) : 처음에 숫자 (number)를 할당했으니 number에 string를 할당할 수 없다고 에러 발생

let num = 3;
num = '삼';

 

Time

Typescript는 변수의 타입이 컴파일타임에 결정된다 / 정적 타입 언어 (TypeScript, Java, C++)

- 컴파일 타임 (compile time) : 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정

Javascript는 변수의 타입이 런타임에 결정된다 / 동적 타입 언어 (JavaScript, Python, PHP)

- 런타임 : 프로그램이 실행되는 과정

 

※ IDE(VS Code)에서는 컴파일 타임에서 에러가 날 상황을 빨간줄로 미리 알려준다

Javascript는 react 프로젝트를 실행하기전 어떤 오류가 있을 지 알 수 없으나, Typescript는 에러가 날 상황을 미리 IDE(vscode)가 알려줌

 

Typescript 유지보수에 유리한 이유

const person = {
  name: 'js',
  gender: 'man',
};

console.log(person.age);

에러 발생

- 정적 타입 언어인 TS는 IDE에서 person의 타입을 알기에 에러가 발생한 걸 확인 가능

- 동적 타입 언어인 JS는 IDE에서 알 수 X

자동 완성

 

 

Typescript setting

1. 터미널 / 명령프롬프트 / 깃배쉬 ↓

mkdir <폴더명>
# make directory : 폴더 만들기 명령어
# ex) mkdir temp : temp 폴더 만들기

# cd <폴더명> : 해당 폴더로 들어가는 명령어

# code . : vscode로 열기

2. 폴더 생성 이후 패키지 설치 ↓

npm init -y

npm install typescript
# typescript를 해당 프로젝트에만 설치하고 싶다면 npm install typescript
# 전역적으로 적용하고 싶다면 npm install -g typescript

npx tsc --init
# tsc (typescript compiler) 모델로 초기화를 할 건데 tsc모델은 한 번만 쓰고 버릴 것

+) 파일생성 명령어

touch hello.ts # hello.ts 파일 생성

tsconfig.json

target : Typescript를 이곳에 입력된 자바스크립트ver(es2016)으로 변환하겠다는 의미

("target": " " <- 강의에서는 " "에서 shift + spacebar를 누르면 target 버전이 자동완성 된다고 함)

module : Typescript로 전환될 때 import 문법을 어떻게 변환할지 정함

(commonjs는 require 문법 / es2015 , esnext 는 import 문법)

 

파일타입 typescript -> javascript 변환)

npx tsc

 

파일 실행 명령어

node <파일> # node hi.js : hi.js 실행

 

※ ts -> js 변환

1. ts파일 생성 및 작성

// hello.ts
export const helloFunc = () => {
  console.log("hello");
};

// hi.ts
import { helloFunc } from "./hello";

const str = "TS";

const hi = () => {
  console.log("Hello ${str}!");
};

helloFunc();

2. tsconfig.json에서 target과 module의 버전 설정 후, 콘솔에 npx tsc 입력

3. target과 module 버전에 따라 다른 문법 적용되는 것 확인! 

// hi.js
// target es2016
// module commonjs

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
const hello_1 = require("./hello");
const str = "TS";
const hi = () => {
  console.log("Hello ${str}!");
};
(0, hello_1.helloFunc)();

// hi.js
// target es2015
// module es2015

import { helloFunc } from "./hello";

var str = "TS";
var hi = function () {
  console.log("Hello ${str}!");
};
helloFunc();

 

 

★ Typescript를 Javascript로 변환해야 하는 이유

: 브라우저는 ts를 읽을 수 없음!!!!

브라우저가 읽을 수 있는 것 - html, css, js

 

참고링크) TS Playground (https://www.typescriptlang.org/play/)

ts의 js 변환결과를 바로 보여주는 사이트

 

Typescript 기본 타입

String

let str: string = 'TypeScript';

: <- 타입 표기(Type Annotation)

str = 123; // Error
str = true; // Error
str = undefined; // Error

let fullName: string = `NBC`;
let age: number = 10;
let sentence: string = `my name is ${fullName}. I'm ${age + 1} years old`;

Number

let num: number = 123;

let decimal: number = 6;
let hex: number = 0xf00d; // 0x를 넣으면 16진수가 됨
let binary: number = 0b1010; // 0b를 넣으면 2진수
let octal: number = 0o744; // 0o를 넣으면 8진수

Boolean : 참/거짓

let isTrue: boolean = true;
let isFalse: boolean = false;

Array : 어떤 변수가 배열임을 명시적으로 선언가능

let arr: number[] = [1, 2, 3];
let array: Array<number> = [1, 2, 3];

let arr2: string[] = ['1', '2', '3'];
let arr3: boolean[] = [true, false, true];

Tuple : 요소의 타입과 개수가 고정된 배열 표현 가능! (요소들의 타입이 모두 같을 필요는 없음)

let x: [string, number];
x = ['hi', 1];
x = [1, 'hi']; // Error
console.log(x[0], x[1]);
console.log(x[2]); // Error

x[2] = 'world'; // Error

let tuple: [string, number, boolean] = ['str', 1, false];

Any : 자바스크립트의 변수는 모두 any

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

Void : 함수에서 반환 값이 없는 경우

function c(): void {
  console.log('c');
}

Null, Undefined

// 아래 코드를 제외하고 이 변수들에 할당할 수 있는 값이 없음
let a: null = null;
let b: undefined = undefined;

// unionType을 사용할 때 많이 활용됨
let unionType: number | null = null; // unionType에 number와 null 둘 다 할당 가능

Never : 비정상적 종료가 되거나 함수가 끝까지 실행되지 않을 때 (거의 사용 X)

function a(): never {
  while (true) {
  }
}

function b(): never {
	throw new Error('Error');
}

 

+) index.ts를 출력할 때 보통 npm tsc → node index.js 를 콘솔에 입력해서 js로 변환된 파일을 출력하는데,

npm install -g ts-node 로 ts-node 라이브러리 설치하면 ts-node ./index 만 입력해도 index.ts 출력 가능

 

Typescript 함수 타입

✅ JS → TS 함수 변환

1. 우선 touch index.js 로 index.js 파일 생성하기

function add(n1, n2) {
	return n1 + n2;
}

2. TS로 변환

function add(n1: number, n2: number): number {
	return n1 + n2;
}

// function add(n1: number, n2: number) {
// 	   return n1 + n2;
// } // return문을 보고 반환타입을 파악할 수 있어서 반환타입(: number) 생략 가능

// const add = (n1: number, n2: number) => {
//   return n1 + n2;
// };

const a = add(1, 2); // 3
const b = add('1', 2); // Error
const c = add(10, 20, 30); // Error
const d = add(10); // Error

 

✅ 반환 값이 없는 함수

function printResult(num: number): void {
	console.log('Result' + num);
}
// 반환값이 없다는 의미로 void
// 마찬가지로 반환타입(: void) 생략 가능


printResult(5);

✅ Optional Parameter

1. js에서는 오류를 찾아내지 못함

// JS
function add2(n1, n2) {
  if (!n2) return n1;
  return n1 + n2;
}
// 두번 째 parameter가 없다면 첫번째 parameter만 반환하는 함수

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // parameter가 정해진 것보다 많으면 마지막 parameter는 무시됨
const c2 = add2(10); // parameter 개수가 정해진 것보다 적으면 빈 parameter는 undefined가 할당됨

2. ts에서는 오류를 바로 찾아줌

// TS
function add2(n1: number, n2: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // Error
const c2 = add2(10); // Error

b2의 30 부분, c2의 10 부분에 빨간 밑줄로 Error 확인 가능

=> Optional parameter 사용 = 전달받을 parameter에 물음표 ↓↓↓

function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // Error
const c2 = add2(10);

n2 : number or undefined

c2 Error 사라진거 확인

function add2(n1?: number, n2: number): number { // 불가
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // Error
const c2 = add2(10); // Error

function add2(n1: number, n2?: number, n3?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30);
const c2 = add2(10); // Error

✅ Default Parameter

function add3(n1: number, n2: number = 0): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a3 = add3(1, 2); // 3
const c3 = add3(10); // 10
// n2 parameter에 어떤 값도 들어오지 않는 경우 0으로(n2: number = 0) 초기화

✅ Rest Parameter

: Es2015 === ES6에 처음으로 도입

function add4(n1: number, ...nums: number[]): number {
// let nums = [20, 30, 40]
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40);