Typescript란?

Typescript? 🔑

Typescript : 타입스크립트는 자바스크립트에 타입을 부여한 언어이다.

• MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다.

• 대규모 애플리케이션을 개발하는 데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 개발되었다.

• TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다.

• ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있다.

JS vs TS

• JS는 5 - ‘3’과 같은 Dynamic Typing이 가능하다.

• TS는 ERROR MESSEGE가 정확하다.

설치

• nodejs 설치
• npm install typescript
• tsconfig.json 파일 만들기(컴파일시 옵션설정하기 위함)

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

commonjs는 require 문법

es2015, esnext는 import 문법을 사용함

• 브라우저는 JS만 읽을 수 있기때문에 TS -> JS로 변환시켜 줘야함( 터미널에 tsc -w)

문법

let a: string = 'kk';

a = 3; // ERROR

'number' 형식은 'string' 형식에 할당할 수 없습니다.

TS는 변수를 선언할때 타입을 지정해준다.

지정해준타입이 아닌 다른 타입을 넣으면 ERROR를 발생시킨다.

(string, number, boolean, null, undefiend, bigint, [], {}, string[], { name? : string } 등등)

Union Type이라고 해서 let a: string[] | number = 123; 이런식으로 타입을 여러개 받을수도있다.

Tuple Type [number, boolean]

type MyType = string[] | { name: string };

let a: MyType = ['abc'];

타입선언이 길어지면 위와 같이 타입을 변수에 넣어서 사용하여도 된다.( 대문자로 사용하자. )

function abc(x: number): number {
  return x * 2;
}

abc('123'); // ERROR

함수에도 타입선언을 해줄 수 있다.

arg를 숫자타입으로 지정해두었고, return 부분도 숫자타입으로 선언해주었다.

type Member = {
  [key: string]: string;
};

let a: Member = { abcdefg: 'asd' };

string타입의 모든 키는 키값으로 string타입을 가지게 선언할 수 있다.

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

class문법은 살짝 다르다.

tsconfig.json

{
 "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문 이상하면 에러내기
 }
}

이러한 것들이 있다~