[Typescript]설치셋팅&기본문법

Typescript를 사용하는 이유

javascript는 Dynamic typing(타입을 알아서 바꿔줌)을 지원하는 언어이다. 
typescript는 타입을 지정해서 사용할 수 있어서 타입에러를 쉽게 잡아줄 수 있다. 

 

🌿 설치세팅

01. 일반 HTML, CSS, JS 웹개발 시 타입스크립트 설치

npm install -g typescript

여기서 에러가 난다면, node 버전문제로 최신버전으로 업그레이드 해주면 해결된다. 

1. 노드 버전 확인 : node -v

2. npm install -g n 명령어로 Node.js 버전을 관리할 수 있는 n이라는 모듈을 설치

3. n 모듈을 사용해 node.js 를 설치합니다.
n 명령어와 함께 원하는 버전을 입력하면 됩니다.

• n stable : 안정 버전
• n latest : 최신 버전
• n lts : lts 버전
• n x.x.x : 특정 x.x.x 버전

그런데, 나의 경우 여기서 경로문제로 에러가 발생했는데,
아래와 같이 installed 경로와 active 경로의 node 버전의 두 경로가 다른점이 보인다.
업데이트를 매우 안해줬나보다^^

installed : v16.15.1 to /usr/local/bin/node
active : v12.22.7 at /Users/cheryl/.nvm/versions/node/v12.22.7/bin/node

node의 stable 버전인 v16.15.1 버전이 잘 설치는 되었다. 하지만 활성화 된 node의 버전이 이전 버전인 것을 확인할 수 있다.
즉 노드의 버전이 바뀌지 않았다.

[해결방법]

ln -sf installed경로 active경로

이후 정상적으로 동작한다. 

참고 블로그
https://jsikim1.tistory.com/158
https://velog.io/@younoah/n-path

 

 

02. React 프로젝트에서 typscript 사용할 경우

1) 이미 있는 React 프로젝트에서 설치한다면,
작업폴더경로에서 터미널을 오픈한 후

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

 

2) 새로 만든다면,
새로 작업폴더를 하나 더 만들고, 거기서 에디터와 터미널을 오픈한 다음

npx create-reacp-app my-app --template typescript

이렇게 하면 바로 타입스크립트로 작업이 가능 할 줄 알았는데 왜때문인지 에러가 떠서 
01번에 설치과정을 해당경로에서 한번 더 해줬다. (npm install -g typescript)

 

 

03. Vue 프로젝트에서 typescript 사용할 경우

1) 작업 폴더경로에서 터미널 오픈한 후 

vue add typescript

 

2) 이제 vue 파일에서 타입스크립트를 쓰려면

<script lang="ts">

</script>

 

 

 

🍀 기본 문법

// 변수
type myType = string | number
type member = [number , boolean] // 무조건 첫번째는 number, 두번재는 boolean 
type myMember = {
    name :string
}
type keyType = {
    [key :string] :string,
}

let name :string[] = ['kim', 'park']
let objectType :{name :string} = {name: 'kim'}
let bothType :string | number = 'kim'
let myName :myType = 'name'
let john :member = [123, true]
let adem :myMember = {name: 'kim'}
let keyMember :keyType = {name: 'kim', age:'30', phone:'010'}


// 함수
function func(x :number) :number{ // 파라미터와 return 값 모두 type 지정 가능
    return x*2
}

// 클래스
class User {
    newName :string;
    constructor(name :string){
        this.newName = name;
    }
}