[Typescript] Typescript 란? / Typescript 사용법

Typescript란?

javascript에 타입(형식)을 부여하여,

코드가 의도대로 바르게 동작하도록 도와주는 javascript 확장 버전

 

Typescript의 필요성

타입을 지정해, 변수선언과 인자전달에서 발생하는 버그를 최소화한다.

ES6로 작성된 코드를 ES5로 바꾸어 준다. (컴파일할때)

 

Typescript 설치하기 (Node.js 패키지로 설치)

npm install --save-dev -g typescript

// --save-dev : devDependencies에 리스트 추가

// -g : 글로벌 설치

 

Typescript 프로젝트 만들기 ( 설정 파일 생성 )

// 글로벌 설치시

tsc --init


// 로컬 설치시

./node_modules/.bin/tsc --init

 

설정 파일 수정하기 ( tsconfig.json )

// tsconfig.json에 적용된 설정은, ts => js 로 컴파일 될때 사용된다.

{
  "compilerOptions": {
    "target": "es5",                          /* ECMAScript 버전 지정 : 'ES3' (default), 'ES5'등등. */
    "module": "commonjs",                     /* 모듈 코드 생성 지정 : 'none', 'commonjs', 'amd'등등. */
    "sourceMap": true,                     /* '.map' 소스맵 파일 생성 ( 난독화한 코드 다시 복구 ) */
    "outDir": "dist",                        /* 출력 결과 저장 장소 지정. */
    "strict": true,                           /* 엄격한 유형 검사 옵션 활성화. */
  }
}

 

Typescript 코드 작성하기 ( 타입 지정하기 )

const world = 'Hi';

// word인자의 형식을 string으로 제한 하고, 초기값을 world로 지정한다

// hello함수의 반환 형식을 string으로 제한 한다.

export function hello(word: string = world): string {
    return `Hello ${world}! `;
}

 

Typescript 코드 javascript 코드로 변환 ( 컴파일 ) 하기

tsc

 

컴파일 결과 ( index.js )

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var world = 'Hi';
function hello(word) {
    if (word === void 0) { word = world; }
    return "Hello " + world + "! ";
}
exports.hello = hello;
// 같은 폴더 안에 index.js.map 파일도 생겼다!

 

ts변경해서 저장할 때마다 자동으로 컴파일 시키기

tsc -w

 

typescript로 입력형식 검사하기

// name은 string 형식이어야함
// age는 number 형식이어야함
// gender는 빈값이어도 되지만("?" 사용), 만약 값이 주어진다면 string 형식이어야함
// sayHi함수는 string값을 반환해야함

const sayHi = (name: string, age: number, gender?: string): string => {
    return `Hello ${name}, you are ${age}, you are a ${gender}`;
};

// 함수 사용
console.log(sayHi("Nicolas", 24, "male"));

export {};

 

typescript 형식 모음

// 1. 참 거짓 값 : Boolean
let isDone: boolean = false;


// 2. 숫자 : Number
let num: number;


// 3. 문자열 : String
let str: string;


// 4. 배열 : Array

// 문자열만 가지는 배열
let strs: string[] = ['name', 'age', 'grade'];
let strs: Array<string> = ['name', 'age', 'grade'];

// 숫자만 가지는 배열
let nums: number[] = [1, 2, 3];
let nums: Array<number> = [1, 2, 3];

// 다중 타입
let array: (string | number)[] = ['name', 1, 2, 'age', 'grade', 3];
let array: Array<string | number> = ['name', 1, 2, 'age', 'grade', 3];

// 전부 허용
let array: any[] = [0, 1, {}, [], 'str', true];


// 5. 튜플 : Tuple
let student: [string, number, boolean] = ['name', 1234, true];
console.log(user[0]); // 'name'
console.log(user[1]); // 1234
console.log(user[2]); // true

// 읽기 전용 튜플 만들기
let a: readonly [string, number] = ['name', 123];


// 6. 열거형 : Enum

// 기본적으로 0부터 시작하여 1씩 값 증가
enum Week {
    Sun, // 0
    Mon, // 1
    Tue, // 2
    Wed, // 3
    Thu, // 4
    Fri, // 5
    Sat  // 6
}

// 수동으로 값 전환 가능, 변경시점부터 1씩 값 증가
// 기본적으로 0부터 시작하여 1씩 값 증가
enum Week {
    Sun, // 0
    Mon, // 1
    Tue = 23, // 23
    Wed, // 24
    Thu, // 25
    Fri, // 26
    Sat  // 27
}


// 7. 모든 타입 : Any
const list: any[] = [1, true, 'Anything!'];


// 8. 알수없는 타입 : Unknown
let a: any = 123;
let u: unknown = 123;

let v1: boolean = a; // 모든 타입 any이므로, 어디든 할당가능
let v2: number = u; // 알수없는 타입 unknown이므로, any에만 할당가능
let v3: any = u; // 옼에이
let v4: number = u as number; // unknown을 number라고 정하고! 할당하기


// 9. 객체 : Object
let obj: object = {};
let arr: object = [];
let func: object = function () {};

let userA: { name: string; age: number } = {
    name: 'Jinho',
    age: 123
};

let userB: { name: string; age: number } = {
    name: 'Juwon',
    age: false, // 지정한 타입에 맞지 않으므로 Error
    email: 'thesecon@gamil.com' // 지정하지 않은 인자이므로 Error
    
    
// 다중타입 사용예시
let union: (string | number);
union = 'Hello type!';
union = 123;
union = false; // 지정한 타입에 맞지 않으므로 Error


// 10. 인터섹션과 "&"를 이용해 타입 조합
interface IUser {
    name: string,
    age: number
}
interface IValidation {
    isValid; boolean
}

const heropy: IUser = {
    name: 'Heropy',
    age: 36,
    isValid: true // IUser에 지정되지 않은 타입이므로 Error
};

const neo: IUser & IValidation {
    name: 'Neo',
    age: 34,
    isValid: true
}


// 11. interface로 사용자가 원하는 객체 형식으로 지정 / js에 컴파일되지 않음
interface Human {
    name: string;
    age: number;
    gender: string;
};

const person = {
    name: "nico",
    age: 31,
    gender: "male"
};

//person 객체는 Human 인터페이스 형식이어야 한다!
const sayHi = (person: Human): string => {
    return `Hello ${person.name}, you are ${person.age}, you are a ${
        person.gender
    }!`;
    
console.log(sayHi(person));

export {}


// 12. classes로 사용자가 원하는 객체 형식으로 지정 / js로 컴파일 됨
class Human {
    public name: string;
    private age: number;
    public gender: string;
    constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
}

const jinho = new Human("jinho", 25, "male");
    const sayHi = (jinho: Human): string => {
        return `Hello ${jinho.name}, you are ${jinho.age}, you are a ${
            jinho.gender
        }!`;
    };
    
    console.log(sayHi(jinho));
    
    export {};

 

타입 단언 하기

typescript에게 타입을 알려준다.

이전에 지정한 타입을 무시하고, 새로운 타입을 지정할 수 있다.

// as '타입' 형태로 지정해준다.
const div = document.querySelector('div') as HTMLDivElement;