[TypeScript] 설치 , 문법 정리

TypeScript

타입스크립트는 정적 타입 검사자로 프로그래밍을 실행시키지 않으면서 코드의 오류를 검출한다.
그리고 TS파일 자체를 사용 할수는 없다. JS파일로 변환 컴파일하여 사용을한다.

TS 쓰는이유

JS는 아주 훌륭한 언어이지만, 하나씩 나사가 빠진 사례가 종종있다.

const str = '5'
15 - str //  10

이 외에도 많지만 명시적으로 타입을 지정하여 에러를 방지하기위해 사용한다.

설치 & 시작

프레임워크를 쓰지않는 환경에서 TS 사용시 설치
npm install -g typescript

기존 리액트 프로젝트에 설치
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

리액트 CRA 로 시작
npx create-react-app my-app --template typescript

타입
: , | , 연산자와 JS 원시값,참조값 (string, number, bigint, boolean, undefined, symbol, null,array,object) + unknown , any 를 타입으로 사용한다.

// 문자열타입
let user : string = 'str';
user = 123 // err

// 문자열 배열
let strArr : string[] = ['str'];

// 숫자 배열
let numArr : number[] = [123];

// 문자 + 숫자 배열 혼합으로 사용시 () 로 묶어주고 타입 사이에 | 를 넣는다. 
let arr : (string | number) [] = ['str', 123]; 

// 객체
let obj : {name : string , age : number} = { name : 'str', age: 21};

// 함수 매개변수 타입지정
function sdsd(x : string) : string{ // 리턴값도 타입 지정할수있다. (옵션)
  return x + '!';
}
sdsd('Hello'); // Hello!

// 타입 변수에 짧게 담아서 사용할수있음
type a = string; type b = number;
const user : a = 'str';
const age : b = 23;

클래스

class Sega {
    name; year;
    constructor(a :string , b:number){
        this.name = a;
        this.year = b;
    }
}

const game = new Sega('Sonic' ,1992); // Sega{ name: 'Sonic' , year : 1992 }

클래스 안에 함수를 지정하여 프로토타입 처럼 사용 가능하다.

class Car {
    model
    price
    constructor(a : string , b : number){
        this.model = a;
        this.price = b;
    }
    tax() : number {
        return this.price / 10
    }
}

const sonata  = new Car('sonata' , 30000); // Car{model:'sonata' , price:30000}
sonata.tax(); // 3000

구조분해할당
클래스 에서 많은 인자값을 받아, 배열에 담는 코드

class Cars{
    model
    price
    constructor(...param : (string | number)[]){
        let strArr : str[] = [];
        let numArr : num[] = [];

        for(let i of param){
            if ( typeof i === "string"){
                strArr.push(i);
            } else {
                numArr.push(i);  
            }
        }
        this.model = strArr;
        this.price = numArr;
    }

}
const huyndai  = new Cars('sonata','avante','santafe' ,232,455,756, 300);

// Cars{model:['sonata','avante','santafe'], price:[232,455,756, 300]}

함수

함수 타입 지정

type xType =  number;

function user(x:xType):number {
	return x + 2
}

리액트

리액트 hook 에 타입 지정 useState<타입>()

const [user,setUser] = useState<string[]>(['']) // 문자열인 배열