[Section 01] Typescript 시작하기

---

< 01. Typescript >

1. 타입스크립트란?

타입스크립트는 별도의 새로운 언어가 아니라, 자바스크립트에 타입(type)을 추가한 확장 언어입니다. 새로 배우는 언어가 아니기 때문에 학습 난이도는 높지 않은 편이며, 처음에는 복잡해보이지만, 나중에 가도 복잡합니다.. (쉽게 쉽게 할거면 자바스크립트 쓰자.. 😉)

설치

타입스크립트로 작성된 코드를 실행하려면 타입스크립트 코드를 자바스크립트 코드로 ‘변환’해주는 작업이 필요합니다. 이러한 변환 작업을 전문 용어로 ‘컴파일(compile)’이라고 합니다. 컴파일을 하기 위해서 여러가지 방법이 있지만, 저희는 Node.js를 이용하는 방법으로 합니다.

Step 1

실습에 사용할 폴더를 하나 생성하여 비주얼 스튜디오 코드로 열어줍니다.

Step 2

비주얼 스튜디오 코드의 가장 루트 폴더 경로 내에서 아래와 같이 npm 패키지 초기화를 진행합니다.

 npm init -y // 기본 값으로 npm 초기화
 npm install typescript --save-dev // 개발모드로 설치
 node ./node_modules/typescript/bin/tsc --init  # 타입스크립트 초기화

Step 3

이제 아래와 같은 명령어로 타입스크립트 파일을 자바스크립트로 변환할 수 있습니다.

node ./node_modules/typescript/bin/tsc index.ts

예제

index.ts

function sum(a: number, b: number) {
  return a + b;
}
const a = sum(10, 20);
console.log(a);

변환

node ./node_modules/typescript/bin/tsc index.ts

index.js

function sum(a, b) {
    return a + b;
}
var a = sum(10, 20);
console.log(a);

{
  "compilerOptions": {
    // 컴파일된 JavaScript 코드가 호환될 ECMAScript의 버전을 지정합니다.
    // 여기서는 ECMAScript 2016 (ES7) 버전으로 컴파일됩니다.
    "target": "es2016",
    
    // 모듈 시스템을 지정합니다. CommonJS 모듈 시스템은 Node.js에서 사용되는 표준입니다.
    // 컴파일된 코드는 CommonJS 모듈 형식을 따릅니다.
    "module": "commonjs",
    
    // 컴파일된 JavaScript 파일이 출력될 디렉토리를 지정합니다.
    // 여기서는 `./dist` 디렉토리에 컴파일된 파일이 저장됩니다.
    "outDir": "./dist",
    
    // CommonJS 모듈을 ES6 모듈처럼 사용할 수 있도록 추가적인 코드 변환을 수행합니다.
    // 주로 `import` 구문을 사용할 때 유용합니다.
    "esModuleInterop": true,
    
    // 파일 이름의 대소문자 일관성을 강제합니다.
    // 파일을 불러올 때 대소문자가 일치하지 않으면 오류를 발생시킵니다.
    // 이는 특히 대소문자를 구분하는 파일 시스템에서 유용합니다.
    "forceConsistentCasingInFileNames": true,
    
    // 엄격한 타입 검사를 활성화합니다.
    // 여러 가지 타입 검사 옵션을 포함하여 더욱 엄격한 타입 체크를 수행합니다.
    "strict": true,
    
    // .d.ts 파일의 타입 검사를 건너뜁니다.
    // 이는 컴파일 속도를 높이기 위해 유용합니다.
    "skipLibCheck": true
  },
  
  // 컴파일 대상 파일을 지정합니다.
  // 여기서는 `src` 디렉토리 아래의 모든 `.ts` 파일을 포함합니다.
  "include": ["src/**/*.ts"],
  
  // 컴파일에서 제외할 파일을 지정합니다.
  // 여기서는 `node_modules` 디렉토리를 제외합니다.
  "exclude": ["node_modules"]
}

< 02. Typerscript with VSCode >

1. 설치

> npm i typescript
> npx tsc -v  # 버전 확인

