[TypeScript] 1. 타입스크립트 기본

onlydev7777·2024년 9월 26일

☀️ 개요

1. 타입스크립트는 자바스크립트의 확장판

자바스크립트를 안전하게 사용할 수 있도록 타입을 정의

타입스크립트는 자바스크립트의 확장판

JavaScript

let a = 1;
let b = 2;

a = "hello"; // not error

TypeScript

let a:number = 1;
let b:number = 2;

a = "hello"; //error 발생

2. 타입스크립트 동작 원리

타입스크립트는 컴파일 하면 바이트코드가 아닌 자바스크립트 코드가 생성 됨
생성된 안전한 자바스크립트 코드는 브라우저에서 동일한 방식으로 바이트 코드로 컴파일 되어 실행 됨

타입스크립트 동작 원리

3. TypeScript 패키지 설치

사전 설치

TypeScript 컴파일러 글로벌 설치
tsx(TypeScript Execute) 글로벌 설치

# 1. TypeScript 컴파일러 글로벌 설치
sudo npm i -g typescript
# 설치확인
tsc -v
# 2. tsx(TypeScript Execute) 글로벌 설치
sudo npm i -g tsx
# 설치확인
tsx -v

프로젝트 설정

node.js 패키지 초기화
@types/node 패키지 설치
컴파일러 옵션 tsconfig.json 자동생성

# 1. node.js 패키지 초기화
npm init
# 2. @types/node 패키지 설치
npm i @types/node
# 3. tsconfig.json 자동생성
tsc --init

타입스크립트 작성, 컴파일, 실행
src/index.ts 작성
```
console.log("Hello TypeScript");
const a: number = 1;
```
1. 컴파일 tsc
2. 컴파일 && 실행 tsx
```
tsc src/index.ts
tsx src/index.ts
```

3. 타입스크립트가 제공하는 기본 타입

any나 void, never 와 같은 타입스크립트에서 추가된 타입도 있다.
기본 타입들은 부모-자식 관계를 갖는다.

3-1. Primitive Type, 리터럴 타입

number, string, boolean, null, undefined, 리터럴 타입

// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;

// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${num1}`;

// boolean
let boo1: boolean = true;
let bool2: boolean = false;

// null
let null1: null = null;

// undefined
let unde1: undefined = undefined;

// 리터럴 타입
let numA: 10 = 10;
let strA: "hello" = "hello";
let boolA: true = true;

3-2. 배열과 튜플

//배열
let numArr: number[] = [1,2,3];
let strArr: string[] = ["hello", "im", "onlydev7777"];
let boolArr: Array<boolean> = [true, false, true];

//타입이 다양한 배열
let multiArr: (string|number)[] = [1, "hello"]

//다차원 배열
let doubleArr: number[][] = [
    [1,2,3],
    [4,5]
]

//튜플
let tup1: [number, number] = [1,2];
let tup2: [number, string, boolean] = [1, "2", true];

const users: [string, number][] = [
    ["이정환", 1],
    ["이아무개", 2],
    ["김아무개", 3],
    ["박아무개", 4]
]

3-3. 객체

// object
let user: {
  id?: number,
  name: string
} = {
  id: 1,
  name: "이정환"
}

let config :{
  readonly apiKey: string
} = {
  apiKey: "my api key"
}

// config.apiKey = "1234" //error

3-4. 타입 별칭과 인덱스 시그니처

타입 별칭은 매 객체마다 타입에 대한 정보를 넣는 것이 불필요하므로 나온 개념
인덱스 시그니처는 key, value 의 타입이 동일할 때 모든 요소의 타입을 정의하는 것이 불필요하므로 나온 개념

// 타입 별칭
type User = {
  id: number,
  name: string,
  nickname: string
}

let user: User = {
  id: 1,
  name: "홍길동",
  nickname: "onlydev7777"
}

let user2: User = {
  id: 2,
  name: "김길동",
  nickname: "onlydev7777"
}

//인덱스 시그니처
type CountryCodes = {
  [key: string] : string
};

let countryCodes: CountryCodes = {
  Korea : 'ko',
  UnitedState : "us",
  UnitedKingdom : "uk"
}

let countryNumberCodes: {
  [key:string] : number
} = {
  Korea: 410,
  UnitedState: 840,
  UnitedKingdom: 826
}

3-5. 열거형

타입스크립트에서 새로 추가된 개념
Java와 비슷한 문법구조를 갖는다.
명시적으로 코드 구현 가능

// enum 타입
// 여러기자 값들에 각각 이름을 부여해 열거
enum Role {
  ADMIN,
  USER,
  GUEST
}

enum Language {
  korean = "ko",
  english = "en"
}

const user1 = {
  name: "이정환",
  role : Role.ADMIN,
  language: Language.korean
}

const user2 = {
  name: "김길동",
  role : Role.USER,
  language: Language.korean
}

const user3 = {
  name: "홍길동",
  role : Role.GUEST,
  language: Language.english
}

console.log(user1, user2, user3)

3-6. any, unknown

타입스크립트에 새로 추가된 개념
any 는 타입 검사를 받지 않는 자바스크립트의 변수와 동일한 타입
unknown 은 any 보다는 비교적 안전한 타입

any, unknown 차이점
1. any는 다른 타입스크립트 변수에 대입 가능 / unknown은 타입 체킹 후 가능
2. any는 연산 및 메서드 사용 가능 / unknown은 불가능

any는 런타임 오류를 발생할 여지가 크기 때문에 타입스크립트에서 any 사용은 지양 해야 한다.

// any
// 특정 변수의 타입을 모를 때
let anyVar: any = 10;
anyVar = "hello";

let num: number = anyVar

// unknown
let unknownVar: unknown;

unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

if (typeof unknownVar === "number"){
  num = unknownVar;
}

3-7. void, never

타입스크립트에 새로 추가된 개념
void 는 아무런 값이 없음을 의미, java void 와 동일함
never 는 불가능을 의미, 보통 함수에서 정상적인 종료가 불가능할 때 사용

// void -> 공허 -> 아무것도 없다.

function func1(): string {
  return "hello";
}

function func2(): void {
  console.log("func2");
}

function func3(): never {
  while (true) {

  }
}

function func4(): never {
  throw new Error();
}