타입스크립트 시작해보기

자바스크립트는 동적 타입(Dynamic type) 언어 이기에 변수의 타입 지정없이 유연하게 적용이 된다.

var test = '12'/'2'
console.log(test) --->문자열이 아닌 숫자로 적용되어 6이 나옴

**런타임에러의 경우

let text = 'hello';
console.log(text.chartAt(0));
//결과 : h

text = '8' / '2';
console.log(text.chartAt(0));
//결과 : 런타임에러 ..

도중에 타입이 바뀌어 버리면 런타임 에러가 나오게 된다.

많은 양의 코드에서는 바뀔 여지가 있기에 그 위험을 타입스크립트라는 정적 타입으로 없애준다.

🟦타입스크립트

출처 : https://react.vlpt.us/using-typescript/01-practice.html

• npm install -g typescript 디렉토리 안 설치
• 프로젝트 디렉토리 안에 tsconfig.json 생성(tsc --init쓰면 자동 생성)
  - target: 컴파일된 코드가 어떤 환경에서 실행될지 정의(화살표함수는 es6로, function은 es5로)
  - module: 컴파일된 코드가 어떤 모듈 시스템을 사용할지 정의(common입력시, export default Sample 을 하게 됐을 때 컴파일 된 코드에서는 exports.default = helloWorld 로 변환)
  - strict: 모든 타입 체킹 옵션을 활성화한다
  - outDir: 컴파일된 파일들이 저장되는 경로 지정가능(tsc 없이 dist 폴더를 생성하여 js 파일을 담음)
• npm install ts-node ts 를 따로 컴파일하지 않아도 실행해서 console.log값을 볼 수 있음 => 실행방법: yarn run ts-node ./src/practice.ts <= ts 폴더이름

tsconfig.json 👇

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  }
}

• 타입스크립트는 *.ts 확장자 사용

src/practice.ts 👇

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

해당 프로젝트 디렉토리에 위치한 터미널에서 yarn run tsc 명령어 입력하면 practice.js 파일이 생성된다
js파일에는 우리가 ts파일에 명시한 값의 타입은 컴파일되는 과정에서 모두 사라지게 된다.

##예시
let count = 0;
count += 1

const done: boolean = true;

let mightBeUndefined: string | undefined = undefined; 
// string 일수도 있고 undefined 일수도 있음
let nullableNumber: number | null = null; 
// number 일수도 있고 null 일수도 있음
type Lala = string | number; 
//string일수도 있고 number일 수도 있음

let min: Lala = 123; //타입을 넣을 수도 있음

const numbers: number[] = [1, 2, 3] //숫자배열일 때
numbers.push(1)

타입지정 👇

type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}

💣 에러 발생시 컴파일이 되지 않음

---

함수에서 타입 정의하기

• 매개변수에도 타입을 정해주고 return 값도 타입을 정해줘야한다.

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

sum(1, 2);

• 함수 사용시

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

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

함수에 아무것도 반환하지 않아야 한다면 반환 타입을 void로 설정

function returnNothing(): void {
  console.log('I am just saying hello world');
}

---

타입의 종류

• boolean
• null
• undefined
• number
• string
• symbol : 고유하고 수정 불가능한 데이터 타입이며 주로 객체 프로퍼티들의 식별자로 사용(ES6에서 추가)
• object : 객체형
• array : 배열
• tuple : 고정된 수만큼의 타입을 미리 선언 후 배열을 표현
• enum : 열거형, 숫자값 집합에 이름 지정
• any : 타입 추론할 수 없거나 타입 체크가 필요없는 변수에 사용
• void : 일반적으로 함수에서 반환값이 없을 경우 사용
• never : 결코 발생하지 않는 값

출처 : https://velog.io/@recordboy/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8TypeScript-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8