Typescript Overview

Typescript Overview

  1. 프로그래밍 언어
  2. Complied Language
  • Transpile
  • JS ⇒ Interpreted Language
CompiledInterpreted
컴파일 필요 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이 디폴트값