타입스크립트 컨벤션 typescript conventions

타입스크립트 관련 정보

익숙한 타입스크립트

한국외대 융복합소프트웨어를 전공하면서 다양한 프로그래밍 언어를 배웠다. 처음 배운 언어는 C 언어이다. 그리고 Python, Java 순으로 배웠다. 자료구조와 알고리즘을 C언어로 배운 만큼 타입을 정하는 게 익숙했다.

Javascript는 동아리 프로젝트를 하면서 처음 봤다. int, str 같은 타입 선언은 없고 var, let, const 가 전부인 언어였다. 처음에는 정말 당황스러웠지만 지금 거의 2년 넘게 써오면서 Javascript의 이런 황당한 타입 선언?은 오히려 편해졌다.

 

Express.js와 React.js를 작년부터 공부하고 있었다. Typescript는 웹 프로그래밍 강의로 유명한 노마드 코더의 유튜브 동영상인 '타입스크립트 + 리액트 조합이 꿀인 이유'를 보고 알게 되었다. Javascript와 비슷하지만, Typescript 타입 선언은 익숙하면서도 신선하게 느껴졌다. 바로 노마드 코더 니콜라스 선생님에게 'Typescript로 블록체인 만들기'를 수강하면서 관심을 키웠다.


타입스크립트가 그래서 뭔데?

타입스크립트 홈페이지는 타입 기능을 더한 자바스크립트로 타입스크립트를 소개한다.

TypeScript extends JavaScript by adding types

또 일반 자바스크립트로 컴파일되는 타입 기능이 있는 자바스크립트 상위 호환 언어로 보면 된다.

A typed superset of Javascript that compiles to plain Javascript

Typescript = Javascript + A type system 인 셈이다.

 

타입스크립트는 2012년 하반기 마이크로소프트에서 출시하고 지금까지 잘 관리하고 있는 언어이다.

Google에는 Golang이 있다

 

취준생 입장에서 보면 Java 공화국인 우리나라에서 Javascript는 웹 서비스에 국한되어 사용되고 있다. 서버 사이드에서 사용되는 Node.js는 애플리케이션 규모가 작은 경우나 스타트업에서 주로 사용된다. 자바스크립트의 동적타이핑과 약 타입(실행 도중 타입이 변하는 경우, weakly typed)은 프로젝트가 복잡해지거나 팀 규모가 커지면 문제가 발생한다. 작성자와 사용자 사이의 의사 소통 문제가 발생하기도 하고

"이거 타입이 문자열 아니었어?"

 

같은 이유로 유지보수 힘들어진다. 하지만 타입스크립트는 자바스크립트와 다르게 대규모 애플리케이션 개발을 위해 만들어지고 정적 타입 기능을 제공한다.


3 + [9] = "39" WTF!

자바스크립트에서 3 + [9] 는 문자열 '39' 다....

정말 말도 안 되는 상황이다.

타입스크립트는 타입 안정성(type safety)을 가지고 있다.

타입 안정성은 타입을 이용해 프로그램이 유효하지 않은 작업을 수행하지 않도록 방지한다.

  1. 1 + []
  2. '5' / 2

에서 자바스크립트는 "1", "2.5"로 계산한다.. 하지만 타입스크립트는 바로 에러가 발생했다고 에디터에서 빨간줄을 자비없이 그어버린다. 이런 에러 메시지는 확실하게 오류가 발생하는 경우를 줄여준다!

 

타입스크립트는 타입을 명시하거나 추론하는 방식을 선택해서 사용 할 수 있다!


/// 타입 명시
const add = (num1: number, num2: number): number => {
  const result: number = num1 + num2
  return result
}

/// 타입 추론
const add = (num1: number, num2: number) => {
  const result = num1 + num2
  return result
}

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

  타입스크립트 자바스크립트
타입 정적 동적
자동 변환 O X
타입 확인 시기 실행 중 컴파일 중
에러 검출 시기 실행 중 컴파일 중

Typescript는 서버에서 어떻게 사용될까?

NestJS

A progressive Node.js framework for building efficient, reliable and scalable server-side applications.

Deno.js

Deno is a simple, modern and secure runtime for JavaScript and Typescript that use V8 and is built in Rust.


Reference

