[코딩애플] ts part 1-1. 필수 문법 & 세팅

Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함)

Typescript쓰는 이유

Typescript

= Javascript + Type 문법

"Javascript Superset"

1. JavaScript는 Dynamic Typing 가능

5 - '3'

원래는 숫자 - 숫자만 가능하지만, JS가 알아서 숫자로 바꿔줌. 개꿀 (프로젝트가 크면 단점이 됨)

코드 길게 짤 땐 자유도 & 유연성은 오히려 쓰레기임

TypeScript는 타입을 엄격히 검사해준다.

5 - '3' // TS Error: "문자랑 숫자빼는거 이상한데요, 빨리 수정하셈!"

2. 에러메시지 퀄리티가 오짐

에러메시지가 정확해진다. 자바스크립트 에러는 추상적이고 추적 어려운 에러가 많다.

var counter = 0;
counter = '1'; // Type 'string' is not assignable to type 'number'. 
			   // TS 에러: '멍청아 숫자넣어야지 왜 문자를 넣음'

var obj = {
	append: 123,
}
obj.apend; // Property 'apend' does not exist on type '{append: number;}'. Did you mean 'append'?
		   // TS에러: '토익 300점이냐 apend 아니고 append임'

TypeScript는 그냥 코드 에디터 부가기능 역할로 봐도 된다. 문법이랑 사용법 다 똑같은데 type부분만 잘 지정해주면 된다.

TypeScript 설치하기

1. 일반 HTML CSS JS 웹 개발시 사용하기

static 웹페이지 개발시 사용 방법이다.

1. Node.js 최신 버전 설치하기 (아니면 에러남)
2. VScode 에디터 준비하기
3. 터미널 오픈하기 (ctrl+`)
4. <code>npm install -g typescript</code> 입력하기
5. 코드 짤 폴더 만들고 에디터로 폴더 오픈하기
6. 어쩌고.ts 파일 생성 후 코드 짜기
7. tsconfig.json 생성 후 내용 작성

// tsconfig.json
{
	"compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

• **target**: 어떤 버전의 자바스크립트로 바꿔줄지 지정
  • es5 : 2010년
  • es2016, esnext : 최신버전
• **module**: 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 지정
  • commonjs : require 문법
  • es2015, esnext : import 문법
  • 어느정도 IE 호환성을 원한다면 es5, commonjs가 국룰이다. 그런데 정말 신버전 자바스크립트만 표현가능한 문법들이 있는데 그런 것들은 esnext 버전으로 올려줘야 사용가능하다.
• 추가로 넣을 만한 것들

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

• **noImplicitAny** : any라는 타입이 의도치않게 발생한 경우 에러를 띄워주는 설정
• **strictNullChecks** : null, undefined 타입에 이상한 조작을 하면 에러를 띄우는 설정

ts 파일은 브라우저가 못 읽는다. 브라우저는 js 파일만 읽을 수 있기 때문이다. 그래서 당연히 ts 파일을 js로 변환해야한다.

1. 터미널 켜서 <code>tsc -w</code>입력한다. (ts 파일을 js 파일로 자동 변환된다)

이렇게 파일을 변환하는걸 **compile(컴파일)한다** 고 하는데 그 옵션들을 tsconfig.json에 기입한다.

2. React, Vue, ... 라이브러리에서 사용하기

이미 있는 React 프로젝트에서 설치하기

작업폴더 경로에서 터미널을 오픈하고

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

를 입력해주면 끝이다. 이제 js 파일을 ts 파일로 바꿔서 이용할 수 있다. 근데 뭔가 많아서 불안정하고 에러도 많이 날 것 같다.. 그래서 근야 애초에 처음부터 Typescript 적용된 React 프로젝트를 생성할 수도 있다.

그냥 React 프로젝트를 새로 만들거면

새로 작업 폴더를 하나 만들고 거기에 에디터와 터미널을 오픈하고

npx create-react-app my-app --template typescript

를 입력해주면 끝이다.

TypeScript 문법 정리

사용 방법

let 이름 :string = 'kim';

'이름' 변수엔 string(문자) type만 들어올 수 있습니다 라는 의미. 이렇게 type을 엄격하게 관리할 수 있다. 이름에 숫자 형태를 넣으려하면 에러가 발생한다.

간단한 변수 타입 지정 가능

• string
• number
• boolean
• null
• undefined
• bigint
• []
• {}
• ... 등

array 타입지정

let 이름 :string[] = ['kim', 'park']

이 변수엔 string 담긴 array만 들어올 수 있습니다 라는 의미.

object 타입지정

let 이름 :{name? : string} = {name: 'kim'};

name 속성은 옵션이고(optional, 안들어와도 에러 안남), name 속성에는 string만 들어올 수 있다는 의미.

다양한 타입이 들어올 수 있게 하려면 Union type

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

string 혹은 number 타입만 들어올 수 있음(union type)

타입은 변수에 담아쓸 수 있음, Type alias

type Name = string | number;

let 이름 :Name = 123;

차별화를 주기 위해 주로 **대문자로 시작**한다.

함수에 타입지정 가능

function 함수(x :string) :number {
	return x * 2;
}
함수('123'); // 에러

이 함수는 파라미터로 number, return 값으론 number여야 한다는 의미.

array에 쓸 수 있는 tuple 타입

type Member = [number, boolean]; // tuple 타입
let john:Member = []; // 에러
let john:Member = [123, true];

무조건 첫째는 number, 둘째는 boolean여야 한다는 의미

object에 타입지정해야할 속성이 너무 많으면

type Member = {
	[key: string]: string
}
let john : Member = { name: 'kim'}

• **[key: string] : string** ➡️ 문자로 된 모든 object 속성 타입은 string여야 한다는 의미. 그리고 그 값(value)도 string여야 함.

class 타입지정 가능

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

실제로 코드를 짜다보면 TypeScript에서 지켜야할 코딩 룰도 있고, 타입문법 외의 기능도 많다. 그래서 실제 코드를 짜보면서 배우자.

tsconfig에 들어갈 기타 항목들

전체는 https://www.typescriptlang.org/tsconfig 에서 구경할 수 있다.

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