1장 타입스크립트란?

1.1 자바스크립트의 한계

1.2 타입스크립트란?

1.2.1 타입 시스템

1) 동적 타입 시스템 (Dynamic Type System)

let str = "hello" // string
let num = 12345 // number
let bool = true // boolean

console.log(typeof str) // string
console.log(typeof num) // number
console.log(typeof bool) // boolean

2) 정적 타입 시스템 (Static Type System)

// TypeScript
let str:string = "hello";
let num:number = 12345;
let bool:boolean = true;

let strNum = str * num; // Error
let str.parseInt(); // Error

3) 점진적 타입 시스템 (Gradual Type System)

// TypeScript
let myVar = "hello"
myVar = 12345 // Error

myVar.parseInt(); // Error

1.3 타입 추론

1.3.1 동적으로 추론 가능한 타입

1) 변수 선언

let num = 10; // number
let str = "hello"; // string
let bool = true; // boolean

2) 변수 선언 및 미할당

let myVar; // any

myVar = "hello" // string
myVar = 10; // number
myVar = true; // boolean

3) 객체 선언 및 구조분해할당

let obj = {
  id : 1, // number
  userName : "조병민", // string
  introduce : "반갑습니다.", // string
  adult : true, // boolean
}

let { id, userName, introduce, adult } = obj; // number, string, string, boolean

1.3.2 동적으로 추론 불가능한 타입

1) 함수

function userAdd(userinfo) {} // Error

2) 배열

let userList = [];
userList.push("조병민"); // Error

1.4 타입스크립트 환경 설정

npm이란? npm은 Node Package Manager의 약자로, Node.js에서 사용되는 패키지 모듈을 관리하는 데 사용되는 도구입니다. npm을 사용하면 이미 만들어진 모듈을 재사용할 수 있고, 버전 관리도 쉽게 할 수 있습니다.

1.4.1 Node.js 설치하기

1) Node.js 홈페이지에서 Node.js 설치하기 (맥OS 설명)

2) 맥OS 용 패키지 관리자 Homebrew로 Node.js 설치하기

Homebrew란? Homebrew 홈페이지 : https://brew.sh/ Homebrew는 맥OS 운영 체제를 위한 무료 오픈소스 소프트웨어 패키지 관리 시스템입니다. 많은 맥OS 사용자들이 소프트웨어 패키지를 관리하기 위해 Homebrew를 사용합니다.

brew --version

Homebrew 4.2.6
Homebrew/homebrew-core (git revision 67af0873b8e; last commit 2024-02-01)
Homebrew/homebrew-cask (git revision 258facca1e; last commit 2024-02-01)

zsh: command not found: brew

/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/install.sh>)"

brew install node

brew install nvm

mkdir ~/.nvm

open -a TextEdit ~/.zshrc

open -a TextEdit ~/.bash_profile

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

source ~/.zshrc  # zsh를 사용하는 경우
source ~/.bash_profile  # bash를 사용하는 경우

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

nvm list-remote

nvm install --lts

nvm install 20.11.0

1.4.2 타입스크립트 설치하기

npm install typescript

npm ls typescript

1.4.3 타입스크립트 사용해보기

function greet(name: string): void {
  console.log(`hello, ${name}`);
}

greet('TypeScript');

tsc hello.ts

node hello.js

1.4.4 타입스크립트 컴파일러 환경설정 tsconfig.json 세팅

1) tsconfig.json 생성

2) compilerOptions 속성

{
  "compilerOptions": {
    "target": "es6",
  }
}

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6", // 또는 esnext
  }
}

function greet(name: string): void {
  console.log(`hello, ${name}`);
}

greet("TypeScript");

{
  "compilerOptions": {
    "target" : "es6",
    "module": "es6",
    "rootDir": "./src",
    "outDir": "./build/js",
  }
}

"compilerOptions": {
	...,
	"strict": false,
	"noImplicitAny": false,
}

function add(a, b) {
  return a + b;
}

"compilerOptions": {
	...,
	"strict": false,
	"noImplicitAny": true,
}

"compilerOptions": {
	...,
	"strict": false,
	"strictNullchecks": false,
}

let strVar: string;
let anyVar: any;
let unknownVar: unknown;
let undefinedVar: undefined;
let nullVar: null;

strVar = null;
strVar = undefined;
anyVar = null;
anyVar = undefined;
unknownVar = null;
unknownVar = undefined;
undefinedVar = null;
nullVar = undefined;

"compilerOptions": {
	...,
	"strict": false,
	"strictNullchecks": true,
}

let strVar: string;
let anyVar: any;
let unknownVar: unknown;
let undefinedVar: undefined;
let nullVar: null;

anyVar = null;
anyVar = undefined;
unknownVar = null;
unknownVar = undefined;
undefinedVar = undefined;
nullVar = null; 
undefinedVar = null; // Error
nullVar = undefined; // Error
strVar = null; // Error
strVar = undefined; // Error

"compilerOptions": {
	...,
	"strict": false,
	"strictFunctionTypes": true,
}

type A = (x: string | number) => void;
type B = (x: string) => void;

const AFunction: A = (x: string | number): void => {};
const BFunction: B = (x: string): void => {};
let AB: A = BFunction; // Error
let BA: B = AFunction;

"compilerOptions": {
	...,
	"strict": false,
	"strictBindCallApply": false,
}

function multiply(x: number, y: number) {
  console.log(x * y);
}

const boundMultiply = multiply.bind(null, "A", 25);
boundMultiply();

"compilerOptions": {
	...,
	"strict": false,
	"strictBindCallApply": true,
}

class User {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

class User {
  id: number;
  name: string;
  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age; // Error
  }
}

"compilerOptions": {
  ...,
  "strict": false,
  "strictNullChecks": true,
  "strictPropertyInitialization": true,
}

class User {
  id: number; // Error
  name: string;
  constructor(id: number, name: string) {
    this.name = name;
  }
}

class User {
  constructor(public id: number, public name: string) {
    // 타입스크립트 코드에서
    // this.id = id, this.name = name 코드는 필요 없어집니다.
  }
}

"compilerOptions": {
  ...
  "strict": false,
  "strictNullChecks": false,
  "strictPropertyInitialization": true,
}

class User {
  constructor(public id: number, public name: string) {}
}

"compilerOptions": {
  ...
  "strict": false,
  "noImplicitThis": true,
}
test.ts

class Person {
  constructor(public name: string) {
    this.name = name;
  }

  sayHello() {
    return function() {
      console.log(`hello ${this.name}`); // Error
    }
  }
}
const person = new Person("John");
const sayPerson = person.sayHello();
sayPerson.call(person);

class Person {
  constructor(public name: string) {
    this.name = name;
  }

  sayHello() {
    return function (this: Person) {
      console.log(`hello ${this.name}`);
    };
  }
}
const person = new Person("John");
const sayPerson = person.sayHello();
sayPerson.call(person);

class Person {
  constructor(public name: string) {}

  sayHello() {
    return () => {
      console.log(`hello ${this.name}`);
    };
  }
}
const person = new Person("John");
const sayPerson = person.sayHello();
sayPerson();