TIL 2022.10.25 Typescript 기본

Typescript 란?

자바스크립트는 기본적으로 Dynamic Typing(문자열과 숫자를 연산할 때 문자열을 숫자로 자동 변환해줌)이 적용되는데 편하긴 하지만 프로젝트 크기가 커질 수록 이런 장점은 단점으로 다가오게 되는데 타입스크립트에선 이런 경우를 error를 발생 시켜줌. 또한 Type을 확실하게 지정하기 때문에 error 도 보다 확실한 내용으로 return이 되는 것이 장점

그 외에는 자바스크립트와 비슷하기 때문에 자바스크립의 에드온 같은 느낌이라고 볼 수 있다.

 

Typescript 설치

Basic

1. node.js 설치 필수!!

2. 명령어 입력

npm install -g typescript

3. .ts 확장자로 파일 생성

4. tsconfig.json 파일 생성 후 아래 코드 작성

// tsconfig.json

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

5. .ts 파일은 그대로 사용이 불가능하므로 js 파일로 변환해줘야함 새로 터미널을 열어서 아래 명령어 입력

tsc -w

6. 이후 자동으로 같은 이름의 js 파일이 생기고 터미널 닫지않는 이상 자동으로 갱신됨

7. 실제로 import, 사용 할때는 js 파일을 사용해야함

 

React

1. 이미 있는 React 프로젝트에 설치하실거면

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

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

 

입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다.

근데 뭔가 많아서 불안정하고 에러도 많이날 것 같죠?

그러면 yarn 1버전이 설치되어있으면 yarn add라는 명령어 쓰든가 

그냥 애초에 처음부터 Typescript 적용된 React 프로젝트를 생성할 수도 있습니다. 

 

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

새로 작업폴더를 하나 만드시고 거기서 에디터와 터미널을 오픈한 다음 

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

 

Typescript 사용

// typescript 지정 가능한 타입 : string, number, boolean, bigint, null, undefined,[], {}

// 기본형 
let fullName : string = '홍길동'

// array 타입
let firstName : string[] = ['홍', '박']

// object 타입
let age : { age: number } = { age: 123 }

// 하나의 변수에 여러가지 타입이 올 경우
let twoType1 : string | number = 'name'
let twoType2 : string | number = 123

// 자주 쓰이는 타입을 변수로 저장해둘 수 있음
type nameType = string | number
let lastName : nameType = '123'

// 나만의 타입을 만들 수 도 있다. 리터럴 타입
type myType = '홍' | '박'  // '홍', '박' 만 값으로 올 수 있다.
let seong : myType = "박"

// 함수의 파라미터와 return값이 어떤 타입일지 지정할 수 있다.
// function practice(x : 파라미터타입) : 리턴타입 {}
function practice(x : number) : number {
    return x + 1
}

// 화살표 함수
const arrowFunc = (x : number) : number => x+1;

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

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

// array 자료형에 순서를 포함해서 타입을 지정해줄 경우 tuple 타입 이용
type Member = [number, boolean];
let john:Member = [100, false]

// object 타입 정의가 너무 길 경우 type 키워드로 변수에 담아서 정의 가능
// ?를 달아주는건 선택사항임을 표시 하는 것
type MyObject = {
    name? : string,
    age : number
}
let 철수 :MyObject = { 
    name : 'kim',
    age : 50
}

// object 타입에서 전부 타입 지정 index signature 라고도 한다.
type MyObject2 = {
    [key :string] : number,
}
let 영희 : MyObject2 = { 
    age : 50,
    weight : 100,
}

// class도 타입 설정 가능 다만 중괄호 내에서 미리 변수를 선언해두고 생성자 단에서 지정해야함
class Person {
    name;
    constructor(name :string){
      this.name = name;
    }
  }