[TS] Typescript 첫시작

GUI (Grahpoic User Interface) : 볼 수 있는 아이콘등의 UI가 있는 것

CLI (Command Line Interface) : 콘솔창을 통해서 프로그램을 실행하는 환경

- CLI 는 터미널을 통해 컴퓨터가 상호작용을 하는 방식

- 유저는 문자열의 형태로 작성해서 컴퓨터에게 출력을 받는다

 

쉘

터미널을 사용하기 위해 키보드 입력같은 명령어를 실행하고 폴더와 파일 등을 관리합니다.

명령어를 입력하면 커널이 읽을 수 있는 이진코드로 변환합니다.

 

커널

컴퓨터를 켜면 메모리에 항상 올라가 있는 운영체제.

하드웨어와 프로그램 사이에서 인터페이스를 제공하는 역할을 담당합니다.

컴퓨터의 자원들을 관리하는 역할을 합니다.

cd : 하위 폴더 경로로 이동
cd.. : 상위 폴더 경로로 이동

 

 

npm

node의 패키지 매니저

다른 개발자들이 만든 코드를 폴더로 만들어서 배포를 한 파일을 다른 개발자들이 받아서

이어서 작업할 수 있게 나이가 많은 프로그램들을 다시 만들 필요 없이 가져와서 사용한다.

 

npm이란

- 명령줄 클라이언트 공개방식들과 지불 방식들의 패키지를 설치할 수 있습니다.

- 개발자들이 자신이 작성한 모듈 등등을 공유할 수 있는 저장소를 npm을 활용하여 쉽게 설치 

 받을 수 있습니다. 

- 오픈소스 생태계를 구축하기 위함과 개발 생산성을 향상하기 위함입니다.

npm init
# package.json 초기화 --> 설치 받은 라이브러리가 여기에 나와요!

npm init -y #바로 초기화

# 패키지를 설치하는 명령어
npm install [패키지명] 
npm i [패키지]

# 개발 환경에서 설치할건지
npm install --save-dev [패키지명]

# 개발환경에서만 사용할 패키지
npm i -D [패키지명]

# 전역으로 패키지 설치
npm i -g [패키지명]

# npm 패키지 설치 package.json에 있는 내용을 가지고
npm i

 

package.json

- 우리가 작업하는 패키지의 정보와 설치한 라이브러리의 이름과 정보를 가지고 있습니다.

- npm으로 명령어를 실행하는 경우 읽어서 실행하는 json 파일

typescript 패키지를 설치한 내용을 기록이 패키지에서
무엇 무엇을 사용했는지`의존성 모듈`
"dependencies": {    "typescript": "^5.4.5"  }-- ^: 버젼이 없으면 이후 버젼을 설치해야한다

 

tsconfig.json 

컴파일을 진행할 때 검사의 속성이나 파일의 경로 속성을 정의하는 json 파일

# typescript의 json도 따로 설치를 해서 컴파일 옵션을 설정한다.
# typescript 설치

# 설치
npm install typescript
npm i typescript

# 제거
npm uninstall typescript

# 설치가 잘 되어 있는지 버전을 확인
# npx 실행할 때 사용
# tsc 타입스크립트 명령어
# tsc 컴파일 진행

npx tsc --init

# 컴파일 진행
npx tsc

 

include : 컴파일을 진행할 폴더 지정
exclude : 제외할 폴더 지정

compilerOptions 속성에 포함
target : 변환파일의 es버전 ES5로 만들건지 ES6으로 만들건지 결정
outDir : 변환된 파일을 내보낼 경로를 지정

 

{
    // 와일드 카드
    // css *
    // /* : 모든 파일을 포함한다.
    // /** : 모든 폴더를 포함시키겠다.
    // src 폴더에 모든 폴더들에서 모든 파일을 포함 시키겠다
    
    // **/.test.ts : 현재 폴더에서 모든 폴더의 파일중에서 확장자로
    // .test.ts 라고 작성된 파일을 컴파일에서 제외시키겠다
    
    "include":[
        "src/**/*"
    ],
    "exclude":[
        "**/*.test.ts"
    ],
    "compilerOptions":{
        "target": "ES6",
        "outDir": "./dist", // 정하는 이름
        "removeComments": true // 주석을 제거해서 변환하겠다
    }
}

 

 

타입 스크립트

javascript에서 타입 검사가 추가된 확장 언어라고 생각하면 된다.

 

typescript는 javascript의 슈퍼셋

- typescript는 javascript와 다르게 런타임 환경이 존재하지 않습니다.

- 컴파일 언어(컴파일러가 존재)

- typescript -> javascript 로 변환

- 코드 실행은 자바스크립트로 합니다. 

- 코드 작성단계에서 의도에 맞지 않게 코드를 작성한 경우에도 오류를 표시합니다.

 

문법

// 예약어 변수명 : 타입명 = 초기값
// any타입 뭐든 가능한 타입

let num : number = 20;
const str : string = "typescript";
const nan : number = NaN;
const _null : null = null;
const bool : bollean = true;
const _undefined : undefined = undefined;

const obj : object = {};
const arr  : string[] = ["1", "2", "3"];

const fn = (a : number) => {
    console.log(a);
}

const fn = (a : number, b : number) => {
    console.log(a+b);
}



// unknown
// 안정성을 조금 더 보장
// 어떤 타입이든 할당은 가능하지만 조건문으로 검사하고 사용해야한다.

const _unknown : unknown = "";
if(typeof _unknown === "string")
console.log(_unknown.length);

 

!! 타입스크립트를 사용하는 이유 !!

1. 정적 타입 검사

코드를 실행하지 않아도 오타, 타입 오류를 미리 잡을 수 있음

실수로 undefined.length 같은 걸 써도 컴파일 시점에서 에러 표시

 

2. 개발 생산성 향상

IDE 자동완성, 타입 추론이 가능하여 빠르고 안정적인 개발 가능

타입이 문서처럼 작동해서 협업에 유리함

 

3. 코드 리펙토링이 쉬움

변수명 바꿔도 어디 쓰였는지 추적 가능

대규모 코드 유지보수에 강력

 

4. 런타임 에러 감소

JS에서는 실행 시에야 알 수 있는 실수를, TS는 컴파일 단계에서 막아줌.