🤔 TypeScript란?

TypeScript는 MicroSoft에서 개발하고 유지/관리하는 오픈소스입니다. javascript의 상위호환으로 코드가 실행되기 전에 실행되는 도구이고 TS파일 컴파일을 통해 타입이나 유형이 올바른지 체크하여 오류 발생을 방지하고 정적 타입을 이용하여 코딩을 할 수 있도록 도와줍니다.

⚙️ 사용법

1. npm i typescript

2. tsconfig.json 설정

tsconfig.json에서 TypeScript를 어떻게 javascrtipt로 변환하는지 정해준다

{
    "compilerOptions": { // 실제 컴파일 할 경우 적용되는 옵션들
      "module": "commonjs", //어떤 모듈 방식으로 컴파일할지 설정
      "target": "ES2015", // 어떤 버전으로 컴파일할지 작성
      "sourceMap": true, // 해당하는 .map 파일을 생성
      "outDir": "dist" // 컴파일한 것들을 dist에 저장
    },
    "include": ["src/**/*"], // 컴파일할 경로 설정
    "exclude": ["node_modules"] // 컴파일 대상을 제외하는 옵션
}

3. 컴파일

타입스크립트는 .ts 확장자를 가진 파일로 작성할 수 있고, index.ts파일을 작성하고 터미널에 tsc를 작성하면 index.js와 index.js.map이 생성된다.

nodejs는 typescript를 이해하지 못하기 때문에 일반적인 javascript코드로 컴파일하는 작업이 필요하다

💡 Types

TypeScript는 일반 변수, 매개 변수, 객체 속성 등에 타입을 지정할 수 있습니다.

// javascript
const name = "Nicolas",
  age = 24,
  gender = "male";

const sayHi = (name, age, gender?) => {
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

sayHi(name, age);

위의 코드는 javascript 코드입니다. gender뒤에 ?는 필수가 아닌 선택적으로 값을 받는다는 의미입니다. 아래의 코드는 타입을 지정한 typescript입니다.

// TypeScript
const sayHi = (name: string, age: number, gender?: string): string => {
  return `Hello ${name}, you are ${age}, you are a ${gender}`;
};

console.log(sayHi("Nicolas", 24, "male"));

export {};

이와 같이 타입을 지정해줄 수 있습니다. 타입을 지정했는데 알맞은 타입이 입력되지 않으면 컴파일조차 진행되지 않고 코드 작성하는 시점에서 에러가 발생합니다.

타입 선언은 아래와 같습니다.

1. 불린: Boolean

let isDone: boolean = false;

2. 숫자: Number

let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;

3. 문자열: String

let str: string;
let red: string = 'Red';
let green: string = "Green";
let myColor: string = `My color is ${red}.`;
let yourColor: string = 'Your color is' + green;

4. 배열: Array

// 문자열만 가지는 배열
let fruits: string[] = ['Apple', 'Banana', 'Mango'];
// Or
let fruits: Array<string> = ['Apple', 'Banana', 'Mango'];

// 숫자만 가지는 배열
let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
// Or
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];

// 유니언 타입(다중 타입)
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
// Or
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];

// 항목의 값을 단언할 수 없다
let someArr: any[] = [0, 1, {}, [], 'str', false];

5. 튜플: Tuple => 정해진 타입의 고정된 길이(length) 배열

// Tuple
let user: [number, string, boolean] = [1234, 'HEROPY', true];
console.log(user[0]); // 1234
console.log(user[1]); // 'HEROPY'
console.log(user[2]); // true

// readonly 키워드를 사용해 읽기 전용 튜플을 생성
let a: readonly [string, number] = ['Hello', 123];

6. 열거형: Enum =>

// 기본적으로 0부터 시작하며 값은 1씩 증가
enum Week {
  Sun, //0
  Mon, //1
  Tue, //2
  Wed, //3
  Thu, //4
  Fri, //5
  Sat  //6
}

// 수동으로 값을 변경할 수 있으며, 값을 변경한 부분부터 다시 1씩 증가
enum Week {
  Sun, //0
  Mon = 22, //22
  Tue, //23
  Wed, //24
  Thu, //25
  Fri, //26
  Sat  //27
}

7. 모든 타입: Any

const list: any[] = [1, true, 'Anything!'];

8. 알 수 없는 타입: Unknown

let a: any = 123;
let u: unknown = 123;

let v1: boolean = a; // 모든 타입(any)은 어디든 할당할 수 있습니다.
let v2: number = u; // 알 수 없는 타입(unknown)은 모든 타입(any)을 제외한 다른 타입에 할당할 수 없습니다.
let v3: any = u; // OK!
let v4: number = u as number; // 타입을 단언하면 할당할 수 있습니다.

9. 객체: Object

let obj: object = {};
let arr: object = [];
let func: object = function () {};

let userA: { name: string, age: number } = {
  name: 'HEROPY',
  age: 123
};

let userB: { name: string, age: number } = {
  name: 'HEROPY',
  age: false, // Error
  email: 'thesecon@gmail.com' // Error
};

10. 유니언(Union) => 2개 이상의 타입을 허용하는 경우

let union: (string | number);
union = 'Hello type!';
union = 123;
union = false; // Error - TS2322: Type 'false' is not assignable to type 'string | number'.

11. 인터섹션(Intersection) => &(ampersand)를 사용해 2개 이상의 타입을 조합하는 경우

// 기존 타입들이 조합 가능하다면 인터섹션을 활용할 수 있습니다.
interface IUser {
  name: string,
  age: number
}
interface IValidation {
  isValid: boolean
}
const heropy: IUser = {
  name: 'Heropy',
  age: 36,
  isValid: true // Error -  TS2322: Type '{ name: string; age: number; isValid: boolean; }' is not assignable to type 'IUser'.
};
const neo: IUser & IValidation = {
  name: 'Neo',
  age: 85,
  isValid: true
};

📁 interfaces

interface 키워드를 사용해 값이 특정한 형태(shape)를 제약하고 interface는 컴파일되지 않습니다.

interface Human {
  name: string;
  age: number;
  gender: string;
}

const person = {
  name: "nicolas",
  age: 22,
  gender: "male"
};

const sayHi = (person: Human): string => {
  return `Hello ${person.name}, you are ${person.age}, you are a ${
    person.gender
  }!`;
};

console.log(sayHi(person));

export {};

📁 classes

interface는 컴파일되지 않지만 classes는 컴파일이 되고 코드를 컨트롤 할 수 있게 해줍니다.
클래스가 어떤 속성을 가져야하는지 그 속성이 어떤 권한을 가지고 있는지 선언해야합니다.

접근 제한자

• public (어디서든 접근 가능)

• private (외부 접근 불가)

• protected (내부접근 가능, 서브클래스 접근 또한 가능)

class Human {
  public name: string;
  private age: number;
  public gender: string;
  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}
  
const lynn = new Human("Lynn", 18, "female");

  const sayHi = (lynn: Human): string => {
    return `Hello ${lynn.name}, you are ${lynn}, you are a ${
      lynn.gender
    }!`;
  };
  
  console.log(sayHi(lynn));
  
  export {};

📚 Reference

• TypeScript
  https://www.typescriptlang.org/docs/handbook/intro.html

• 한눈에 보는 타입스크립트
  https://heropy.blog/2020/01/27/typescript/