JavaScript

[TypeScript] 기본 문법 정리

JayLee 2021. 9. 10. 05:00
반응형

TypeScript

변수 타입 지정

let name: string = 'kim';

name = 'lee';	// OK
name = 100;	// Error

 가장 기본적인 기능으로는 변수의 타입 지정 기능이 있습니다. 위 예제에서는 name이라는 변수를 문자열(string) 타입으로 지정했습니다. 그렇기 때문에 'lee' 라는 문자열은 name 변수에 할당이 가능하고, 100은 Number 타입이기 때문에 name에 할당할 수 없습니다.

 

배열(Array) 타입 지정

let array: string[] = ['kim', 'lee'];

 배열의 타입도 지정이 가능합니다. 위와 같이 [] 키워드를 사용하면 배열을 의미하고 그 앞에 타입을 붙이면 배열에 들어 올 수 있는 타입을 지정할 수 있습니다. 

 

객체(Object) 타입 지정

let student: {name: string, id: number, addr?: string} = {name: 'lee', id: 1};

 객체도 타입 지정이 가능합니다. {} 키워드를 사용하면 되고, 괄호 내부에 객체의 key가 어떤 타입으로 사용될지 작성하면 됩니다. ? 키워드를 이용하여 해당 속성이 나오지 않을 수 있음을 표시할 수도 있습니다.

 

Union 타입 지정 - 여러개의 타입 허용

let id: string | number = 'kim';

id = 1111;	// OK

 여러개의 타입을 허용하는 Union 타입도 지정이 가능합니다. 위 예제에서는 id라는 변수가 정의되어 있는데, 해당 변수는 string 타입도 가능하고 number 타입도 가능합니다.

type IdType = string | number;

let id: IdType = 'lee';

 만약 Union 타입이 반복적으로 사용될 때는 타입 자체를 변수로 만들어서 사용 가능합니다. type이라는 키워드를 이용하여 타입 변수를 만들어 사용할 수 있습니다. 참고로, 타입 변수를 작성할 때는 일반적으로 대문자로 작성을 해서 일반 변수와 구분할 수 있도록 합니다.

 

함수 타입 지정

 함수에 사용되는 파라매터와 반환 값에 타입을 지정할 수 있습니다.

function add(a: number, b: number) : number {
	return a + b;
}

 위 예제와 같이 매개변수의 타입은 매개변수 옆에 지정하고, 반환 값의 타입은 함수 괄호() 옆에 지정합니다.

 

튜플(tuple) 타입 지정

type ArrayType = [nubmer, boolean];

let array: ArrayType = [100, true];	// OK
array = ['lee', true];	// Error

 배열 요소에 사용되어야할 타입을 순서대로 지정할 수 있습니다. 이를 튜플 타입이라고 합니다.

 

객체(Object) 타입 변수

type StudentType = {
  [key: string]: string
};

let lee: StudentType = {name: 'lee', id: '111'};

 이렇게 반복적으로 사용될 Object 타입도 변수화해서 사용 가능합니다. 반복적으로 같은 타입으로 지정해야할때는 [key: string] 문자로 된 키는 모두 문자열이다라고 표현도 가능합니다.

 

클래스 타입 지정

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

 위와 같이 멤버 변수의 타입도 지정이 가능합니다.

 

참고:

 

타입스크립트 쓰는 이유 & 필수 문법 10분 정리

에러해결 등은 이 게시물 참고 https://online.codingapple.com/unit/how-to-install-typescript-in-local-vue-react/ 근데 문법만 짚는다고 뭐가 되겠습니까 아마 코드를 짜봐야 코드짜는 사람이 되겠죠 타입스크립

youtu.be

 

반응형