TypeScript

typescript 를 사용하기 위해

yarn add global typescript

TypeScript 특징

• 컴파일 동작
  javascript 언어는 인터프리터 언어이다. 따라서 코드가 유효한지 알기 위해서는 실행을 해야 알 수 있었다. 결국 코드에서 발생되는 버그를 잡기 위한 많은 시간이 발생한다. 하지만, Typescript 는 컴파일러에 의해서 오류검사를 할 수 있다.
  즉, Typescript는 코드를 컴파일하고 구문 오류를 발견하면 컴파일 오류를 발생시킨다.

• 강력한 정적 타입 지정
  javascript언어는 엄격하지 않은 타입 언어이다. Typescript에는 TLS(TypeScript Language Service) 를 통한 선택적 정적 유형 지정 및 형식 유추 시스템이 함께 제공된다.
  유형이 없는 것으로 선언 된 변수의 유형은 값에 따라 TLS 에서 유추할 수 있다.

• 외부 라이브러리를 위한 type definition 파일 지원 (.d.ts 파일)
  typescript는 타입을 사용하여 어플리케이션을 개발하는데, 외부 라이브러리는 TypeScript가 아니기 때문에, 타입을 사용하지 않고 개발되었을 수도 있기 때문에 외부 라이브러리에 대한 타입 정의를 제공한다.

• 객체 지향 프로그래밍 지원
  클래스, 인터페이스, 상속 등..

  기본적인 파일 생성

  tsc --init

  tsconfig.json 컴파일된 파일을 분리하기 위해서

  "outDir":"./dist"

실습

var mes:string="hello";
console.log(mes);

한 후 컴파일을 따로 동작시켜야한다. 터미널 창을 열어,

tsc [파일명]	// Compile

한 후 ,

node [파일명]	// Execute

실행 완료 !

TypeScript 식별자

• 식별자는 변수 함수등에 사용가능한 이름이다.
• 식별자는 숫자로 시작할 수 없다.
• 식별자는 _,$ 이외의 특수 문자 사용 불가
• 키워드 사용 불가
• 식별자는 대소문자 구별한다.
• 식별자에는 공백 포함 안됨!

let mesg: string = '홍길동';
const mesg2: number = 10;
const mesg3: boolean = true;
const mesg4: null = null;
const mesg5: undefined = undefined;
const mesg6 = function (): void {};

console.log(mesg, mesg2, mesg3, mesg4, mesg5, mesg6);
/*
	홍길동 10 true null undefined [Function: mesg6]
*/

var b: number = 10;
var b: number = 20;
console.log(b);		//20

TypeScript의 타입

• Type시스템은 언어가 지원하는 다양한 type의 값을 나타낸다.
• Type 시스템은 프로그램에서 저장하거나 조작하기 전에 제공된 값의 유효성을 검사한다.
• Type시스템은 더 풍부한 코드 힌트와 자동화된 문서를 제공한다.

Any 타입

• any type은 typeScript의 모든 Type(string,number ...)의 super type으로서 동적 type을 나타낸다.
• any type을 사용하면 변수에 대한 type검사를 생략하는 것과 같다.

let fullName: any = 'Park sungwon'; // any로 string타입을 담는다.

built-in 타입

let fullName: string = 'Park sungwon';
let sentence: string = `hello my name is ${fullName}`;

console.log(sentence);
// hello my name is Park sungwon

user-defined 타입

• 사용자 정의 형식에는 열거형 (enum) ,class, interface, array 및 tuple등이 포함된다.

---

Any 타입

let a: any = null;
a = 100; // number
console.log(a.toFixed(2)); // 소수점 자리 결정 100.00
a = '홍길동';
console.log(a.trim(), a.length); //string

---

User-defined 타입

Array<number> = number []

//1. 데이터 형식 []
let ex: number[] = [1, 2, 3];
console.log(ex.length); 	// 3
console.log(ex); 		//[1, 2, 3]

//2. Array<데이터> 형식
let ex2: Array<number> = [1, 2, 3];
console.log(ex2.length);	// 3
console.log(ex2);		//[1, 2, 3]

