타입 개요 및 개발환경 구성
01. 타입스크립트란?
- 2012년 마이크로소프트에서 발표한 오픈소스 프로그래밍 언어로,
- 자바스크립트의 기반의 정적 타입 문법을 추가한 프로그래밍 언어!
02. 타입스크립트의 특징
정적 타입의 컴파일 언어
- 자바스크립트(동적 타입) : 변수의 타입 오류를 런타임(동작) 시점에 확인
- 타입스크립트(정적 타입) : 변수의 타입 오류를 컴파일 시점에 확인
- 자바스크립트로 변환(컴파일) 후 브라우저에나 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 |