[typescript] 설치셋팅 & 문법정리

*react에서 설치할때와는 다름!

[typescript 설치셋팅]

1. 만든 폴더로 이동

cd my-app

2. typescript 설치 (Node.js는 항상 최신버전!)

npm install -g typescript

//보안에러 뜨면 

sudo npm install -g typescript

3. 작업폴더에 .ts로 끝나는 파일 만들고
   tsconfig.json 파일 생성 후, 하단 코드 작성
   tsconfig.json은 ts -> js 컴파일시 옵션설정가능
   (리액트나 뷰 이런거 쓰는 중이면 이미 있을 수 있음)

• 'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분
• 'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳(commonjs는 require 문법 / es2015, esnext는 import 문법)

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

// 추가로 넣을 만한 것들 
// noImplicitAny는 any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정
// strictNullChecks는 null, undefined 타입에 이상한 조작하면 에러를 띄우는 설정

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

4. But, 웹브라우저는 ts 파일을 알아듣지 못하기 때문에
   js 파일로 변환 작업
   (터미널 켜고tsc -w 입력해두면 자동으로 ts파일을 js 파일로 변환)

tsc -w

[React 프로젝트에서 Typescript 사용할 경우]

1. 이미 있는 React 프로젝트에 설치하실거면
   : 작업폴더경로에서 터미널을 오픈하신 후
   입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다.

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

2. 그냥 React 프로젝트를 새로 만들거면
   : 새로 작업폴더를 하나 만드시고 거기서 에디터와 터미널을 오픈한 다음

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

---

[typescript 사용법 정리]

1. 변수를 만들 때 타입지정 가능
   타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined, [], {}등이 있다.

let 이름 :string = 'kim' 


let 이름 :string[] = ['kim', 'cho']
//'이 변수에는 스트링이 담긴 배열만 올 수 있습니다' 라는 뜻


let 이름 :{ name?: string } = {name: 'kim'}
//?를 붙이면, name속성은 옵션이라는 뜻


let 이름 :string | number = 'kim';
//다양한 타입이 들어올 수 있게 하려면 union type


type NameType = string | number;
let 이름 :NameType = 'kim';
//type 키워드를 이용해 타입을 변수처럼 담아서 사용 가능
//type명은 보통 대문자로 사용하여, 일반 변수와 구분 


type NameType = 'kim' | 'park;
let 이름 :NameType = 'kim';
//string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용 가능
//원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또'park'만 들어올 수 있음
//literal type이라 부름

2. 함수 타입지정
   함수는 파라미터와 return 값이 어떤 타입일지 지정 가능
   함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입

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


//타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없음
//항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줌

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

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

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

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

//문자만 담긴 array가 와야한다는 뜻
let name :string[] = ['sujin','jun']

4. 객체
   object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능하다.
   type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방하다. 차이점은 별로 없다. 특정 속성이 선택사항이면 물음표를 기입가능합니다.

//name?는 name 속성이 있어도 되고, 없어도 된다는 뜻
type MyObject = {
  name? : string,
  age : number
}

let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}



//object안에 어떤 속성이 들어갈지 아직 모른다면 그냥 전체타입지정도 가능 
//index signature라고 합니다. 
type MyObject = {
  [key :string] : number,
}

let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

4. -1. 숫자or문자가 가능한 array/object 타입지정은?

let 팀원들 :(number | string)[] = [1, '2', 3]
let 오브젝트 :{a: number | string } = {a: '오브젝트'}

5. Class
   중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용 가능하다.

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

6. any
   any type은 모든 자료 허용함
   (*typescript를 쓰는 의미가 없어짐
   비슷한 기능으로 :unknown)

let 이름 :any;
이름 = 123;
이름 = true;

7. unknown
   : any와 비슷한 기능이지만, any 보다 안전한 이유는

//unknown
let 이름 :unknown
이름 = {}

let 변수1 :string = 이름    //쉴드쳐줌. 오류가남 

//any 
let 이름 :any
이름 = {}

let 변수1 :string = 이름   //쉴드 벗겨짐. 오류안남  

//unknown
let 이름 :unknown
이름 - 1    //오류남

//any 
let 이름 :any
이름 - 1    //오류안남

8. typescript 간단한 수학연산도 타입이 맞아야 한다.

string 타입 + 1 (허용)
number 타입 + 1 (허용)
struing | number 타입 + 1 (X) -새로운 타입이니까.