[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);