TIL DAY.51 [React + Typescript] 기본타입, 함수

Typescript 작업 환경 설정하기

CRA로 파일을 만들고 다음과 같은 명령어로 타입스크립트를 설치해줍니다.

yarn add typescript ts-node

다음 명령어를 통해서 타입스크립트의 설정을 변경할 수 있는 tsconfig.json 파일을 만들어 줄 수 있다. tsconfig.json 안에 있는 target을 최신버전인 es6로 변경하는 것을 권장 합니다.

yarn run tsc --init

tsconfig.json안에 있는 outDir을 아래와 같이 설정해줍니다. 이것은 컴파일된 파일을 어디에 저장해줄지 정해주는 과정입니다.

outDir : "./dist"

기본타입

const message: string = 'hellow world' ;
console.log(message);
// message의 타입을 string으로 설정해줍니다.
const done: boolean = false;
// boolean 타입
const numbers: number[] = [1,2,3];
//숫자형 배열 타입지정
const messages: string[] = ['hello', 'world'];
//문자열 배열 타입지정

let mightBeUndefined: string|undefined = undefined;
// undefined일 경우
let nullableNumber: number | null = null;
// null일 경우

let color : 'red' | 'orange' | 'yellow' ='red';
color = 'yellow'
// 이렇게 color의 원하는 값을 지정해 줄 수 있습니다.

node ./dist/practice.js 컴파일된 자바스크립트 파일을 바로 실행해줄수 있습니다.
또는
yarn run ts-node ./src/practice.ts 를 통해 타입스크립트 파일을 바로 실행해줍니다.

함수 타입

function sum(x: number, y: number): number {
  return x + y;
}

const result = sum(1, 2);

function sumArray(numbers: number[]): number {
  return numbers.reduce((acc, current) => acc + current, 0);
}

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

//함수 타입을 지정 안할시 타입 void로 출력됨
function returnNothing() {
  console.log("어쩌고쩌꼬");
}

returnNothing();

// 스트링 과 넘버값을 반환한다
function returnStringOrNumber(): string | number {
  return 4;
}