[TypeScript] Typescript Overview

카테고리 : 프로그래밍 언어
태그: ts · typescript · IDE · CompilerOptions · Type Alias · Interface · Class
등록일: 2022년 08월 21일
최근 업데이트: 2022년 08월 21일

---

• IDE 활용
• Super Property
  • CompilerOptions
• Typescript Basic
• Type Assertion
• Type Alias
• Interface
  • class implements interface
  • interface extends interface
  • function interface
  • Class

1. 프로그래밍 언어
2. Complied Language

• Transpile
• JS ⇒ Interpreted Language

Compiled	Interpreted
컴파일 필요 O	컴파일 필요 X
컴파일러가 필요 O	컴파일러가 필요 X
컴파일하는 시점 O	컴파일하는 시점 X
컴파일된 결과물 실행	코드 자체를 실행
컴파일된 결과물을 실행하는 시점	코드를 실행하는 시점 O = 런타임

Traditional Compiled Language

• 컴파일 언어
• C , C++ , Go, C#
• 프로그래머가 작성한 Source Code를 기계어로 변환하는 과정을 Compile이라고함
• 기계어로 바꾸는 방식(인터프리터 언어) 보다 빠름

tsc—init ⇒ tsconfig.json file 생성

"target": "es2016" => 컴파일 시킬 ES버전
"module": "commonjs" => 결과의 모듈을 변환

---

---

IDE 활용

Compiler

• VS Code에 컴파일러 내장

tslint ⇒ Typescript code 규약

• npm i typescript tslint(로컬)
• tslint —int
• tslint 플러그인 설치

---

---

Super Property

• compileOnSave - true/false(default false) ⇒
• extends - 파일 경로명:string (잘안쓰임)
• CompilerOptions
• files ⇒ 상대 혹은 절대 경로의 리스트 배열 (설정없으면 모두 compile)
• glob패턴
• include ⇒ (설정없으면 모두 compile)
• exclude ⇒ (설정없으면 모두 compile)

CompilerOptions

@types //node_modules/@types 라는 모든 경로를 찾아서 사용 / [] 빈 배열 설정시 시스템이용 X

target : 빌드 결과물을 어떤 버전으로 할 것인지 설정 (지정 안할 시 es3)

lib : type definition 라이브러리를 어떤 것을 사용할지  설정

target : TypeScript는 JS API(Math 와 같은)에 대한 기본적인 타입 정의와 브라우저 환경

module : 컴파일 된 모듈의 결과물을 어떤 모듈 시스템으로 할지를 결정 target이 'es6'면 es6가 디폴트값

Typescript Basic

---

Primitive Type : 실제 값을 저장하는 자료형

literal : 값자체가 변하지 않는 값

Boolean : true/false

Number : 숫자

String : 문자

Template String : 행에 걸쳐 있거나 표현식을 넣을 수 있는 문자열

Undefined & Null : 고유값

*Void : 타입이 없는 상태 , 주로 함수의 리턴이 없을 때 사용

*Any : 어떤 타입이어도 상관없는 타입 , 최대한 쓰지 않는게 핵심

Never : 리턴에 주로 사용 (자주 안쓰임)

Array : 배열 객체

*Tuple : 배열인데 타입이 한가지가 아닌 경우 (객체임)

*Enum : 비슷한 값들끼리 묶어줄 때 임의의 값을 순차적으로 할당해줌 ⇒ Enum 원소의 결과값은 string

*Symbol : 고유하고 수정 불가능한 값으로 만듬

Type Assertion

---

형 변환과 다름

‘타입이 이것이다’라고 컴파일러에게 알려주는 것을 의미함

• 변수 as 강제할 타입 (주로사용)
• <강제할 타입=""> 변수

Type Alias

---

타입 별칭을 지어줌

Interface

---

---

class implements interface

interface IPerson {
  name: string;
  hello(): void;
}

class Person implements IPerson {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
  hello(): void {
    console.log(`hello ${this.name} 입니다`);
  }
  public hi(): void {
    console.log(`현지 ${this.name} 입니다`);
  }
}

const person: IPerson = new Person("Mark");

person.hi();

interface extends interface

interface Person {
  name: string;
  age?: number;
}

interface Korean extends Person {
  city: string;
}

// Person interface를 상속 받고 Korean interface에 city의 타입 추가

const k: Korean = {
  name: "Kdn",
  city: "Seoul",
};

function interface

interface HelloPerson {
  (name: string, age?: number): void;
}

let helloPerson: HelloPerson = function (name: string) {
  console.log(name);
};

helloPerson("Mark");

//함수의 타입 체크는 할당할때가 아니라 사용할때 합니다

Class

class Person {
	name:string;
	age:number;
	constructor(name: string ){
		this.name = name
	}
}
const person = new Person("Mark");

console.log(person.name)

//1. 생성자 함수가 없으면 디폴트 생성자가 불림
//2. 클래스의 프로퍼티 혹은 멤버 변수가 정의되어 있지만
 값을 대입하지 않으면 undefined임

//3. 접근제어자는 public이 디폴트값