> npm i ts-node
> npx ts-node -v # 버전 확인

Code Runner

# setting
# code-runner.excutorMap 추가
"code-runner.clearPreviousOutput": true,
**"code-runner.executorMap": {
  "typescript": "node_modules/.bin/ts-node"
},**

코드 저장 후 실행해보면 Code Runner로 구동 가능합니다.

---

[Section 02] Typescript 기본

---

< 01. 필수 자바스크립트 문법 >

• 동적 언어는 모든 게 런타임 후 결정. 즉, 코드를 실행해봐야 결정된다.
• 타입스크립트는 정적 언어
  • .ts → 컴파일러 → .js 변환하는 것을 컴파일이라고 함
  • 변경하게 해주는 도구를 컴파일러라고 한다. tsc 도구
  • 컴파일 단계에서 모든 게 결정
  • 컴파일 과정에서 오류가 있는지 없는지 검사 가능
• 타입스크립트 = 자바스크립트 + 타입시스템
• 코드러너 익스텐션으로 출력 값을 확인 가능하다
  • npx (node package excutor) : npm 실행
  • npx ts -node 실행하면 ts -node를 알아서 실행해준다
  • 설치가 되어있지 않으면 설치를 원하는지 안내까지 해줌
  • 글로벌로 설치하지 않았을 때 npx를 사용하면 됨
  • npx tsc는 전체 문서를 컴파일
  • npx src/경로/파일명 해당 파일만 컴파일
• tip) 타입스크립트를 공부할 때 코드 작성을 중괄호 {} 안에 하면 된다
  • 변수가 중복 선언되면 에러가 되기 때문

< 02. 기본 타입 >

1. string (타입)

• 백틱(``), 큰 따옴표(""), 작은 따옴표('')로 둘러싸인 문자열은 모두
  string 타입스크립트로 불러올 수 있음

  // ex)
  let str: string = "Hello, Typescript!";
  // console.log(str);
  let emoji: string = "❤️";
  // 이모티콘도 유니코드로 작성되어 있으므로 가능함
  // console.log(emoji);
  // console.log(str.length);
  // console.log(str[0]);
  let mergeStr = str + emoji;
  // console.log(mergeStr);
  // console.log(emoji.length);

2. number (타입)

  // ex)
  let x: number = 10; // 정수
  let y: number = 3.14; // 소수점
  let z: number = -100; // 음수
  let a: number = NaN; // Not a Number
  let b: number = Infinity; // 무한대
  let result: number = 0 / 0; // NaN
  let positiveInfinity: number = 1 / 0; // Infinity
  let negativeInfinity: number = -1 / 0; // -Infinity
  let pi: number = Math.PI;
  let sqrt: number = Math.sqrt(16);
  let random: number = Math.random();

3. boolean (타입)

• true, false 결과값을 가질 때 사용

  // ex)
  let isActive: boolean = true;
  let isCompleted: boolean = false;
  let isBigger: boolean = 10 > 20;
  let boolTrue: string = "true";
  let boolTrue2: boolean = "true"; // error 발생
  let boolTrue3: boolean = JSON.parse("true"); // true
  let boolFalse: boolean = JSON.parse("false"); // false
  // 0, "", NaN
  // falsy로 평가되는 값
  let isZero: boolean = !!0;
  let empty = "";
  let isEmpty: boolean = !!empty;
  let isNanValue: boolean = !!NaN;

4. object (타입)

• 포괄적인 타입

  // ex)
  let userObj: object = { name: "철수", age: 10 };
  let emptyObj: object = {}; // 빈 객체도 객체
  let emptyArr: object = []; // 빈 배열도 객체
  let emptyFunc: object = function () {}; // 함수도 객체
  console.log(userObj.name); // object 형식에 name 속성이 없습니다
  // 속성에 타입을 넣어줘야 error가 안 생김
  let userObj2: { name: string; age: number } = {
    // name: string, age: number도 가능 콤마도 가능 세미콜론도 가능
    name: "철수",
    age: 10,
  };
  console.log(userObj2.name); // 철수

