[JS] JS와 TS의 차이점

Javascript vs Typescript

• TypeScript는 Javascript의 기반의 언어
• Javascript는 클라이언트 측 스크립트 언어 Typescript는 객체 지향 컴파일 언어
• 객체 지향 프로그래밍 패러다임은 데이터 추상화에 중심
  - 객체와 클래스라는 두 주요 개념을 기반으로 한다.

Javascript

• 웹 개발에 주로 사용되는 언어
• 웹 페이지를 대화식으로 만드는 프로그래밍 언어
• 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행하는 역할
• 클라이언트 측 스크립트 언어
    - 사용자가 웹 브라우저를 열고 웹페이지를 요청할 시 해당 요청이 웹 서버로 이동한다.
• 멀티 스레딩, 멀티 프로세싱 기능이 없음

Typescript

• Javascript의 상위 집합으로 Javascript의 모든 기능이 있다.
• TypeScript 컴파일러를 사용해 ts(Typescript)파일을 js(Javascript)파일로 변환, 쉽게 통합
• 정적 유형 검사를 제공
• 클래스 기반 객체를 만들수 있음 
• 클래스 기반이므로 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있다.

Typescript 예시 코드

• 자바스크립트

function sum(a,b) {
  // 정적 타입을 지원하지 않으므로 타입의 반환값을 리턴해주어야 한다.
    return a + b;
}

• 타입스크립트

function sum(a:number, b: number) {
   return a + b;
}

// 정적 타입을 지원, 컴파일 단계에서 요류 포착에 장점 => 코드의 가독성을 높임

class Person {
   private name: string;
   
   constructor(name: string) {
     this.name = name;
   }
}

//위의 타입스크립트를 트랜스파일링하면 다음과 같이 자바스크립트 파일이 생성됨
var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHello = function () {
        return "Hello, " + this.name;
    };
    return Person;
}());
var person = new Person('Lee');
console.log(person.sayHello());

• 정적 타입

let foo:string = "hellow" // 타입스크립트
let foo = "hello" // 자바스크립트

/ 함수선언식 타입스크립트
function multiply1(x: number, y: number): number {
  return x * y;
}

//함수 선언식 자바스크립트
function multiply1(x, y) {
  return x * y;
}

// 함수표현식 타입스크립트
const multiply2 = (x: number, y: number): number => x * y;

// 함수표현식 자바스크립트
const multiply2 = (x, y) => x * y;

//boolean
let isBoolean: boolean = false;
//null
let isNull: null = null;
//undefined 
let isUndefined:undefined = undefined;
// array
let list: any[] = [1,2,"3",false]
let list2: number[] = [2,3,4]
let list3: Array<number> = [1,2,3]

//tuple
let tuple : [string, number]
tuple = ["hello",10]

//enum : 열거형은 숫자값 집합에 이름을 지정한 것
enum Color1 {Red,Green,Blue}
let c1: Color1 = Color1.Green
console.log(c1) //1


//any 타입추론을 할 수 없거나 타입 체크가 필요없는 변수에 사용
let isAny: any = 5
isAny ="string:
isAny = false

//void : 일반적으로 함수에 반환값이 없을 경우
function isUser():void {
	console.log("hello")
}

//never : 결코 발생하지 않은 값
function infiniteLoop(): never {
	while(true){}
}

기타 

• 타입을 정의할때는 소문자, 대문자를 구별해야함
• 타입 선언을 생략하면 동적으로 타입이 결정 => 타입 추론
• 타입 선언 생략 + 값 할당 x => any 타입

var foo;

console.log(typeof foo);  // undefined

foo = null;
console.log(typeof foo);  // object

foo = {};
console.log(typeof foo);  // object

foo = 3;
console.log(typeof foo);  // number

foo = 3.14;
console.log(typeof foo);  // number

foo = "Hi there";
console.log(typeof foo);  // string

foo = true;
console.log(typeof foo);  // boolean

let foo; // let foo: any와 동치

foo = 'Hello';
console.log(typeof foo); // string

foo = true;
console.log(typeof foo); // boolean

결론 

타입스크립트는 Javascript를 기반으로 한 언어이며 Javascript는 클라이언트 측 스크립팅 언어

Typescript는 객체 지향 컴파일 언어이다.

 

Javascript에서는 주로 웹개발에 사용되고 페이지를 대화식으로 만드는 프로그래밍 언어이다.

Typescript는 정적 유형 검사를 제공하고, 클래스 기반으로 객체를 만들 수 있다.

 

참고 자료

자바스크립트와 타입스크립트 차이점

Javascript와 Typescript의 차이점