타입스크립트 typescript 자바스크립트 적용 및 기본 문법

자바스크립트는 동적언어, 타입스크립트는 정적언어라고 하는데요. 동적언어는 비교적 작은 규모의 프로젝트에 어울리고 java, c++ 과 같은 정적언어는 대규모 프로젝트에 어울린다고 합니다. 동적언어인 javascript는 타입정의를 하지 않아 에러가 발생하는 상황임에도 에러를 뿜지 않아 에러 코드가 그대로 서비스단까지 가서 동작하지 않는 경우가 있어 이런 에러를 줄여주고자 타입스크립트를 도입하는것 같습니다.

 

자바스크립트 + 타입스크립트

먼저, 이 글은 Visual Studio Code를 기준으로 작성되었습니다.

타입스크립트 설치하기

 

타입스크립트를 설치하기 위해서는 node.js 가 설치되어 있어야합니다. 설치되어있지 않은 분들은 google 검색창에 node.js 검색하시고 먼저 다운받아 주시기 바랍니다. 다운받으셨다면 터미널 혹인 cmd에서 node -v 노드 버전을 확인하는 명령어를 입력해서 설치가 잘되었는지 확인합니다.

1. VSCode 에서 폴더를 만들고 터미널 창을 열어줍니다. (Terminal - new terminal)
2. package.json을 만들어줍니다. npm init -y
3. 타입스크립트를 설치해줍니다. npm install typescript
4. 타입스크립트 설정 파일을 만들어줍니다. npx tsc --init
5. 컴파일 할 때에는 npm tsc 를 입력해줍니다. (컴파일된 js 파일이 생깁니다.)

VSCode 타입스크립트 확장프로그램

1. code runner 설치
2. 터미널 창에 npm install ts-node
3. settings.json 에서
4. "code-runner.executorMap": { "typescript": "node_modules/.bin/ts-node" },
5. 컴파일 control + option + n

타입스크립트 기본문법

기초_ 변수에 선언

: number , : boolean, : string, : number[], : Array<number>, : [string, number]

const size: number = 123;
const isBig: boolean = size >= 100;
const msg: string = isBig ? '크다' : '작다';
 
const values: number[] = [1, 2, 3];
const values2: Array<number> = [1, 2, 3];
values.push('a'); // err
 
const data: [string, number] = [msg, size];
data[0].substr(1); // return '다'
data[1].substr(1); // err -> substr() 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환
 
console.log('typeof 123 =>', type of 123);
console.log('typeof "abc" =>', type of 'abc');
console.log('typeof [1, 2, 3] =>' type of [1, 2, 3]);
 
let v1: 1 | 14 | 32; // 1, 14, 32 중 하나
v1 = 14; 
v1 = 23; // err
 
let color: 'red' | 'blue' | 'green'; // 'red', 'blue', 'green' 중 하나
color = 'red';
color = 'black'; // err
 
let a: any;
a = 123;
a = 'any는 타입에 상관 없이 넣을 수 있지만 많이 사용하면 typescript의 의미가 퇴색됩니다.';
a = () => {};

 

함수에 선언하는 타입

function f1: void(){
    console.log('hello')
}; // void: 아무 값도 반환하지 않고 종료되는 함수 
 
function f2: never(){
    throw new Error('some err');
    while(true){...}
}; // never: 비정상적으로 종료되거나 무한루프가 도는 함수 (거의 사용하지 않음)

 

오브젝트 타입과 교집합 타입

let v: object;
v= {name: "worker-k"};
console.log(v.firstName); //err 존재하지 않는 객체
 
let t: (1 | 4 | 6) & (1 | 5 | 9); // 교집합인 타입
t = 1;
t = 4; //err 4는 교집합이 아님 

Enum

* enum에 값을 할당하지 않으면 0이 할당 됩니다.

* 값이 할당되어 있고 그 다음 값은 할당되어 있지 않다면 이전에 할당된 수 + 1 이 할당됩니다.

* 숫자형은 양방향, 문자열은 단방향으로 맵핑됩니다.

* compile 후에 불필요한 enum의 객체를 남겨두지 않기 위해서는 앞에 const 입력합니다.

// ★★★★★ enum ★★★★★ 
enum Fruit {
    Apple, 
    Banana = 5,
    Orange
}
 
const v1: Fruit.Apple;
console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange); // 0, 5, 6 
 
//////////////////////////////////////////////////////////////////////////
 
function getIsValidEnumValue(enumObject: any, value: number|string) {
    return Object.keys(enumObject)
        .filter(key => isNan(Number(key))) // 양방향을 단방향으로 바꿔주기 위한 코드
        .some(key => enumObject[key] === value);
}
 
enum Fruit {
    Apple,
    Banana,
    Orange
}
 
enum Language {
    Korean = 'ko'.
    English = 'en'.
    Japanese = 'jp'
}
 
console.log(getIsValidEnumValue(Fruit, 1)); //true
console.log(getIsValidEnumValue(Fruit, 5)); //false
console.log(getIsValidEnumValue(Fruit, 'Orange')); //false
console.log(getIsValidEnumValue(Language, 'ko')); //true
console.log(getIsValidEnumValue(Language, 'korean')); // false

 

함수타입

* function a (name: string, age: number ): string{} 에서 마지막 : string 은 반환 타입을 가리킵니다.

* 선택매개변수는 마지막에 입력해야합니다.

* 나머지 매개변수는 ... 으로 표기하며 배열에 넣을 수 있습니다. 

* 매개변수가 많아지면 named parameters 방식을 사용하는 것이 좋습니다. (우클릭 리팩토링 기능 있음)

// ★★★★★ 함수타입 ★★★★★ 
function getText(name: string, age: number): string{} 
// 맨뒤 :string은 반환타입
 
function getText(name: string, age: number, language?: string): string {} 
// language?: string 선택매개변수 string 혹은 undefined 일수도 있음
 
function getText(name: string, age: number, language='Korean'): string {} 
// language='Korean' 입력시 자동으로 string 으로 인식
 
function getText(name: string, ...rest: number[]): string {} 
// ...rest 는 나머지를 뜻하며 배열로만 가능
 
function getParam(this: string, index: number): string {}
// this의 타입도 정의 가능 (맨앞에)

 

인터페이스

// ★★★★★ 인터페이스 ★★★★★
interface Person {
    name: string;
    age: number;
    tall?: number; 
    // 선택속성으로 없어도 상관 없음
    [key: string]: string | number 
    // 인덱스 타입: 값의 타입만 설정 _ 문자열인 모든 속성의 타입은 문자열 혹은 숫지
}
 
const p1: Person = { name: 'lala', age: '21' } // err
 
interface Korean extends Person {
    isLiveInSeoul: boolean; 
}

 

클래스

접근범위 설정, 기본값은 public

public : 외부, 상속 둘 다 노출합니다.

protected : 외부에는 노출 하지 않지만 상속에는 노출합니다. / 객체를 만들 수 없고 그런 목적으로 protected 생성

private : 외부, 상속 둘 다 비노출 (ex_ #name) 이라고 #을 표기하기도 합니다.

readonly : 값을 수정할 수 없습니다.