5. array (타입)

• 배열을 다루기 위한 타입
• array를 작성하는 것이 아니라 대괄호 []를 넣어줘야 한다.

// ex)
  const emptyArr: [] = []; // 최신 버전
  const emptyArrOther: Array<[]> = []; // 옛날 버전
  
  const numArr: [] = [1, 2, 3]; 
  // error, [] 앞에 어떤 타입의 배열인지 적어줘야 함
  const numArr2: number[] = [1, 2, 3];
  const numArr3: Array<number> = [1, 2, 3]; // 옛날 버전
  
  const stringArr: string[] = ["a", "b", "c"];
  const stringArr2: Array<string> = ["a", "b", "c"];
  
  const fruits: string[] = new Array("apple", "banana", "mango");
  const fruitsOther: Array<string> = new Array("apple", "banana", "mango");
  
  // 중첩된 배열
  const nestedArray: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];
  const nestedArrayOther: Array<Array<number>> = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];
  const mixArr: [number, string, {}, number[]] = [1, "a", {}, [1, 2, 3]];

6. 튜플

• 배열의 요소를 타입에 맞게 지정해주는 것

// ex)
  const misArrOther: [number, string] = [1, "a"];
  const user: [string, number] = ["john", 25];
  const emptyErr: [] = []; 
  // 인덱스의 타입을 지정할 것이 없으므로 이것 또한 튜플
  emptyErr.push(10); // 바로 error가 남. 
  // emptyErr는 아무 타입도 지정되어 있지 않으므로
  const emptyErr: number[] = [] // 이렇게 작성 해야 error가 안 남
    // 같은 타입에 해당하는 값을 넣는 것은 가능하지만
    // 타입이 다른 값을 넣는 것은 불가능
    
  let arr: [number, string] = [1, "a"];
  arr[0] = 2;
  // arr[1] = 1; // error
  console.log(arr); // [ 2, 'a' ]
  
  // 옵셔널 요소 `?`
  // 초기값이 없어도 상관 없음
  let user2: [string, number, string?] = ["john", 25];
  user.push("male");
  // user.push(10); // 여기서는 error가 나지 않아도 로직에서 error날 것
  let [item, ...rest]: [string, ...number] = ["item1", 1, 2, 3, 4]; 
  // ... 전개 연산자로 나머지 타입을 모두 지정 가능

7. null, undefined (타입)

• 변수를 선언하고 아무 값도 할당하지 않으면 undefined

  // ex)
  let x: null = null;
  // null 병합 연산자 `??`
  // 앞의 값이 null이면 뒤의 값을 할당
  let c = x ?? "test";
  let b: undefined = undefined;

8. any (타입)

• 일부로 모든 자료형을 다 허용하게 지정할 때

  // ex)
  let value: any = 10;
  value = "a";
  value = [];
  value = {};
  value = function () {};
  let arr: any = [1, 2];
  console.log(arr[0], arr[1]);

9. unknown (타입)

• 자료형을 알 수 없을 때 ( 나중에 값이 입력되면 어떤 타입인지 확인해야 한다. )
• 실제 값을 사용할 때 타입을 검증해야 됨

  // ex)
  let value: unknown = [1, 2];
  // value = "str";
  // value = [];
  // value = function () {};
  // value = {};
  console.log(value[0]); 
  // 타입이 뭔지 모르는데 배열처럼 꺼내 쓰려고 하니까 error가 난다
  // 반대로 any였으면 출력 가능
  // value라는 변수가 배열이라는 것을 알려줘야 함
  // 사전에 타입을 검사해준다
  if (Array.isArray(value)) {
    console.log(value[0]);
  }

---

< 하루 정리 >

1차 팀 프로젝트가 끝나고 체력이 많이 떨어졌다.

그래도 오늘은 비교적 쉬운 내용을 배워서 집중력을 놓치지 않고 끝까지 공부할 수 있었다.

처음으로 연습문제를 모두 풀어서 제출한 아주 뿌듯한 날이다.

너무 지쳐서 오늘은 여기까지..