Typescript _ 초기 세팅 및 기본 문법

Minji Jeong·2021년 11월 1일
TILtypescript
0

TypeScript

목록 보기
1/1
post-thumbnail

1. Typescript만 사용할 때

  1. typescript 로컬 설치
    npm install typescript --save-dev

  2. typescript 컴파일러 설치
    글로벌 설치한 경우: tsc --init
    로컬 설치한 경우: npx tsc --init
    👉 'tsconfig.json' 파일 생성됨

/// 컴파일 옵션 설정 할 수 있음
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

브라우저는 .js 파일만 읽을 수 있기 때문에, .ts 파일은 인식하지 못한다.
따라서 브라우저에 타입스크립트를 적용할 때, js처럼 바로 적용하지 못한다.

따라서 typescript 파일을 js 파일로 컴파일 하여, 컴파일 된 js 파일을 브라우저에 적용해주는 방식을 사용하여야 된다.

  1. 컴파일 명령어
    글로벌 설치한 경우: tsc
    로컬 설치한 경우: npx tsc

이 명령어를 사용할 때 마다 타입스크립트 파일을 js 파일로 컴파일 한다.
만약, 타입스크립트 파일이 변경될 때 마다 실시간으로 js 파일을 컴파일 하고 싶다면
npx tsc -w 명령어를 사용한다.
해당 명령어를 사용하면, typescript 파일을 변경하고 save 할 때마다 자동으로 js 파일에도 적용된다.

.ts 파일 내용이 자동으로 컴파일되어 .js 파일에 적용된 코드

2. React 프로젝트에서 Typescript 사용할 때

  1. Typescript 설치
  • 처음 CRA 할 때 한 번에 설치
    create-react-app 프로젝트명 -typescript
  • CRA하고 나서 나중에 typescript 설치
    npm install typescript @types/styled-components @types/react @types/react-dom @types/react-router-dom ...
  1. 컴파일러 설치
  2. tslint 설치
    npm install tslint --save-dev
    npx tslint --init
// tslint 기본 설정
{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

3. Typescript 기본 문법

타입스크립트는 객체의 타입을 지정해주지 않아 다양한 문제를 발생시키던 js를 보완해준다. Js와 거의 동일하나 변수마다, 함수마다, 객체마다 구체적인 타입을 지정해주는 방식이다.
기본적으로 const/let 객체명 : 타입 형식으로 명시한다.

const name = "kim";		// js
const name : string = "kim"	// ts

1. 변수

const name : string = "minji";

2. 배열

const list : string[] = ["A", "B", "C"];
다음과 같이 해당 인덱스 자리에 어떤 타입이 들어갈 것인지
인덱스마다 지정해주는 방식을 튜플 타입이라고 한다.
const list : [number, boolean] = [12, false];

3. 객체

const obj : {name : string, age : number} = {name:"minji", age:10};

4. 여러개의 타입을 명시하고 싶을 때

| (or 연산자)로 명시할 타입들을 함께 적어준다.

// 둘 다 에러 안 남
const gender : string | number = "0";
const gender : string | number = 0;

5. 타입을 변수로 만들어서 대입 가능

ex 1)
type Type = string | number;
const gender : Type = "1"
ex 2)
type Person = {
  name: string,
  age: number,
  gender: boolean
}

const person : Person {
  name: "John",
  age: 10,
  gender: true
}

6. 여러개의 속성 타입 한꺼번에 지정 가능

type Person = {
  // key값이 string인 값은 모두 value가 string type
  [key : string] : string	
}

7. '?' 사용시 해당 객체가 있어도, 없어도 됨

name 속성에 ?를 붙여주었기 때문에, name 없이 age만 명시하여도 에러를 띄우지 않는다.

type objType = {name? : string, age : number}
const obj : objType = {age : 22}

8. 함수 타입 지정

function 함수명(인자값 : 인자타입) : return값 타입 {
  return x * 2;
}
function multiply(x : number) : number {
  return x * 2;
}
const multiply = (x : number) : number => {
  return x * 2;
}

Typescript로 eventHandling 하기

js를 사용해서 이벤트 함수를 사용했을 때와 똑같이 작성했는데,
'객체 값이 아마도 null일 것이다'라며 에러를 띄웠다.

Typescript는 값의 타입을 꼼꼼히 체크한다.
만약, document.querySelector 에서 id값을 잘못 입력하거나, 렌더링 되지 않았을 때 처럼 값이 null인 경우가 있을 경우를 대비하여 띄우는 에러이다.

React를 사용할 때 render가 된 후에 componentDidMount가 일어나서 데이터가 undefined일 때 띄우는 에러를 방지할 때 사용했던 방식을 그대로 사용한다.

// 방법 1
if(title !== null) {
     title.innerHTML = "반가워요";
}
// 방법 2
if(title instanceof Element) {
   title.innerHTML = "반가워요";
}
// 방법 3
if(title?.innerHTML) {
	title.innerHTML = "반가워요"; 
}

따라서 eventHandler 함수를 사용할 때에도 다음 처럼 작성해야 한다.

title?.addEventListener('click', () => {  
   alert("title");
})

만약, 방법 2번을 써서
a 태그의 href 속성을 ts에서 이벤트 핸들러 함수로 지정한다고 가정해보자.

if(address instanceof HTMLAnchorElement) {}

이렇게 더 명확한 타입을 지정해주어야 한다.
HTMLAnchorElement, HTMLHeadingElement, HTMLButtonElement 등이 있다.

React에서 Typescript 사용하기

  1. jsx 파일은 .tsx를 확장자로 한다.
  2. Hook 기준
  • const 함수명 : React.FC (Function Type이라는 뜻)
  • Props 타입 지정하여, 제네릭 형식으로 <Props 타입명>
profile
Minji Jeong
쿼카를 사랑하는 프론트엔드 개발자입니다 :)

0개의 댓글