[TypeScript] 타입스크립트란? 기본 문법

JS	TS
🧺 ⇒ 🍎, 🥦, 🍟, 🎂	🧺 🍎 ⇒ 🍎 🧺  🥦 ⇒ 🥦 🧺 🍟, 🎂  ⇒ 🍟, 🎂

JavaScript

• Dynamic Typing
• 유연성과 자유도가 높음
  • 규모가 커지고 코드가 길어짐에 따라 단점이됨

console.log('1' * 1)  // 1

console.log(1 +'')    // '1'

 

TypeScript

https://www.typescriptlang.org/play?ssl=1&ssc=21&pln=1&pc=1#code/MYewdgziA2CmB00QHMAUByAjOgBAKh0wEoAoIA

• JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있음
• JavaScript에 비해 엄격한 검사함
  • 자세한 에러 메세지 제공
  • 오타 교정
• 브라우저는 TypeScript를 이해하지 못함. 컴파일러를 사용하여 .ts(TypeScript)파일을 .js(JavaScript) 파일로 변환
  • 쉬운 호환, 통합
• 클래스 기반 객체를 만들 수 있음

/* 자료형이 다를 때 */

console.log('1' * 1) 
// The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

const test = "1"
test = 1
// Cannot assign to 'test' because it is a constant.

 

 

• 변수 선언

let test : string = 'dan';

let test2 : string = 1; // Type 'number' is not assignable to type 'string'.

// Array
let arr : [] = [1 ,2 ,3]; //Type '[number, number, number]' is not assignable to type '[]'. Source has 3 element(s) but target allows only 0.
let arr : number[] = [1 ,2 ,3];

// Object
let tesbObj : { first : string } = { first : 'abc' } 

let tesbObj2 : { first : string } = {  } // Property 'first' is missing in type '{}' but required in type '{ first: string; }'.
let tesbObj3 : { first?: string } = {  }

// Union type : 여러 자료형 지정 가능
let test : string | number = 'dan';
test = 123

 

• Type alias : 타입 자체를 변수에 넣어 사용 가능

type test = string | number ;

let num : test = 123