TS - 타입스크립트 셋팅 및 필수문법(powershell 보안 오류)

자바스크립트는 타입에 관대하기 때문에 큰 프로젝트할 때 예상치 못한 에러나 버그가 발생할 수 있다.

그래서 엄격한 타입룰을 지정해주면서 더 정확한 에러메세지를 얻기위해 타입스크립트를 사용함.

 

 

설치

1. 일단 Node.js 최신버전, VScode 에디터오픈

2. 터미널 오픈 후 npm install -g typescript

3. 코드 짤 작업폴더 만들고 에디터에서 오픈

4. 작업폴더에 .ts로 끝나는 파일 만들고 사용시작하면됨.

여기서 .ts 파일은 브라우저에서 알아듣지 못하기 때문에 js파일로 변환작업이 필요한데,
터미널에 tsc -w 를 입력해두면 자동으로 js파일로 변환해준다.
그런데! 여기서 오류가 발생할 것. 아마도 이 시스템에서 스크립트를 실행할 수 없으므로~~ 어쩌구.
해결은 윈도우 파워쉘을 관리자권한으로 실행시킨 후,
set-executionpolicy remotesigned or unrestricted 입력 한담에 Y선택. 그럼 끗.

 

5. 이제 HTML파일 등에서 타입스크립트로 작성한 코드를 사용하려면 만들어진 .js파일 사용하면 된다.

 

 

 

React설치

 

-이미 있는 React 프로젝트에 설치할거면 터미널 오픈 후

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

 

- 그냥 React 프로젝트를 새로 만들거면 작업폴더 만들고 에디터와 터미널 오픈 후

npx create-react app 작명 --template typescript

 

---

셋팅

tsconfig.json 파일 생성 후 간단하게 셋팅해준다.

{
    "compilerOptions": {
        "target": "es5",  // 어떤 버전의 js로 바꿔줄지 정하기
        "module": "commonjs",  // 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하기
        "noImplicitAny" : true,  // any라는 타입이 의도치 않게 발생할 경우 에러띄우기
        "strictNullChecks" : true    // null, undefined 타입에 이상한 조작 시 에러띄우기
   }
}

마지막 noImplicityAny 와 strictNullChecks 는 옵션사항~

 

리액트 프로젝트에서는 아래 코드로 셋팅

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

 

---

기본문법

let str :string = "kim";
let any :string | number = "kim";  // union type

let arry :string[] = ['kim', 'park'];
let obj :{ name? : string } = { name: 'kim' };  // name? 속성은 옵션이예염

type Name = string | number;
let 이름 :Name = 'rani';


let user :string = 'kim';
let age :undefined | number = undefined;
let married :boolean = false;
let 철수 :(string|number|undefined|boolean)[] = [user, age, married];


let project :{member : string[], day :number, started : boolean} = {
    member : ['kim', 'park'],
    day : 30,
    started : true
}


function 함수(x :number) :number{   // 파라미터 num, return num
    return x * 2;
}

// 파라미터? < 옵션. x? == x :number|undefined
function 함수(x? :number) :void{ // 파라미터 타입지정하면 필수로 써야함
    1 + 1
}

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


type Membership = {
    [key :string] : string  // 글자로 된 모든 obj 속성 타입은 string
}

let person :Membership = { name : 'park' }

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

 

: 세미콜론으로 변수만들 때 타입을 지정해주면 된다.

배열, 객체, 클래스, 함수 등등 잘 살펴보자.