2차 프로젝트가 어느 정도 마무리되었고 다음 주부터 기업협업이 시작된다. 프로젝트에 부족한 부분을 리팩토링하는 시간을 가지고 싶었지만 기업협업을 나가는 입장에서 기본은 갖추는 게 예의라는 생각이 들어 조금이라도 보고 가자라는 생각을 했다.
물론 가서 잘하고 싶고, 얼타고 있는 내 모습이 상상이 되기 때문에 미리 공부하는 마음이 더 크다...

Typescript란??

typescript는 자바스크립트의 타입부분을 업그레이드해서 사용하고 싶울 때 사용하는 javascript의 대용품이라고 생각하면 될 것 같다.
다른 언어가 아니라 javascript 문법 그대로 이용이 가능하며, 타입문법을 업그레이드해서 쓸 수 있다.

• typescript는 마이크로소프트에서 개발한 오픈소스 프로그래밍 언어이며, javascript의 단점을 보완하기 위해 만들어졌다.
• javascript는 Dynamic typing 언어 라고 하는데, 속도는 빠르지만 타입 안정성이 보장되지 않는다.
• 따라서, javascript로 작성한 프로젝트가 커질수록 디버그하는 것이 어려워진다.
• typescript는 정적 타입 언어(static type language)이기 때문에 컴파일 시 시간이 조금 걸리더라도 안정성을 보장한다는 점이 장점이다.

기본적인 사용 방법

예제를 보며 기본적인 사용 방법을 익혀 보았다

const 이름 : string = 'kim'

변수를 만들 때 타입지정이 가능하다.
변수명 : 타입명
타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있다.
타입에 맞지 않는 경우 에러메세지를 띄어줌

const 이름 :string[] = ['kim', 'park']
const 나이 :{ age : number } = { age : number }

배열이나 객체 자료의 타입 지정

const 이름 :string | number = 'kim';

여러가지 타입의 데이터가 들어와야 할 경우

type NameType = 'kim' | 'park;
const 이름 :NameType = 'kim';

type 키워드를 이용하여 타입을 변수처럼 담아서 사용이 가능

function 함수명(x :number) :number{
  return x * 2
}

함수는 파라미터와 return값이 어떤 타입일지 지정 가능
다른 타입이 파라미터로 들어오거나 ruturn될 경우 에러
함수눈 return 타입으로 void를 설정 가능하며, return이 없는지 체크할 수 있는 타입

//에러
function 함수명(x :number | string) {
  return x * 2
}

//가능
function 함수명(x :number | string) {
  if (typeof x === 'number'){
    return x * 2
  } 
}

typescript는 지굼 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없음
항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야함

type Member = [number, boolean];
const john:Member = [100, false]

array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple 타입을 쓰면 됨
대괄호 [] 안에 들어올 자료의 타입을 차례로 적어주면 됨

type MyObject = {
  name? : string,
  age : number
}
const 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

객체 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용 가능
type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용할 수 있음
특정 속성이 선택 사항이면 물음표를 기입 가능

type MyObject = {
  [key :string] : number,
}
const 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

객체 안에 어떤 속성이 들어갈지 아직 모른다면 그냥 전부 타입지정도 가능
index signature이라고 한다!

Typescript 컴파일시 세부설정 (tsconfig.json)

tsconfig.json 이라는 파일을 하나 생성한다.
여기엔 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능하다.
아래와 같은 기능들이 있다고 한다.

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

전체는 https://www.typescriptlang.org/tsconfig 에서 확인 가능

기본적인 문법을 정리해보았는데, 직접 사용해보면서 상세한 개념과 사용 방법을 숙달해야겠다.