Type annotations

타입스크립트에서 매개변수와 반환값이 어떤 type인지 설정하는 코드입니다.

Type inference

타입스크립트는 함수의 반환값 타입을 확인합니다.

Function

const add = (num1: number, num2: number): number => {
  return num1 + num2;
};

const subtract = (num1: number, num2: number): number => {
  return num1 - num2;
};

function divide(num1: number, num2: number): number {
  return num1 / num2;
}

function multiple(num1: number, num2: number): number {
  return num1 * num2;
}

const logger = (message: string): void => {
  console.log(message);
};

const throwError = (message: string): void => {
  if (message) throw new Error(message);
};
/*
const throwError = (message: string): never => {
  throw new Error(message);
};
 */

const todayForecast = {
  date: new Date(),
  weather: 'sunny',
};

const logWeather = ({
  date,
  weather,
}: {
  date: Date;
  weather: string;
}): void => {
  console.log(date, weather);
};

logWeather(todayForecast);

Object

const profile = {
  name: 'jinsu',
  age: 26,
  coords: {
    lat: 0,
    lng: 15,
  },
  setAge(age: number): void {
    this.age = age;
  },
};

const { age, name }: { age: number; name: string } = profile;
// const { age }: number = profile; errrrrror

const {
  coords: { lat, lng },
}: { coords: { lat: number; lng: number } } = profile;

Type annotaions

변수가 참조하는 값의 type이 무엇인지 typescript에 표시하는 코드입니다.

  • function이 'any' 유형을 반환하고 값을 명확히 해야 할 때
const json = '{"x":10, "y":20}';
const coordinates: { x: number; y: number } = JSON.parse(json);
// JSON.parse 는 any를 반환합니다.
  • 변수를 한 라인에 선언하고 나중에 초기화할 때
let countries: string[] = ['korea', 'japan', 'spain', 'ukraine'];
let foundCountry: boolean;

for (let i = 0; i < countries.length; i++) {
  if (countries[i] === 'korea') {
    foundCountry = true;
  }
}
  • 변수를 추정할 수 없는 유형으로 지정하려는 경우
let numbers: number[] = [-20, -30, 50, 60];
let numberAboveZero: boolean | number = false;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 0) {
    numberAboveZero = numbers[i];
  }
}

Type inference

Typecript는 변수가 참조하는 값의 type을 파악하려고 합니다.
변수 선언과 초기화가 같은 라인에 있으면 Typescript는 변수 type을 확인합니다.

let kiwi = 5;
// kiwi is number
let beer; // beer is any
beer = 5;

타입스크립트는 무엇인가

자바스크립트 종류

자바스크립트는 표준 자바스크립트인 ES5와 ES6 이상 버전을 의미하는 ESNext 그리고 type을 추가한 타입스크립트입니다.
ES5 -> ES6 -> typescript 포함관계 입니다.

타입 기능 장점

개발자들이 타입 오류가 발생했을 때 자바스크립트 보다 쉽게 대처합니다.
그리고 대규모 프로젝트에서 의사소통을 원활히 합니다.

트랜스파일

타입스크립트는 Typescript Compiler를 통해 ES5 자바스크립트로 변환됩니다.
트랜스파일러는 소스코드를 다른 프로그래밍 언어로 변경할 때 사용하고 바이너리 코드로 바꾸는 컴파일러와 구분하기 위해 사용합니다.

EXNext grammer

yield

function* gen() {
  yield* [1, 2];
}

for (const value of gen()) {
  console.log(value);
}

yield 문은 iterator를 생성할 때 사용합니다.
iterator는 독립적으로 존재하지 않고 iterable를 통해 얻습니다.
iterator를 만드는 iterable을 generator라고 합니다.

Promise, async, await

async function get() {
  let values = new Array();
  values.push(await Promise.resolve(1));
}

Typescript grammer

tuple

let numberArray: number[] = [1, 2, 3]; // 배열
let tuple: [boolean, number, string] = [true, 1, 'a']; // 튜플

abstract data type, algebraic data type

대수 타입은 다른 자료형의 값을 가지는 자료형입니다.

type numberOrString = number | string; // 합집합 타입
type animalAndPerson = Animal & Person; // 교집합 타입

+ Recent posts