타입스크립트 시작하기 - 환경설정, 기본타입, 함수

type-script 컴파일러 설치하기

npm install typescript -g

 

hello.ts 파일 생성 후 터미널에 tsc hello.ts 코드로 명령하면,

타입스크립트를 컴파일해서 자바스크립트 파일을 만들어준다.

 

타입스크립트 환경 설정

폴더 생성하기

mkdir [폴더명]

package.json 파일 생성하기

yarn init -y

타입스크립트, ts-node 패키지 추가설치

ts-node는 콘솔에서 바로 실행할 수 있도록 해준다.

yarn add typescript ts-node

프로젝트의 타입스크립트 설정 완료 -> tsconfig파일 생성됨

yarn run tsc --init

es6를 혹시 사용하고싶다면 target을 es6로 수정해준다.

초기엔 주석처리되어있는 "outDir"은 컴파일된 파일을 어디에 저장할지 정한다.

주석처리되었을땐 ts파일이 담겨있는 곳에 자동저장된다. 이젠 dist폴더에 저장되도록 수정하였다.

 

tsconfig.json 수정 전

tsconfig.json 수정 후

타입 스크립트 파일 생성

src폴더를 만들고 ts파일을 만들어주었다.

// practice.ts

const message: string = "hello world";
console.log(message);

message란 변수는 string타입만 담을 수 있다.

'hello world'가 아닌 숫자를 넣을 경우엔 에러가뜬다.

yarn run tsc

만든 파일의 결과물 실행

node ./dist/practice.js

 

기본타입

let count = 0;
count += 1;
count = 'hello'; // count는 number타입을 자동 설정해주기때문에 에러가 난다

const message: string = 'hello world';
const done: boolean = false;

const numbers: number[] = [1,2,3];
const messages: string[] = ['hello', 'world'];

message.push(1); // 문자열에 1을 넣으려하니 에러발생

// 특정 값이 undefiend일수도있고 문자일수도 있을땐
let mightBeUndefiend: string | undefined = undefined;

// 특정 값이 널일수도있고 숫자일수도있다면
let nullableNumberr: number | null = null;

// red, orange, yello 중 하나일때
let color: 'red' | 'orange' | 'yellow' = 'red';

 

함수

sum함수를 만드는데, x, y값의 타입을 선언해주지않았다며 에러가난다.

// 각 파라미터의 타입과 함수의 결과물의 타입도 정해줄 수 있다.
function sum(x: number, y: number): number {
    return x + y;
}

 

숫자배열을 파라미터로 가져와 총합을 구하는 함수

// numbers의 타입은 number의 배열
function sumArray(numbers: number[]): number {
    return numbers.reduce((acc, current) => acc + current, 0);
}

const total = sumArray([1, 2, 3, 4, 5]);
console.log(total);

// 잘뜨는지 콘솔 바로 확인
yarn run ts-node ./src/practice.ts

 

함수에서 아무것도 반환하지않는다면 반환타입은 void로 설정된다.

함수 반환타입이 문자 또는 숫자일때

function returnStringOrNumber(): string | number {
    return 'hello';
}

returnStringOrNumber();

 

강의: <<벨로퍼트와 함께하는 모던 리액트>> by 강사 김민준 님