카테고리 없음

타입스크립트 기초

해말그미 2023. 5. 30. 23:30

Typescript란??

JavaScript의 상위 집합 언어이다.

 

자바스크립트 업그레이드 버전이다.

크기가 크면 타입스크립트를 쓴다.

자바스크립트에서는 6-'4' 와 같은 것도 계산이 된다. JS가 알아서 숫자로 바꿔주는 Dynamic Typing이 있어서 가능하다.

=> 하지만 프로젝트가 커지면 단점이 된다.

코드 길게 짤 땐 자유도 &  유연성은 오히려 적이 된다.

타입스크립트는 6-'4' 같은것도 에러로 잡음

 

타입스크립트는 에러 메세지를 구체적으로 알려준다.

 

Typescript를 사용했을 때의 장점

 

TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여줍니다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있습니다.

또한 TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와줍니다.

interface User {
  id: number;
  name: string;
}

function greetingUser(user: User) {
	 console.log(`Hello, ${user.name}!`)
}

const parkUser = {
	id: 1,
  name: "박해커"
};

greetingUser(parkUser);

위의 코드는 User 인터페이스를 정의해 User의 정보를 좀 더 쉽게 파악할 수 있습니다. 그리고 greetingUser 함수에도 매개변수로 User 타입을 사용해 이 함수가 어떤 타입의 인자를 받고 있는지 명확히 표현하고 있습니다.

이렇게 TypeScript를 사용하면 코드의 가독성을 높일 수 있습니다. 또한 타입을 명시함으로써 코드의 의도 또한 명확해지기 때문에 다른 개발자가 코드를 이해하고 수정하기 쉬워지며, 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성 또한 높아집니다.

 

타입스크립트 프로젝트 환경 구성하기

1. 먼저 프로젝트 폴더를 생성한다.

mkdir (폴더명)
cd (폴더명)

2. 프로젝트 폴더를 생성하고 난 뒤 프로젝트 폴더 안으로 이동하여, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화합니다.

npm init -y

 

3. 프로젝트 내부에서 npm을 사용할 준비가 되었으므로, 이제 TypeScript를 설치합니다.

npm install typescript --save-dev

4. 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성합니다. 이어 밑의 내용을 붙여 넣습니다.

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

5. 이제 src 폴더 밑에 TypeScript 언어로 된 파일을 작성할 수 있습니다. src 폴더에 index.ts 파일을 만들어서 TypeScript 코드를 작성해 봅니다.

 

=>이제 TypeScript 언어로 프로젝트를 작성할 수 있습니다.

타입스크립트는 브라우저가 못읽는다. ts파일을 js로 변환해야 사용가능하다.

 

TypeScript ESLint 와 Prettier 설정하기

TypeScript는 typescript-eslint를 사용해야 합니다. 만일 TypeScript 프로젝트에서 ESLint나 Prettier를 사용하고 싶다면, 아래의 안내를 따릅니다.

1. VSCode 에디터를 사용할 것이므로, 확장 프로그램인 ESLint를 설치합니다.

Typescript 필수문법

 

1. 변수를 만들 때 타입지정이 가능하다.

let 이름 :string = 'yun'

타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있다.

 

2. 타입이 변경될 경우 에러메세지를 띄워서 타입관련 버그들을 없앨 수 있다.

 

3. array, object 자료는 아래와 같이 타입지정이 가능하다.

let 이름  :string[] = ['yun', 'hee'] //문자로 된 배열이다.
 
let 나이 :{age : number} = {age : number} //객체의 값은 숫자로 와야한다.

TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 할 수 있으며, 두 가지 방법으로 배열 타입을 선언해 사용할 수 있습니다.

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

첫 번째 방법은 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓰는 것입니다. 이어 두 번째 방법은 제네릭 배열 타입을 사용하는 것입니다. Array를 먼저 작성한 뒤, <> 안에 배열의 요소들을 나타내는 타입을 작성합니다. 제네릭은 이후 챕터에서 배우게 됩니다. 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능합니다.

 

4. 변수에 여러가지 타입의 데이터가 들어올 수 있다면 | 기호를 이용한다.

let 이름 :string | number = 'yun';

5. type 키워드를 이용해 타입을 변수처럼 담아서 사용가능하다.

type nameType = string | number;
 
