WEB/Javascript

타입스크립트에서 타입 지정하는 법

explorer999 2024. 7. 1. 22:13

 

프로젝트의 사이즈가 크면클수록 자유도, 유연성이 높은 게 독이 된다. 


TypeScript는 JavaScript보다 타입을 엄격하게 규정하고, 에러 메시지도 구체적으로 준다. 

Javascript의 부가기능 비슷한 것이다..

 

 

TypeScript를 쓰려면


1. nodejs를 설치하고..

https://www.youtube.com/watch?v=xkpcNolC270
참고하기


그리고 타입스크립트 파일은 브라우저가 읽지 못하기 때문에 자바스크립트로 변환해서 사용해야 한다. 
터미널에 tsc -w 입력해놓으면 자동으로 변환이 된다. 






<타입 지정하는 법>



1. 일반적인 변수 선언할 때

let 이름 :string[ ] = ['Lee', 'park'];
let 이름 :string = 'Lee';
let 이름 :{name : string} = { name : 'Lee' };


let 이름 :string | number = 'Lee';
let 이름 :string | number = 90090

유니온 타입: 왼쪽 타입 혹은 오른쪽 타입 중 어느 것을 써도 된다. 





2. 타입 자체를 변수로 저장해 놓기

type MyT = string[ ] | string;

이제부터 MyT를 타입 지정할 때 불러다가 쓸 수 있음. 

let 이름 :MyT = 'Lee';



3. 함수 만들 때


1) 파라미터에 타입 지정하기

2) 리턴 값에 타입 지정하기


function 함수( x :number)  :string {
return '1000'
}

파라미터는 number리턴은 string으로 하는 함수를 만들었다. 



4. 배열을 만들 때, 배열의 각각의 인덱스에 타입을 지정하기 

type = Student = [number, string];
let lee :Student = [1, 'korean'];



5. 오브젝트에서 여러 속성의 타입 한번에 지정하기

 

자바스크립트에서 오브젝트(Object)는 키(key)-값(value) 쌍으로 구성된 데이터 구조를 의미한다. 
파이썬의 딕셔너리 같은 것. 중괄호로 감싸서 정의한다. 


원래는 
const name = 'Kim' 
이렇게 변수 하나 당 값을 하나만 담을 수 있는데..
const age = 40;


print(name, age);

이런 식으로 변수를 두 개 받아서 출력할 수 있지만 속성들이 1000개라면 관리하기가 좀 어려울 것이다. 

오브젝트 타입은 

const Kim = {name : 'Kim', age: 40, address: '서울특별시...' , isStudent: false, ....}

이런 식으로 데이터를 그룹화해서 정의할 수 있다. 

 

 

 

type Member = {
[key :string] : string,
}

string으로 된 모든 오브젝트 속성의 타입은 string이어야 한다. 

 

 

 


6. 클래스에서 타입 지정하기

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