tuple : 배열의 특정위치에 고정된 타입만 저장가능

// tuple ==> 배열의 특정위치에 고정된 타입만 저장가능

// Declare tuple type
let x: [string, number]; // 배열 각 위치의 타입을 지정한다.
x = ['홍길동', 25]; //ok

// x=[25,"홍길동"]; // error
console.log(x[0], x[1]); // 홍길동 25

👏여기서 잠깐 !

const x:[string,number]

는 에러가 난다. 왜냐! const는 선언과 동시에 초기화가 이뤄져야한다. 즉 아래와 같이 해야한다.

const x: [string, number] = ['홍길동', 20];

enum

// 열거형
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Red;

console.log(Color.Red); //0

//초깃값 설정
enum Color2 {
  Red = 1,
  Green,
  Blue,
} //1,2,3
let c2: Color2 = Color2.Green;
console.log(c2);  //2

//명시적 값 설정
enum Color3 {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c3: Color3 = Color3.Green;
console.log(c3); //2

---

TypeScript 의 변수선언

하나의 명령문에서 타입과 값을 선언

var [변수명] : [type] = value;

타입만 선언하고 초깃값 설정 X (초기값은 undefined)

var [변수명] : [type];

타입 지정 x

var [변수명] = value;

//타입 추론
let num = 2;
console.log('value of num:' + num); //2
num="hello";  // error! 'string' 형식은 'number' 형식에 할당할 수 없습니다.

값 및 타입 설정 모두 안한다. 변수 타입은 any로 설정되고 값은 undefined

---

Type Assertion :

• Type Assertion은 변수의 타입을 다른 타입으로 변경하는 것을 의미한다.
• 기본 규칙은 현재 타입 -> any -> 목적 타입 순으로 설정함
• 타입 캐스팅은 런타임에 타입이 변경됨을 의미하지만, Type Assertion은 컴파일 시점에 발생됨을 의미한다.

자바스크립트에서 처럼 형 변환이 이루어져 String -> int처럼 숫자로 처리 되는 것이 아닌, 컴파일 하는 단계에서 넘어오는 타입을 검사하는 것이다. 즉 타입스크립트 상에서만 형 변환!
실제 형 변환이 일어나는 것이 아니다.

any -> string <string> 사용

// any 타입은 바로 <타입> 사용가능
let someValue: any = 'This is a string';
let strLength: number = (<string>someValue).length;// string
console.log(strLength);   // 16

any -> string as 사용

// as형식이 주로 사용됨
let strLength2: number = (someValue as string).length;
console.log(strLength2);  //16

현재 타입 -> any -> 목적타입 순

let str = '1';
var str4: string = (str as any) as string; // 현재 타입 -> any -> 목적 타입

// 현재 타입 -> any -> 목적 타입
let str2: number = <number>(<any>str);    // typescript상에서 형변환 
let str3: string = <string>(<any>str);
console.log(str, str2 + 1, str3, str4);

class

Person클래스 선언

export class Person {
  constructor(public name: string, public age: number, public address: string) {
    console.log('생성자 호출');
  }
  getName(): string {
    return this.name;
  }
  getAge(): number {
    return this.age;
  }
  getAddress(): string {
    return this.address;
  }
}

Person클래스 사용

import { Person } from './person';

// json  Object
var p = {
  name: '홍길동',
  age: 20,
  address: '서울',
};

console.log(p);
var p2 = p as Person; // 형태가 클래스랑 일치한다면 Person클래스 타입으로 변환
console.log(p2);

var p3: Person = new Person('홍길동', 20, '서울');  // 생성자 호출
console.log(p3.getName() + '\t' + p3.getAddress()); // 홍길동 서울

---

interface

interface User {
  bar: number;
  baz: String;
}
var u: User = {} as User; // u를 User타입으로 직접 지정 -> u안에 bar와 baz를 가질 수 있는 객체 생성
u.bar = 100;
u.baz = '홍길동';
console.log(u); // { bar: 100, baz: '홍길동' }