let 이름 :nameType = 'yun';

6. 나만의 타입을 만들어 사용가능하다.

type NameType = 'yun' | 'kim';
 
let 이름 :NameType = 'kim';

원하는 글자나 숫자를 입력하면 이름이라는 변수에는 'yun','kim'만 들어올 수 있다. 

=> literal type라고 한다.

 

7. 함수는 파라미터와 return 값이 어떤 타입일지 지정가능하다.


function 함수명(x :number) :number{
    return x * 2
  }

다른 타입이 파라미터로 들어오거나 return 될 경우 에러를 낸다.

(함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입입니다. )

 

8. 타입스크립트는 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없다.

function 함수명(x :number | string){
    return x * 2
} //에러 발생

항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해준다.

function 함수명(x :number | string){
    if(typeof x === 'number'){
        return x *2
    }
}// 가능

9. array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하려면 tuple 타입을 쓴다.

대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 된다.

type Member = [number, boolean];
 
let yun:Member = [66, true]

TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.

1
let user: [string, number, boolean] = ["kimcoding", 20, true];

모든 요소가 전부 같을 필요는 없지만, 배열의 index마다 타입이 정해져 있기 때문에 정확한 index에 접근할 필요가 있습니다.

1
console.log(user[2].toString());

이렇게 user[2]에 접근하게 되면, user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생합니다.

JavaScript에서도 튜플 타입을 지원하며, JavaScript에서의 튜플 또한 여러 개의 값을 가진 배열을 나타내는 데에 사용합니다. 그러나 JavaScript에서는 튜플 타입을 명시적으로 선언할 수 없기 때문에 개발자가 직접 튜플의 각 요소의 타입을 확인하고 유추해야 하므로 타입 에러가 더 쉽게 발생합니다. TypeScript의 등장 배경 중 하나인 타입 에러를 방지하고자 한 이유 중 하나이기도 합니다.

 

10. object 타입도 정의가 길면 type 키워드로 변수에 담아 사용가능하다.

type MyObject = {
    name? : string,
    age : number
}
 
let 윤 :MyObject = {
    name : 'yun',
    age : 100
}

특정 속성이 선택사항이면  물음표를 기입한다.

 

TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타냅니다. JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며 typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입을 의미합니다.

JavaScript의 원시 타입에는 number, string, boolean, undefined, null, symbol이 있습니다.

1
let obj: object = {};

TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있습니다. 그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아닙니다.

따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋습니다. 객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있습니다.

1
2
3
4
let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

11. object안에 어떤 속성이 들어갈지 아직 모른다면 그냥 전부 싸잡아서 타입지정도 가능합니다. index signature라고 합니다. 

type MyObject = {
    [key :string] : number,
  }
 
  let 철수 :MyObject = {
    age : 50,
    weight : 100,
  }

[key :string] 문자로 들어오는 object속성들이  [key :string] : number => 즉, 글자로 된 모든 object 속성의 타입은 :string라는 뜻

 

12. class도 타입설정이 가능하다.

다만 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능합니다.

  class Person {
    name :string;
    constructor(name :string){
      this.name = name;
    }
  }

Any 타입

간혹 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 때도 있습니다. 클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있습니다.

1
let maybe: any = 4;

any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 됩니다.

1
2
3
4
5
6
7
8
9
let obj: object = {};

//에러가 납니다.
obj = "hello";

let maybe: any = 4;

//정상적으로 동작합니다.
maybe = true;

또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않습니다. 대신, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환되는 값은 undefined입니다.

1
2
3
4
let maybe: any = 4;

//undefined로 출력됩니다.
console.log(maybe.length);

또한 any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용합니다. 예를 들어서 여러 타입이 섞인 배열을 받고자 할 때 유용합니다.

1
2
3
4
let list: any[] = [1, true, "free"];

//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있습니다. 
list[1] = 100;

tsconfig  파일 생성하기

여기엔 타입스크립트 ts파일들을 js파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능하다.

타입지정 문법 생략가능하다.=왜냐 변수 생성시 타입스크립트가 타입을 자동으로 부여해주기 때문이다.

 

팁) 에러메세지는 tsc -w 명령어 실행중인 터미널에 나옵니다.

간결하게 보려면 terminal 탭 옆에 problems 탭에도 나옴