🛠️ TypeScript 프로젝트 환경 구성법
1. 프로젝트 폴더 생성
먼저 프로젝트 폴더를 생성한다.
mkdir (폴더명)
cd (폴더명)2. 새로운 프로젝트를 초기화
프로젝트 폴더 생성하고 난 뒤 프로젝트 폴더 안으로 이동해
npm init -y
명령어를 실행해 새로운 프로젝트를 초기화한다.
3. TypeScipt 설치
프로젝트 내부에 npm을 사용할 준비가 되었으므로
npm install typescript --save-dev
명령어를 실행해 TypeScript를 설치한다.
4. tsconfig.json 파일 생성
프로젝트 루트 디렉토리 tsconfig.json 파일을 생성 한후 내부에 밑의 코드를 작성한다.
//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있다.
{
"compilerOptions": {
"target": "es6", // ECMAScript 6를 대상으로 컴파일
"module": "commonjs", // 컴파일된 모듈은 CommonJS 스타일로 생성
"sourceMap": true, // 소스 맵 파일을 생성 (디버깅에 도움)
"outDir": "./dist" // 컴파일된 JavaScript 파일의 출력 디렉토리 ("./dist" 폴더에 생성)
},
"include": [
"src/**/*" // 컴파일할 소스 파일의 경로 패턴을 지정 ("src" 폴더 내의 모든 파일과 하위 디렉토리의 파일)
]
}5. TypeScript 파일 작성
컴파일할 소스 파일의 경로 패턴을 "src/**/*" 로 지정해주었으므로 src 폴더를 만든다.
그 후 src 폴더 내부에 파일명.ts 로 TypeScript 파일을 생성하고 작성하면 된다.
💿 ESLint & Prettier
ESLint
Lint는 보푸라기라는 뜻으로 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구로 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다.
Prettier
Prettier는 자동으로 코드 정리를 해줘 코드가 깔끔하게 정렬된다.세미콜론이 빠진 곳에는 세미콜론이 자동으로 추가되고, 작은따옴표/큰따옴표/탭 간격 등을 설정할 수 있는 등 유용한 확장 프로그램이다.
이를 사용하면 협업을 하는 과정/규칙을 정하는데 있어 많은 도움이 된다
⚙️ TypeScript ESLint & Prettier 설정
VSCode 에서 TypeScript ESLint & Prettier 설정하는 방법이다.
1. 확장 프로그램인 ESLint 설치
- 확장프로그램 설치 창에서 ESLint를 찾아 확장 프로그램 을 설치해준다.
2. VSCode 에디터에 설정 코드를 작성
- 기본설정: 사용자 설정열기 (JSON) / Preferences: Open User Settings (JSON) 에 들어간다.
- setting.json 파일에 아래 코드를 입력해준다.
만약 작성되어있는 코드들이 있다면 그 밑에 바로 내용을 넣어준다.{ // ... "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, "eslint.workingDirectories": [ {"mode": "auto"} ], "eslint.validate": [ "javascript", "typescript" ], }
3. format on save 가 해제 되어 있는지 확인
cmd + ,를 사용해 VSCode 에디터 설정으로 이동한다.format on save를 찾아 해제 되어 있는지 확인한다.
4. 확장 프로그램인 Prettier 설치
- 확장프로그램 설치 창에서 Prettier 를 찾아 확장 프로그램 을 설치해준다.
5. 프리셋& 라이브러리 설치
- 터미널에 명령어를 통해 몇 가지 필요한 프리셋과 라이브러리를 설치한다.
npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier -
@babel/core- Babel의 핵심 패키지
- 최신 JavaScript 코드를 구식 브라우저와 호환되는 이전 버전의 JavaScript 코드로 변환하기 위해 사용
-
@babel/preset-env- Babel의 환경 프리셋 패키지
- 프로젝트의 대상 환경에 필요한 Babel 플러그인과 설정을 자동으로 결정하여 자동으로 최적의 변환 설정을 제공
-
@babel/preset-typescript- TypeScript 코드를 JavaScript로 변환하기 위한 Babel 프리셋 패키지
-
@typescript-eslint/eslint-plugin- TypeScript 프로젝트에서 ESLint를 사용하기 위한 플러그인
-
@typescript-eslint/parser- TypeScript 코드를 정적으로 분석하기 위한 ESLint 파서
- TypeScript 코드를 분석하고, AST(Abstract Syntax Tree)를 생성
-
eslint-plugin-prettier- ESLint와 Prettier를 통합하여 ESLint 규칙과 Prettier의 포맷팅 규칙이 충돌하는 부분을 해결
6. .eslintrc.js 파일 생성 & 작성
- 프로젝트 폴더 밑에
.eslintrc.js파일을 만들고 이하 내용을 입력한다.
module.exports = {
root: true, // 프로젝트의 루트 디렉토리에서 이 설정 파일을 찾는 것을 나타낸다.
env: {
browser: true, // 브라우저 환경에서의 전역 변수 사용을 허용
node: true, // Node.js 환경에서의 전역 변수 사용을 허용
jest: true, // Jest 테스트 환경에서의 전역 변수 사용을 허용
},
extends: [
'plugin:@typescript-eslint/eslint-recommended', // @typescript-eslint/eslint-plugin의 권장 설정을 확장
'plugin:@typescript-eslint/recommended', // @typescript-eslint/eslint-plugin의 추가적인 권장 설정을 확장
],
plugins: ['prettier', '@typescript-eslint'], // 프로젝트에 사용할 ESLint 플러그인을 지정
rules: { // rules 내부 내용들은 옵션이다.
'prettier/prettier': [
'error',
{
singleQuote: true, // 작은따옴표를 사용하여 문자열을 표시
tabWidth: 2, // 들여쓰기에 사용되는 탭의 너비 2
printWidth: 80, // 줄 바꿈을 할 때 최대 줄 폭 80
bracketSpacing: true, // 중괄호({}) 앞뒤에 공백을 추가
arrowParens: 'avoid', // 화살표 함수에서 매개변수 괄호를 생략가능한 상황일 때는 생략
},
],
'@typescript-eslint/no-explicit-any': 'off', // any 타입 사용 허용
'@typescript-eslint/explicit-function-return-type': 'off', // 명시적인 함수 반환 타입을 요구하지 않는다.
'prefer-const': 'off', // let을 사용 허용
},
parserOptions: {
parser: '@typescript-eslint/parser', // TypeScript 파싱을 위해 @typescript-eslint/parser를 사용
},
};해당 파일 내부에는 prettier와 typescript-eslint에 대한 설정이 되어 있으며, 리액트를 위한 설정도 일부 첨가되어 있다.
rules 내에 작성이 되어 있는 내용들은 옵션으로 전부 작성할 필요 없이 작성해도 되고, 작성하지 않아도 상관없다.
🗂️ TypeScript의 타입
타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원한다.
Boolean (불리언) 타입
boolean 값이라고 불리는 참(true) , 거짓 (false) 값이다.
let isShow: Boolean = true;
let isDone: Boolean = false;Number (숫자) 타입
정수와 실수의 구분 없이 Number타입 하나로 표기하며 이 외에 bigint도 지원한다.
let number1: number = 5;
let number2: number = 0.7;String (문자열) 타입
큰따옴표 (”), 작은따옴표(’) 를 사용해 문자열 데이터를 표현할 수 있다.
템플릿 리터럴을 사용해 여러 줄에 걸쳐 문자열을 작성할 수도 있다.
let firstName: string = “coding”;
let lastName: string = ‘kim’;
let longString: string = `Kimcoding is a developer.
He is 20 years old.`Array (배열) 타입
값들을 배열로 다룰 수 있게 할 수 있으며 두가지 방법으로 배열 타입을 선언할 수 있다.
방법 1
배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 [] 을 쓰는 방식이다.
let items: string[] = [“apple”, “banana“, “grape”];방법 2
제네릭 배열 타입을 사용하는 방식이다.
let numberList: Array<number> = [4, 7, 100];Array 를 먼저 작성한뒤, <> 안에 배열의 요소들을 나타내는 타입을 작성한다.
배열 타입은 기본적으로 하나의 타입만 작성할 수 있으며 타입을 혼용해서 작성하는 것은 불가하다.
Tuple (튜플) 타입
튜플타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.
let user: [string, number, boolean] = [“kimcoding”, 20, true];배열의 index 마다 타입이 정해져 있어 정확한 index에 접근해야한다.
( JavaScript에서도 튜플 타입을 지원한다. TypeScript와 마찬가지로 여러개의 값을 가진 배열을 나타내는 데에 사용하지만 튜플 타입을 명시적으로 선언할 수 없어 개발자가 직접 튜플의 각 요소의 타입을 확인하고 유추해야해 타입에러 발생 확률이 높아진다. )
Object (객체) 타입
원시 타입이 아닌 타입을 나타내는 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any 로 지정되어 어떠한 프로퍼티라도 추가할 수 있다. 하지만 이는 타입 안정성을 보장하지 않기에 권장하지 않는 방법이다.
그렇기에 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 좋다.
let user: {name: string, age: number} = {
name: “kimcoding”,
age: 20
}이렇게 key-value에 구체적인 타입까지도 지정할 수 있다.
Any 타입
클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 알지 못하는 타입일 수 있는 등의 알지 못하는 타입을 표현해야 할 때, any 타입을 사용 할 수 있다.
let maybe: any = 4;any타입을 사용하면 변수에 값을 재할당할 시 타입에 구애받지 않고 값을 재할당할 수 있다.
또한 엄격한 타입 검사를 진행하지 않아 실제 할당된 값이 가지지 않는 메서드및 프로퍼티로 접근해도 에러가 나지 않지만 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기에 undefined 값이 반환된다.
any 타입은 타입의 일부만 알고, 전체는 알지 못할 때에 유용하게 사용할 수 있다.
📝 TypeScript의 함수
TypeScript의 함수는 JavaScript와 마찬가지로 기명 함수(named function) 와 화살표 함수 (arrow function) 등으로 만들 수 있다.
// named function
function add(x: number, y: number) : number {
return x + y;
}
// arrow function
let add = (x: number, y: number) : number => {
return x + y;
}타입추론 기능을 활용하지 않는다고 가정했을 때, TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야한다.
만일 함수에 리턴값이 없다면 void를 사용하여 작성할 수 있다.
let printAnswer = (): void => {
console.log(“yes”);
}또한 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.
전달인자를 전달하지 않거나 undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수 있으며 JavaScript의 default parameter와 같은 동작을 한다.
let greeting = (firstName: string, lastName=“kim”): string => {
return `hello, ${firstName} ${lastName}`;
}
// 정상적으로 작동한다.
greeting (‘coding’, undefined);선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙이면 된다.
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
// 정상적으로 작동한다.
greeting(‘coding’)이때, 뒤의 매개변수는 undefined로 반환된다.
📚 TypeScript의 연산자 활용 타입
TypeScript는 연산자를 이용해 타입을 정할 수 있다. | 연산자를 이용한 타입을 유니온 (Union) 타입, &연산자를 이용한 타입은 인터섹션 (Intersection) 타입이라고 부른다.
📕 유니온 (Union) 타입
유니온 타입은 | 연산자를 이용하며 둘 이상의 타입을 합쳐 number | string 같은 형식으로 사용한다. 자바스크립트의 OR 연산자와 같이 “A 이거나 B 이다.” 라는 의미의 타입이다.
function printValue (value: number|string): void {
if (typeof value === “number”) {
console.log(`The value is a number: ${value}`);
} else {
console.log(`The value is a string: ${value}`);
}
}
printValue(10); // The value is a number: 10
printValue(“hello”); // The value is a string: hello유니온 (Union) 타입의 장점
-
타입을 추론할 수 있어 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.
-
코드의 가독성을 높일 수 있다.
유니온 (Union) 타입 사용시 유의할 점
- 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있다.
- 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야한다.
- 타입가드(Type Guard)
- TypeScript 에서 타입을 보호하기 위해 사용되는 기능중 하나
- 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 준다.
- 타입가드(Type Guard)
function askSomeone(someone: Developer | Person) {
if (‘skill’ in someone) {
console.log(someone.skill);
}
if (‘age’ in someone) {
console.log(someone.age);
}
}위의 코드는 타입를 사용해 작성된 코드이다.
TypeScript 에서는 in 연산자를 사용해 객체의 속성이 존재하는 지 여부를 검사할 수 있다.
📗 인터섹션 (Intersection) 타입
인터섹션 (Intersection) 은 & 연산자를 사용해 표현하며 둘 이상의 타입을 결합해 새로운 타입을 만드는 방법이다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone (someone: Developer & Person) {
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}인터섹션 타입을 사용해 Developer 와 Person 을 하나의 타입으로 묶어 타입가드가 없어도 askSomeone 함수 내부에서 Developer 와 Persone의 프로퍼티에 전부 접근 할 수 있다.
그러나 인터섹션 타입은 Developer 와 Person이라는 새로운 합집합을 만들어 내는 것이기 때문에 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 한다.
askSomeone({name: ‘김코딩’ , skill: ‘웹 개발’, age: 20});