TypeScript(타입, 함수, 연산자:유니온/인터섹션)
TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어입니다.
- TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여줍니다. 이를 통해 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있습니다.
- TypeScript는 ES6 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스, 제네릭, 데코레이터 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와줍니다.
CRA(Create-React-App) + Typescript
1. 터미널에서 프로젝트 생성
$ npx create-react-app [프로젝트 이름] --template typescript
2. tsconfig.json 내용 커스텀
//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}
3. 필요한 프리셋과 라이브러리 설치
$ npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier
4. .eslintrc.js 파일 생성하여 커스텀
module.exports = {
root: true,
env: {
browser: true,
node: true,
jest: true,
},
extends: [
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
],
plugins: ['prettier', '@typescript-eslint'],
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true,
tabWidth: 2,
printWidth: 80,
bracketSpacing: true,
arrowParens: 'avoid',
},
],
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'prefer-const': 'off',
},
parserOptions: {
parser: '@typescript-eslint/parser',
},
};
TypeScript 타입
TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원합니다.
1. Boolean 타입
가장 기본적인 데이터 타입으로, JavaScript에서도 마찬가지로 boolean 값이라고 불리는 참,거짓 입니다.
let isShow: boolean = true;
let isDone: boolean = false;
2. Number 타입
JavaScript와 마찬가지로 정수와 실수의 구분 없이 Number 타입 하나로 표기합니다. TypeScript는 이 외에도 추가로 bigint를 지원합니다.
let number1: number = 5;
let number2: number = 0.7;
3. String 타입
큰 따옴표나 작은 따옴표를 사용하여 문자열 데이터를 표현합니다. 또한 백틱을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있습니다.
let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`
4. Array 타입
두 가지 방법으로 배열 타입을 선언해 사용할 수 있습니다.
//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];
//두 번째 방법
let numberList: Array<number> = [4, 7, 100];
5. 튜플 타입
튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.
let user: [string, number, boolean] = ["kimcoding", 20, true];
6. 객체 타입
TypeScript에서도 객체는 원시 타입이 아닌 타입을 나타냅니다. JavaScript의 원시 타입에는 ( number, string, boolean, undefined, null, symbol ) 이 있습니다. TypeScript에서는 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있습니다. 하지만 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아닙니다.
따라서 객체의 프로퍼티 타입들은 각기 명시해 주는 것이 훨씬 좋습니다. 객체는 이런 방식으로 key-value 에 구체적인 타입까지도 지정할 수 있습니다.
let obj: object = {};
let user: {name: string, age: number} = {
name: "kimcoding",
age: 20
}
7. Any 타입
타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있습니다. any 타입을 사용하게 되면 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 됩니다.
또한 any 타입은 타입의 일부만 알고, 전체를 알지 못할 때 유용합니다. 예를 들어 여러 타입이 섞인 배열을 받고자 할 때 유용합니다.
let maybe: any = 4;
let list: any[] = [1, true, "free"];
TypeScript 함수
TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 합니다. 각 매개변수에 해당하는 타입을 작성한 뒤, 변환되는 타입을 괄호 뒤에 작성을 해줘야 합니다.
//named function
function add(x: number, y: number):number {
return x + y;
}
//arrow function
let add = (x: number, y: number): number => {
return x + y;
}
//no return
let printAnswer = (): void => {
console.log("YES");
}
또한 TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 합니다. 만약 개발자가 전달인자를 전달하지 않거나, undefined 를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있습니다. 이는 JavaScript에서의 default parameter와 같은 동작을 합니다.
혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있습니다.
// 매개변수가 1,2개 일때는 정상적으로 작동합니다.
let greeting = (firstName: string, lastName="kim"): string => {
return `hello, ${firstName} ${lastName}`;
}
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
TypeScript의 연산자 활용 타입
TypeScript는 연산자를 이용해 타입을 정할 수 있습니다. JavaScript에서도 보았던 ||(OR) 연산자나 &&(AND)와 같은 연산자를 이용하여 만들 수 있습니다. 또한 | 연산자를 이용한 타입을 유니온 타입이라고 하며, & 연산자를 이용한 타입은 인터섹션 타입이라고 부릅니다.
유니온(Union) 타입
유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입입니다. | 연산자를 이용하며, 자바스크립트의 || 연산자와 같이 `A이거나 B이다`라는 의미의 타입입니다. 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용합니다.
function printValue(value: number|string): void {
...
}
유니온 타입의 장점
- 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있습니다.
- 코드를 이해하기 쉽게 만들어주며, 가독성을 높일 수 있습니다.
유니온 타입 사용 시 유의할 점
- 유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 합니다.
- 공통 프로퍼티 외에 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 합니다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
// 공통 프로퍼티인 name에만 접근 가능합니다.
function askSomeone(someone: Developer | Person) {
console.log(someone.name);
// in 연산자는 객체의 속성 이름과 함께 사용하여
// 해당 속성이 객체 내에 존재하는지 여부를 검사합니다.
if ('skill' in someone) {
console.log(someone.skill);
}
if ('age' in someone) {
console.log(someone.age);
}
}
//유니온 타입은 전달인자를 전달할 때 선택지가 생깁니다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});
인터섹션(Intersection) 타입
인터섹션은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법입니다. & 연산자를 사용하여 표현합니다.
// string, number, boolean 타입을 전부 받을 수 있습니다
let value: string & number & boolean;
인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않습니다. 그러나 전달인자를 전달할 때 선택지가 생기는 유니온 타입과 반대로, 인터섹션 타입은 모든 프로퍼티를 전부 보내줘야만 합니다.
function askSomeone(someone: Developer & Person) {
//타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있습니다.
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}
//그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없습니다.
askSomeone({name: '김코딩', skill: '웹 개발', age:20});
'프론트엔드 > Section4' 카테고리의 다른 글
| Proxy (3) | 2023.06.07 |
|---|---|
| TypeScript (Enum,Interface,Type,Class) (2) | 2023.05.30 |
| UI/UX 디자인 시스템 (2) | 2023.05.24 |
| React Hook (2) | 2023.05.19 |
| Virtual DOM (2) | 2023.05.19 |