Front/TypeScript

타입 개요 및 개발환경 구성

oodada 2024. 3. 19. 10:36

타입 개요 및 개발환경 구성

01. 타입스크립트란?

TypeScript

  • 2012년 마이크로소프트에서 발표한 오픈소스 프로그래밍 언어로,
  • 자바스크립트의 기반의 정적 타입 문법을 추가한 프로그래밍 언어!

TypeScript

02. 타입스크립트의 특징

  1. 정적 타입의 컴파일 언어

    • 자바스크립트(동적 타입) : 변수의 타입 오류를 런타임(동작) 시점에 확인
    • 타입스크립트(정적 타입) : 변수의 타입 오류를 컴파일 시점에 확인
    • 자바스크립트로 변환(컴파일) 후 브라우저에나 Node.js 환경에서 동작

03. 개발환경 구성

- 프로젝트 생성

npm init -y

- 패키지 설치

  • parcel : 웹 애플리케이션 번들러
npm i -D parcel typescript
{
    "name": "ts-test",
    "version": "1.0.0",
    "description": "",
    // "main": "index.js", // 오류 발생 제거
    "scripts": {
        // 추가
        "dev": "parcel index.html",
        "build": "parcel build index.html"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "parcel": "^2.12.0",
        "typescript": "^5.4.2"
    }
}

- index, ts 파일 생성

ts-test
├── index.html
├── src
    ├── main.ts
├── tsconfig.json
└── package.json
  • ts 확장자를 html 파일에서 불러오기 위해 type="module" 속성 추가
  • html은 ts 파일을 브라우저에서 실행할 수 없지만 parcel이 번들링하여 실행 가능
<!-- index.html -->
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Document</title>
        <script
            type="module"
            src="./src/main.ts"
        ></script>
    </head>
    <body></body>
</html>
  • typescript의 구성옵션을 제공하기 위해 tsconfig.json 파일 생성
npx tsc --init
// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2016", // 2016년도 버전으로 자바스크립트를 타입스크립트로 변환
        "module": "ESNext", // ECMAScript의 가장 최신 버전으로 모듈을 사용
        "moduleResolution": "Node", // 모듈 해석 방식을 Node.js의 해석 방식으로 사용
        "esModuleInterop": true, // CommonJS 모듈을 ES6 모듈로 변환
        "lib": ["ESNext", "DOM"], // 사용할 라이브러리를 설정
        "strict": true // 엄격한 타입 검사를 사용
    },
    "include": ["**/*.ts", "**/*.tsx, scr/**/*.ts"], // 타입스크립트 파일을 찾을 위치
    "exclude": ["node_modules"] // 타입스크립트 파일을 제외할 위치
}
// main.ts
// let hello1: string = 123 // 오류 발생
let hello2: string = 'Hello, TypeScript!';

// hello2 = 123 // 오류 발생
hello2 = 'Hello, JavaScript!';

console.log(hello2);

- 개발 서버 실행

  • html은 ts 파일을 브라우저에서 실행할 수 없지만 parcel이 번들링하여 실행 가능
npm run dev
  • dist 디렉토리가 생성되고 번들링된 파일이 실행됨
  • dist > index.html 파일을 살펴보면 main.js 파일이 생성되어 있음
  • dist > main.js 파일을 살펴보면 번들링된 파일이 생성되어 있음
// let hello1: string = 123 // 오류 발생
let hello2 = 'Hello, TypeScript!';
// hello2 = 123 // 오류 발생
hello2 = 'Hello, JavaScript!';
console.log(hello2);

04. 구문

- 변수 선언

  • 타입스크립트는 변수의 타입을 명시적으로 선언하여 사용

let 변수명: 타입 = 값;

let str: string = '문자열';
let num: number = 123;
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['one', 1];
let obj: { name: string; age: number } = { name: '김겨울', age: 30 };

- 함수 선언

  • 함수의 매개변수와 반환값에 타입을 명시적으로 선언하여 사용

function 함수명(매개변수: 타입): 반환타입 { ... }

function hello(name: string): string {
    return `Hello, ${name}!`;
}

console.log(hello('TypeScript')); // Hello, TypeScript!

- 타입 주석

  • 변수나 함수의 타입을 주석으로 명시

let 변수명: 타입;

let str: string;
let num: number;
let bool: boolean;

- 타입 추론

  • 변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용
let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론
let num = 123;
let bool = true;

- 타입 별칭

  • 타입을 별칭으로 지정하여 사용

type 타입별칭 = 타입;

type Point = { x: number; y: number };
let p: Point = { x: 10, y: 20 };

- interface

  • 객체의 타입을 정의하여 사용

interface 인터페이스 { key: 타입, key: 타입 }

interface IPerson {
    name: string;
    age: number;
}

let userA: IPerson = { name: '김겨울', age: 30 };
let userB: IPerson = { name: '김가을', age: 30 };

'Front > TypeScript' 카테고리의 다른 글

타입 제너릭  (0) 2024.07.18
타입 별칭, this, 오버로딩, 클래스  (0) 2024.07.18
타입 인터페이스 (Interface)  (0) 2024.07.18
타입 추론, 할당, 단언, 가드  (0) 2024.07.18
타입 종류 (TypeScript Types)  (0) 2024.07.18
티스토리 친구하기